کدهای جادویی

وضعیت
موضوع بسته شده است.
sajjad_eb

sajjad_eb

Well-Known Member
سلام

کدهای جادویی ( JavaScript )

از این به بعد قسط دارم کدهای جالبی از CSS رو براتون بزارم . :wink:
یه راست بریم سر اصل مطلب
از یه منو که کاملا با CSS و XHTML طراحی شده شرو می کنیم .
اول یه نمایی از این کد رو ببینید

کد مربوط به CSS
کد: 
#container {
  position:relative; 
  }
#menu {
  text-align:center; 
  position:relative; 
  height:8em;
  }
.box {
  position:relative; 
  float:left; 
  top:30px;
  }
#menu a, #menu a:visited {
  position:relative; 
  text-decoration:none; 
  background-color:#06a; 
  color:#fff; 
  display:block; 
  width:70px; 
  height:15px; 
  padding:5px;
  margin:0 1px;
  }
#menu a .topleft, #menu a .topright {
  position:absolute; 
  top:0; 
  width:0; 
  height:0; 
  overflow:hidden;
  border-top:10px solid #fff;
  }
#menu a .topleft {
  left:0; 
  border-right:10px solid #06a; 
  }
#menu a .topright {
  left:70px; 
  border-left:10px solid #06a; 
  }
#menu a:hover {
  background-color:#000; 
  }
#menu a:hover .topleft {
  border-right:10px solid #000; 
  border-top:10px solid #fff;
  }
#menu a:hover .topright {
  border-left:10px solid #000; 
  border-top:10px solid #fff;
  }

کد مربوط به XHTML یا همون HTML خودمون
کد: 
<div id="container">
  <div id="menu">
    <div class="box">
      <a href="#nogo">
        Item 1
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="#nogo">
        Item 2
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="#nogo">
        Item 3
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="#nogo">
        Item 4
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
    <div class="box">
      <a href="#nogo">
        Item 5
        <span class="topleft"></span>
        <span class="topright"></span>
      </a>
    </div>
  </div>
</div>
 
آخرین ویرایش:
sajjad_eb

sajjad_eb

Well-Known Member
کدهای جادویی (دو)

mazoolagh گفت:
زیبا - هم از نظر ظاهر و هم کدینگ
کلیک کنید تا باز شود...
ممنون دوست عزیز

بهتره بریم به کد جادویی بعدی برسیم
می تونید از اینجا ببینیدش . البته دوستان با این کد آشنایی دارن . مستطيل گوشه گرد



کد CSS
کد: 
.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:10px;
}
.xsnazzy {
background: transparent; 
width:240px; 
float:left; 
margin:0 3px;
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}



و اینم کد HTML
کد: 
<body>
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div dir="rtl" class="xboxcontent">
<h1 class="color_a">کدهای جادویی دو</h1>
<p>این جعبه که با گوشه های گرد ساخته شده تماما با CSS و HTML طراحی شده است .</p>
<p>درمورد <a href="http://forum.majidonline.com/showthread.php?t=57699" >مستطيل گوشه گرد</a> قبلا در مجیدآنلاین بحث شده بود. </p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
</body>
 
آخرین ویرایش:
ali-msh

ali-msh

Member
سجاد جان من نمیفهمم که Css چه مزیتی داره نسبت به Dhtml ؟؟؟؟

:دي
 
آخرین ویرایش:
sajjad_eb

sajjad_eb

Well-Known Member
ali-msh گفت:
سجاد جان من نمیفهمم که Css چه مزیتی داره نسبت به Dhtml ؟؟؟؟
کلیک کنید تا باز شود...

سلام علی جان . خوبی ؟ استاد خوبه ؟ :wink:
البته می دونم که جوابه این سوال رو می دونی . به هر حال تاجایی که می دونم می گم .
به نظر من مقایسه این دوتا زبان اصلا کار خوبی نیست . چون کاربردشون متفاوته . البته در بعضی جاها استفاده مشترک هم دارن . مثلا تو ساختن منو ها .
DHTML که مخفف Dynamic HyperText Markup Language هست بیشتر روی پویا بودن و حالت حرکتی Object ها کار داره و اونهارو به حرکت در می یاره . اما CSS برای تعریف حالتهای Object ها هست .
اما به نظر من تو کاربردهای مشترک مثل همون منوها ، CSS به خاطر کد نویسی کم تر و ساده تر بودنش سرعت لود شدن بهتره .
 
P

pesare-tanha

Member
خيلي عالي بود

سجاد جان خيلي ممنون
اقا سايت كد css نداري براي ما اينجا قرار بدي
ممنون ميشم اين كار رو انجام بدي
 
P

pesare-tanha

Member
من مي خوام يه سايت با css براي خودم بزنم

هرچي لازم هست رو ميخوام يعني menu-siteهر جه لازم هست

سايتي باشه كه كد css داشته باشه حالا اگر شما داريد سايت ممنون ميشم اينجا بزاري
 
P

pesare-tanha

Member
فرقي نداره

من مي خوام يه سايت با css براي خودم بزنم

هرچي لازم هست رو ميخوام يعني menu-siteهر جه لازم هست

سايتي باشه كه كد css داشته باشه حالا اگر شما داريد سايت ممنون ميشم اينجا بزاري
 
sajjad_eb

sajjad_eb

Well-Known Member
pesare-tanha گفت:
من مي خوام يه سايت با css براي خودم بزنم

هرچي لازم هست رو ميخوام يعني menu-siteهر جه لازم هست

سايتي باشه كه كد css داشته باشه حالا اگر شما داريد سايت ممنون ميشم اينجا بزاري
کلیک کنید تا باز شود...

این سایت می تونه کمکت کنه . باز اگه کد خاصی تو ذهنت بود حتما بگو :wink:
 
sajjad_eb

sajjad_eb

Well-Known Member
کدهای جادویی (سه) -- آلبوم عکس

کد جادویی امروز آلبومی زیباست که فقط با CSS طراحی شده . واقعا خیلی عالیه . من که خیلی باهاش حال کردم .
یه نمایی از اون رو ببینید و بعد دانلودش کنید .
فقط زحمت عکسها و resize کردنشون با خودتون . اونارو باید تو فولدر slide بریزید .
 
sajjad_eb

sajjad_eb

Well-Known Member
کدهای جادویی Css ( ) -- ساخت arrows و ...

ابتدا یک تگ DIV بسازید بعد یکی یکی این کدهای CSS رو تست کنید . این کد ها arrows و Hourglass و ... رو به شما می ده که می تونید هر کدوم رو جاهای مختلف با کدهای ساده و کم حجم به کار ببرید . به قول خودم نمایی از هر کدهم بالاشه :D
 
وضعیت
موضوع بسته شده است.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا