Css3 و قابلیت های جدید آن

[Farhad_2029]

کسانی که به نوعی با طراحی سایت و قالب سروکار دارند به خوبی میدانند CSS در ساختار یک قالب ارزش بسیاری دارد به خصوص از زمانی که پدیده ای به نام Web2 پا به عرصه طراحی گذاشت.
CSS هم مانند سایر زبان های برنامه نویسی، ورژن های مختلفی دارد. جدیدترین ورژن این زبان، ورژن سوم آن است که اخیرا ذهن طراحان را مشغول کرده است.
در نسخه ی جدید CSS یعنی CSS3 قابلیت هایی گنجانده شده است که شاید حیرت همگان را برانگیزد.

شناخت CSS3 و قابلیت های آن - بخش اول
کسانی که به نوعی با طراحی سایت و قالب سروکار دارند به خوبی میدانند CSS در ساختار یک قالب ارزش بسیاری دارد به خصوص از زمانی که پدیده ای به نام Web2 پا به عرصه طراحی گذاشت.
CSS هم مانند سایر زبان های برنامه نویسی، ورژن های مختلفی دارد. جدیدترین ورژن این زبان، ورژن سوم آن است که اخیرا ذهن طراحان را مشغول کرده است.
در نسخه ی جدید CSS یعنی CSS3 قابلیت هایی گنجانده شده است که شاید حیرت همگان را برانگیزد.
در اینجا به معرفی برخی از این ویژگی ها میپردازیم که بسیار جالب و پرکاربرد هستند:
1. استفاده از Gradient در حاشيه ها:
شما ميتوانيد از خاصيت Gradient در حاشيه‌‌ي کادر خود استفاده کنيد. براي مثال تصوير زير را ببينيد:

براي اينکه بتوانيد کادري مثل کادر تصوير بالا را ايجاد نماييد بايد از کدهاي زير استفاده کنيد:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:    #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:   #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

2. استفاده از تصاوير به جاي کد در کادر حاشيه :
در نسخه هاي قبلي CSS شما فقط ميتوانستيد از کدهاي مخصوص رنگ در حاشيه ( Border ) استفاده کنيد ولي در CSS3 ميتوانيد از تصاوير نيز استفاده نماييد.

براي اينکه بتوان کادري با استفاده از تصاوير ايجاد کرد، از کدهاي زير استفاده ميشود :

border-image: 
    border-top-image
    border-right-image
    border-bottom-image
    border-left-image
border-corner-image: 
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image

يا

border-image: url(border.png) 27 27 27 27 round round;

یا

border-image: url(border.png) 27 27 27 27 round round;

3-. ايجاد گوشه هاي گرد در CSS3 :
در نسخه‌ي جديد CSS يعني CSS3 شما ميتوانيد بدون استفاده از هيچگونه تصويري، حاشيه هاي سايت خود را به صورت منحني درآوريد. البته اين قابليت قبلا هم وجود داشت اما در CSS3 کاملتر شده و تمام نيازهاي شما را برطرف ميکند.
شما ميتوانيد به تک تک حاشيه هاي خود، خاصيت هاي متفاوت اضافه کنيد. به عنوان مثال شما دوست داريد فقط يک گوشه ي سايت شما انحنا داشته باشد. به تصاوير زير توجه کنيد:

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

اگر دوست داريد تمام گوشه ها گرد شوند ميتوانيد از کد زير استفاده کنيد:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;

4. تصاوير در CSS3 :
يکي از نقص هاي نسخه قبلي CSS محدوديت کاربر در انتخاب تصاوير پس‌زمينه بود به طوري که شما نميتوانستيد بيش از يک تصوير را به يک div اختصاص دهيد ولي در CSS3 شما ميتوانيد به تعداد دلخواه تصوير به يک div اضافه کنيد. به کدهاي زير دقت کنيد:

background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

همانطور که مي‌بينيد، ما چهار تصوير به يک div نسبت داده ايم.

5. اضافه کردن سايه به متن ها:
1. شما ميتوانيد با استفاده از خصوصيت هاي CSS3 به متن هاي خود، سايه نيز اضافه کنيد. شايد اين يکي از بهترين امکاناتي باشد به در CSS3 گنجانده شده است.

براي اعمال خاصيت بالا، ميتوانيد از کد زير استفاده کنيد:

text-shadow: 2px 2px 2px #000;

اينها فقط بخشي از خواص جديد CSS3 هستند. در پست هاي بعدي، به طور کاملتر به معرفي CSS3 خواهيم پرداخت.
توجه داشته باشيد که اکثر مرورگرهاي فعلي قادر به اجراي کدهاي CSS3 نيستند و ممکن است هم اکنون نتوانيد اين کدها را در وبسايت خود به کار ببريد.
اگر سوالي داريد در قسمت نظرات مطرح نماييد
موفق و پيروز باشيد.


منبع
]اگر کسی قابلیت جدیدی از CSS3 را میداند همینجا مطرح کند.
موفق باشید

 

[Mohammadreza]

اگه كسي مثل آقاي امير عباس عزيز پيدا مي شد و يه كتاب واسه سي اس اس 3 مي داد بيرون واقعا ممنونش مي شديم ...
به نظر من echedesign عزيز هم بايد دست به كار بشه

 

[echessdesign]

درود بر شما
متاسفانه، یکی از موارد در حاشیه ماندن css3 ، کندی پشتیبانی پر کاربردترین مرورگر دنیا . Ie می باشد....

 

[Amenocy]

آخه اینا رو میزاریم . وای نصف یوزر ها که با ie6 میان درست نمیبینن و در واقع طراحی شکست خورد !!

 

[meysamz]

به نظر من مهم نیست که چه امکاناتی به سی اس اس اضافه شده!
باید دید کودوما را اکثر مروگر ها ساپورت می کنند، هر وق همه ساپرت کردند، من ازشون استفاده می کنم.
در صورت استفاده ما کاربرامونو به استفاده کنندگان از آن مرور گر محدود کردیم.
این جنگ مرور گر هاست که مایکروسافت راش انداخت و واقعیتی هست که ما طراحان وب باید باهاش بسازیم