معرفی css 3

شروع موضوع توسط pouya saadeghi ‏2 فوریه 2010 در انجمن زبان HTML

کلمات کلیدی:
وضعیت موضوع:
موضوع بسته شده است.
  1. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    ساخت دکمه با css3

    چطور بدون استفاده از تصاویر، دکمه های زیبا درست کنیم؟
    :wink: با استفاده از CSS3 میتونیم دکمه هایی درست کنیم که با حرکت موس تغییر کنن:

    [​IMG]

    آموزش:
    اول یه لینک در HTML میسازیم:
    HTML:
    <div><a href="http://www.pasargad-graphic.com">Pasargad-Graphic</a></div>
     
    حالا میریم سراغ CSS و برای لینکمون که کلاس btn داره ، طول ، حاشیه ، فونت و رنگ تعیین میکنیم:

    کد (Text):
    a.btn {width: 250px; padding: 10px 25px 10px 25px;
     font-family:Constantia;
     font-weight:bold;
     font-style:italic;
     font-size: 20px;
     text-decoration: none;
     color: #370000;
     
    بعد متن لینک رو سایه دار میکنیم و یه رنگ بکگراند اضافه میکینم.
    قبلا درمورد اضافه کردن سایه به متن گفته بودیم
    رنگ بکگراند هم باعث میشه مرورگرهایی مثل اپرا ، اینترنت اکسپلورر و بقیه مرورگرهای قدیمی که گرادینت رو ساپورتن میکنن، دکمه رو به درستی (اما بدون گرادینت) نشون بدن.
    کد (Text):
    text-shadow: 0px 1px 0px #d90404;
    background-color:#bf0000;
     
    حالا گرادینت رو برای فایرفاکس و کروم و سافاری ایجاد میکنیم:
    کد (Text):
    background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
     background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
     
    خوب! تا اینجا کد سی اس اس btn شده این:
    کد (Text):
    a.btn {  width: 250px;
    padding: 10px 25px 10px 25px;
    font-family:Constantia;
    font-weight:bold;
    font-style:italic;
    font-size: 20px;
    text-decoration: none;
    color: #370000;
    text-shadow: 0px 1px 0px #d90404;
    background-color:#bf0000;
    background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
    border: 1px solid #7e0000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;}
     
    حالا برای وقتی که موس روی دکمه حرکت میکنه، باید رنگ ها عوض بشه. پس این کد رو هم تو CSS مینویسیم:
    کد (Text):
    a.btn:hover {
      color: #2f4300;
      text-shadow: 0px 1px 0px #a3db21;
      background-color:#7eab13;
      background: -moz-linear-gradient(#c6ff62, #7eab13 35%, #425909);
      background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c6ff62),color-stop(.35, #7eab13),color-stop(1, #425909));
      border: 1px solid #89b100;
    }
     
    تبریک میگم! تموم شد! :cool:
    کد کامل صفحه:



    کد (Text):
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pure CSS3 Buttons</title>
     
    <style>
    .linear{width:300px; margin:0 auto; height:100px;}
    a.btn {
    width: 250px;
    padding: 10px 25px 10px 25px;
    font-family:Constantia;
    font-weight:bold;
    font-style:italic;
    font-size: 20px;
    text-decoration: none;
    color: #370000;
    text-shadow: 0px 1px 0px #d90404;
    background-color:#bf0000;
    background: -moz-linear-gradient(#ff0000, #bf0000 35%, #7e0000);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(.35, #bf0000),color-stop(1, #7e0000));
    border: 1px solid #7e0000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    }
     
    a.btn:hover {
    color: #2f4300;
    text-shadow: 0px 1px 0px #a3db21;
    background-color:#7eab13;
    background: -moz-linear-gradient(#c6ff62, #7eab13 35%, #425909);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c6ff62),color-stop(.35, #7eab13),color-stop(1, #425909));
    border: 1px solid #89b100;
    }
     
    </style>
    </head>
     
    <body>
    <br>
     
    <div class="linear">
    <a href="http://www.pasargad-graphic.com" class="btn">Pasargad-Graphic</a>
    </div>
     
    </body>
    </html>
     
     
    نوشته شده توسط pouya saadeghi در ‏9 جولای 2010
    toxin، ark6069، nasim_fz و 3 نفر دیگر از این ارسال تشکر کرده اند.
  2. vahidalemi

    vahidalemi Member

    ارسال‌ها:
    48
    تشکر شده:
    28
    امتیاز دستاورد:
    6
    سلام و خسته نباشید
    آقا میشه کد لینک عکس رو هم بذاری ؟ مثلا کل عکس های لینک دار دورشون یک کادر بیاد ؛ یا اگه از روش رد بشی یک افکتی داشته باشه ؟
    ممنون میشم بذارید با تشکر :rose:
     
    نوشته شده توسط vahidalemi در ‏21 جولای 2010
  3. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    اسکرول‌بار برای وبکیت

    سلام [​IMG]
    امروز ساخت اسکرول‌بار با استفاده از CSS رو با هم یاد میگیریم [​IMG]
    این ویژگی هنوز به صورت رسمی برای CSS منتشر نشده و فعلا فقط تو مرورگرهای وبکیت (گوگل کروم و اپل سافاری) ساپورت میشه ، اما در نسخه های آینده فایرفاکس هم پشتیبانی خواهد شد.

    روش‌های دیگه‌ای که قبلا استفاده میشد و تو بیشتر مرورگرها اجرا میشه، استفاده از جاوا اسکریپت یا استفاده از پلاگین jQuery بود.
    این روش فقط با استفاده از کدهای CSS انجام میشه و کدهای -webkit- هم که برای webkit هستن ، پس طبیعتا برای IE و Opera و Firefox کار نمیکنن [​IMG]
    ابتدا این کدها رو در CSS قرار میدیم:
    کد (Text):

     ::-webkit-scrollbar {background:#fff;}
    ::-webkit-scrollbar-thumb {background:#999; }
     
    خط اول رنگ بکگراند اسکرول رو مشخص میکنه و خط دوم هم رنگ دستگیره اسکرول:
    [​IMG]
    همونطور که می‌بینید اسکرول ها خیلی پهن هستند. با تنظیم width و height سایز اسکرول رو تنظیم میکنیم:
    کد (Text):

     ::-webkit-scrollbar {
    background:#fff;
    width:10px;height:10px;
    }
    ::-webkit-scrollbar-thumb {
    background:#999;
    }
    خاصیت width پهنای اسکرول عمودی رو مشخص میکنه و خاصیت height ، پهنای اسکرول افقی رو .
    [​IMG]
    حالا گوشه اسکرول ها رو گرد میکنیم و یه سایه داخلی بهش اضافه میکنیم:
    کد (Text):

     ::-webkit-scrollbar {
    background:#fff;
    width:10px;height:10px;
    }
    ::-webkit-scrollbar-thumb {
    background:#999;
    border-radius:5px;
    box-shadow:inset 0 0 10px #333;
    }
    [​IMG]
    با استفاده از خاصیت corner میتونید برای گوشه سمت راست صفحه استایل تنظیم کنید ، من این قسمت رو سفید میکنم:
    کد (Text):

     ::-webkit-scrollbar-corner {
        background:#fff;
    }
    با استفاده از خاصیت track میتونیم استایل نوار بکگراند اسکرول (نواری که اسکرول روی اون حرکت میکنه) رو تغییر بدیم؛ در اینجا رنگ بکگراند ، سایه داخلی و border-radius روتنظیم کردم:
    کد (Text):

     ::-webkit-scrollbar-track{
    background:#eee;
    border-radius:5px;
    box-shadow:inset 0 0 10px #aaa;}
    [​IMG]
    [​IMG]
    این هم همه کدهایی که استفاده کردیم:
    کد (Text):

     ::-webkit-scrollbar {
    background:#fff;
    width:10px;height:10px;
    }
    ::-webkit-scrollbar-thumb {
    background:#999;
    border-radius:5px;
    box-shadow:inset 0 0 10px #333;
    }
    ::-webkit-scrollbar-corner {
    background:#fff;}
    ::-webkit-scrollbar-track{
    background:#eee;
    border-radius:5px;
    box-shadow:inset 0 0 10px #aaa;}

     
    اطلاعات بیشتر در سایت وبکیت




    © منبع: پاسارگاد گرافیک / پویا صادقی
     
    نوشته شده توسط pouya saadeghi در ‏11 ژوئن 2011
    V.Valizadeh9 و eAmin از این پست تشکر کرده اند.
  4. hasanak852

    hasanak852 Active Member

    ارسال‌ها:
    128
    تشکر شده:
    59
    امتیاز دستاورد:
    28
    ست کردن سایت با IE همیشه مشکل همه طراحهاست
    به نظر من ما(جامعه طراحان وب:neutral:) خودمون باید دست به دست هم بدیم و این مشکل بزرگ رو از صفحه روزگار محو کنیم

    مثلا فوتر هر سایتی که میسازیم بنویسیم:" لطفا برای مشاهده بهتر مطالب سایت از مرورگر پراشکال IE استفاده نکنید! ":green:
    اینجوری هر کاربری تو چندتاسایت اینو ببینه باورش میشه و قبول میکنه که IE مشکل داره و میره سراغ یه مرورگر بهتر :)
    یا به پسرعمو ، پسردایی ، دختر خاله :rose:و ... که از IE استفاده میکنه بگیم از Firefox استفاده کنه.
    بلکه یه روز همین جور که همه از table دست کشیدن از IE هم دست بردارن.

    برای اینکه به مرورگر بفهمونیم داریم از css استفاده میکنیم بهتره این کد رو اول همه صفحات بذاریم:
    HTML:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
     
     
    آخرین ویرایش: ‏26 آگوست 2011
    نوشته شده توسط hasanak852 در ‏12 آگوست 2011
    toxin و pouya saadeghi از این پست تشکر کرده اند.
  5. scup

    scup Member

    ارسال‌ها:
    549
    تشکر شده:
    385
    امتیاز دستاورد:
    16
    من که خیال خودمو راحت کردم .. اینو با IE ببین : http://roxlife.com/v/index​view.html یا اینو http://roxlife.com/fb.html
     
    نوشته شده توسط scup در ‏13 آگوست 2011
    ariacomp.server و pouya saadeghi از این پست تشکر کرده اند.
وضعیت موضوع:
موضوع بسته شده است.

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