کدهای جادویی

شروع موضوع توسط sajjad_eb ‏3 نوامبر 2006 در انجمن زبان HTML

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

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    سلام

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

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

    کد مربوط به CSS
    کد (Text):
    #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 خودمون
    کد (Text):
    <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>
     
    آخرین ویرایش: ‏12 نوامبر 2006
    نوشته شده توسط sajjad_eb در ‏3 نوامبر 2006
    nooshin88، sorooshpardaz، TehranSD و 16 نفر دیگر از این ارسال تشکر کرده اند.
  2. mazoolagh

    mazoolagh Active Member

    ارسال‌ها:
    1,381
    تشکر شده:
    167
    امتیاز دستاورد:
    36
    زیبا - هم از نظر ظاهر و هم کدینگ
     
    نوشته شده توسط mazoolagh در ‏3 نوامبر 2006
    hadi71120000 و baviran از این پست تشکر کرده اند.
  3. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    کدهای جادویی (دو)

    ممنون دوست عزیز

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



    کد CSS
    کد (Text):
    .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
    کد (Text):
    <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>
     
    آخرین ویرایش: ‏4 نوامبر 2006
    نوشته شده توسط sajjad_eb در ‏4 نوامبر 2006
    محمدمهدی، abbasfisal، ایران1440 و 15 نفر دیگر از این ارسال تشکر کرده اند.
  4. ali-msh

    ali-msh Member

    ارسال‌ها:
    514
    تشکر شده:
    169
    امتیاز دستاورد:
    16
    سجاد جان من نمیفهمم که Css چه مزیتی داره نسبت به Dhtml ؟؟؟؟

    :دي
     
    آخرین ویرایش: ‏5 نوامبر 2007
    نوشته شده توسط ali-msh در ‏4 نوامبر 2006
    hadi71120000 از این پست تشکر کرده است.
  5. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    سلام علی جان . خوبی ؟ استاد خوبه ؟ :wink:
    البته می دونم که جوابه این سوال رو می دونی . به هر حال تاجایی که می دونم می گم .
    به نظر من مقایسه این دوتا زبان اصلا کار خوبی نیست . چون کاربردشون متفاوته . البته در بعضی جاها استفاده مشترک هم دارن . مثلا تو ساختن منو ها .
    DHTML که مخفف Dynamic HyperText Markup Language هست بیشتر روی پویا بودن و حالت حرکتی Object ها کار داره و اونهارو به حرکت در می یاره . اما CSS برای تعریف حالتهای Object ها هست .
    اما به نظر من تو کاربردهای مشترک مثل همون منوها ، CSS به خاطر کد نویسی کم تر و ساده تر بودنش سرعت لود شدن بهتره .
     
    نوشته شده توسط sajjad_eb در ‏4 نوامبر 2006
    ایران1440، hadi71120000، nafas.php و 4 نفر دیگر از این ارسال تشکر کرده اند.
  6. pesare-tanha

    pesare-tanha Member

    ارسال‌ها:
    599
    تشکر شده:
    265
    امتیاز دستاورد:
    16
    خيلي عالي بود

    سجاد جان خيلي ممنون
    اقا سايت كد css نداري براي ما اينجا قرار بدي
    ممنون ميشم اين كار رو انجام بدي
     
    نوشته شده توسط pesare-tanha در ‏4 نوامبر 2006
    hadi71120000 از این پست تشکر کرده است.
  7. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    چه نوع کدی می خوای ؟ سایت کامل ، منو ، لایه بندی یا ... ؟
     
    نوشته شده توسط sajjad_eb در ‏4 نوامبر 2006
    hadi71120000 از این پست تشکر کرده است.
  8. pesare-tanha

    pesare-tanha Member

    ارسال‌ها:
    599
    تشکر شده:
    265
    امتیاز دستاورد:
    16
    من مي خوام يه سايت با css براي خودم بزنم

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

    سايتي باشه كه كد css داشته باشه حالا اگر شما داريد سايت ممنون ميشم اينجا بزاري
     
    نوشته شده توسط pesare-tanha در ‏4 نوامبر 2006
  9. pesare-tanha

    pesare-tanha Member

    ارسال‌ها:
    599
    تشکر شده:
    265
    امتیاز دستاورد:
    16
    فرقي نداره

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

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

    سايتي باشه كه كد css داشته باشه حالا اگر شما داريد سايت ممنون ميشم اينجا بزاري
     
    نوشته شده توسط pesare-tanha در ‏4 نوامبر 2006
  10. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    این سایت می تونه کمکت کنه . باز اگه کد خاصی تو ذهنت بود حتما بگو :wink:
     
    نوشته شده توسط sajjad_eb در ‏4 نوامبر 2006
    ایران1440، hadi71120000، nafas.php و 2 نفر دیگر از این ارسال تشکر کرده اند.
  11. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    کدهای جادویی (سه) -- آلبوم عکس

    کد جادویی امروز آلبومی زیباست که فقط با CSS طراحی شده . واقعا خیلی عالیه . من که خیلی باهاش حال کردم .
    یه نمایی از اون رو ببینید و بعد دانلودش کنید .
    فقط زحمت عکسها و resize کردنشون با خودتون . اونارو باید تو فولدر slide بریزید .
     
    نوشته شده توسط sajjad_eb در ‏5 نوامبر 2006
    mazyar_f، nafas.php، local_lover و 2 نفر دیگر از این ارسال تشکر کرده اند.
  12. سلمان 313

    سلمان 313 Member

    ارسال‌ها:
    222
    تشکر شده:
    40
    امتیاز دستاورد:
    16
    نوشته شده توسط سلمان 313 در ‏6 نوامبر 2006
    o_real_love، imanmir و saeed-magicboy از این ارسال تشکر کرده اند.
  13. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    نوشته شده توسط sajjad_eb در ‏6 نوامبر 2006
    hadi71120000 و nafas.php از این پست تشکر کرده اند.
  14. Mds

    Mds Active Member

    ارسال‌ها:
    239
    تشکر شده:
    60
    امتیاز دستاورد:
    28
    کارت درست آقا سجاد

    خیلی عالی بود
     
    نوشته شده توسط Mds در ‏12 نوامبر 2006
    hadi71120000 از این پست تشکر کرده است.
  15. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    قربانت . چشات درست می بینه :wink:
     
    نوشته شده توسط sajjad_eb در ‏12 نوامبر 2006
    hadi71120000 و local_lover از این پست تشکر کرده اند.
  16. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    کدهای جادویی (چهار) -- خودتون کد جادویی بسازید

    فقط ببینید و استفاده کنید . این دفعه دانلود نداریم .
     
    نوشته شده توسط sajjad_eb در ‏13 نوامبر 2006
    hadi71120000، nafas.php و N I M A از این ارسال تشکر کرده اند.
  17. salim_a

    salim_a Member

    ارسال‌ها:
    238
    تشکر شده:
    21
    امتیاز دستاورد:
    18
    دستت رفقا درد نکنه

    سایت های خوبی و ومعرفی می کنید اگه ادامه داشته باشه خیلی خوبه
     
    نوشته شده توسط salim_a در ‏13 نوامبر 2006
    hadi71120000، local_lover و nima-crazy-3000 از این ارسال تشکر کرده اند.
  18. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    کدهای جادویی Css (پنج) -- سایت کامل با Css (یک)

    اینم ( نمایش ، نمایش -- لینک دانلود هم همون بالاست ) یه سایت کامل با CSS . اینجا هم سایتشه که کلی سایت های آماده باحال داره .:D :D :) :)
     
    نوشته شده توسط sajjad_eb در ‏13 نوامبر 2006
    local_lover، Mehdi.KinG، saeed-magicboy و یک نفر دیگر از این ارسال تشکر کرده اند.
  19. sajjad_eb

    sajjad_eb Well-Known Member

    ارسال‌ها:
    527
    تشکر شده:
    285
    امتیاز دستاورد:
    63
    کدهای جادویی Css ( ) -- ساخت arrows و ...

    ابتدا یک تگ DIV بسازید بعد یکی یکی این کدهای CSS رو تست کنید . این کد ها arrows و Hourglass و ... رو به شما می ده که می تونید هر کدوم رو جاهای مختلف با کدهای ساده و کم حجم به کار ببرید . به قول خودم نمایی از هر کدهم بالاشه :D
     
    نوشته شده توسط sajjad_eb در ‏19 نوامبر 2006
    hadi71120000، local_lover، Mehdi.KinG و 2 نفر دیگر از این ارسال تشکر کرده اند.
  20. iransohrab

    iransohrab Member

    ارسال‌ها:
    655
    تشکر شده:
    73
    امتیاز دستاورد:
    16
    سجاد جان دستت طلا ...
     
    نوشته شده توسط iransohrab در ‏19 نوامبر 2006
    hadi71120000 و nima-crazy-3000 از این پست تشکر کرده اند.
وضعیت موضوع:
موضوع بسته شده است.

به اشتراک بگذارید