manok
17th August 2010, 05:09 PM
شناخت CSS3 و قابلیتهای آن
کسانی که به نوعی با طراحی سایت و قالب سروکار دارند به خوبی میدانند CSS در ساختار یک قالب ارزش بسیاری دارد به خصوص از زمانی که پدیده ای به نام Web2 پا به عرصه طراحی گذاشت.
CSS هم مانند سایر زبان های برنامه نویسی، ورژن های مختلفی دارد. جدیدترین ورژن این زبان، ورژن سوم آن است که اخیرا ذهن طراحان را مشغول کرده است.
در نسخه ی جدید CSS یعنی CSS3 قابلیت هایی گنجانده شده است که شاید حیرت همگان را برانگیزد.
در اینجا به معرفی برخی از این ویژگی ها میپردازیم که بسیار جالب و پرکاربرد هستند: 1. استفاده از Gradient در حاشيه ها:
شما ميتوانيد از خاصيت Gradient در حاشيه‌‌ي کادر خود استفاده کنيد. براي مثال تصوير زير را ببينيد:
http://www.faroxa.com/images/asset/css3/border-1.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-1.gif)
براي اينکه بتوانيد کادري مثل کادر تصوير بالا را ايجاد نماييد بايد از کدهاي زير استفاده کنيد:
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 ميتوانيد از تصاوير نيز استفاده نماييد.
http://www.faroxa.com/images/asset/css3/border-2.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-2.gif)
http://www.faroxa.com/images/asset/css3/border-3.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-3.gif)
براي اينکه بتوان کادري با استفاده از تصاوير ايجاد کرد، از کدهاي زير استفاده ميشود :
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 کاملتر شده و تمام نيازهاي شما را برطرف ميکند.
شما ميتوانيد به تک تک حاشيه هاي خود، خاصيت هاي متفاوت اضافه کنيد. به عنوان مثال شما دوست داريد فقط يک گوشه ي سايت شما انحنا داشته باشد. به تصاوير زير توجه کنيد:
http://www.faroxa.com/images/asset/css3/border-4.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-4.gif)
-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 گنجانده شده است.
http://www.faroxa.com/images/asset/css3/text-shadow.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Ftext-shadow.gif)
براي اعمال خاصيت بالا، ميتوانيد از کد زير استفاده کنيد:
text-shadow: 2px 2px 2px #000;
کسانی که به نوعی با طراحی سایت و قالب سروکار دارند به خوبی میدانند CSS در ساختار یک قالب ارزش بسیاری دارد به خصوص از زمانی که پدیده ای به نام Web2 پا به عرصه طراحی گذاشت.
CSS هم مانند سایر زبان های برنامه نویسی، ورژن های مختلفی دارد. جدیدترین ورژن این زبان، ورژن سوم آن است که اخیرا ذهن طراحان را مشغول کرده است.
در نسخه ی جدید CSS یعنی CSS3 قابلیت هایی گنجانده شده است که شاید حیرت همگان را برانگیزد.
در اینجا به معرفی برخی از این ویژگی ها میپردازیم که بسیار جالب و پرکاربرد هستند: 1. استفاده از Gradient در حاشيه ها:
شما ميتوانيد از خاصيت Gradient در حاشيه‌‌ي کادر خود استفاده کنيد. براي مثال تصوير زير را ببينيد:
http://www.faroxa.com/images/asset/css3/border-1.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-1.gif)
براي اينکه بتوانيد کادري مثل کادر تصوير بالا را ايجاد نماييد بايد از کدهاي زير استفاده کنيد:
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 ميتوانيد از تصاوير نيز استفاده نماييد.
http://www.faroxa.com/images/asset/css3/border-2.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-2.gif)
http://www.faroxa.com/images/asset/css3/border-3.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-3.gif)
براي اينکه بتوان کادري با استفاده از تصاوير ايجاد کرد، از کدهاي زير استفاده ميشود :
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 کاملتر شده و تمام نيازهاي شما را برطرف ميکند.
شما ميتوانيد به تک تک حاشيه هاي خود، خاصيت هاي متفاوت اضافه کنيد. به عنوان مثال شما دوست داريد فقط يک گوشه ي سايت شما انحنا داشته باشد. به تصاوير زير توجه کنيد:
http://www.faroxa.com/images/asset/css3/border-4.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Fborde r-4.gif)
-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 گنجانده شده است.
http://www.faroxa.com/images/asset/css3/text-shadow.gif (http://njavan.com/forum/redirector.php?url=http%3A%2F%2Fforum.irantrack.co m%2Fredirector.php%3Furl%3Dhttp%253A%252F%252Fwww. faroxa.com%252Fimages%252Fasset%252Fcss3%252Ftext-shadow.gif)
براي اعمال خاصيت بالا، ميتوانيد از کد زير استفاده کنيد:
text-shadow: 2px 2px 2px #000;