شناخت CSS۳ و قابلیت های آن – بخش اول

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


۱. استفاده از Gradient در حاشیه ها:
شما میتوانید از خاصیت Gradient در حاشیه‌‌ی کادر خود استفاده کنید. برای مثال تصویر زیر را ببینید:

Border in CSS3

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

border: ۸px solid #۰۰۰;
-moz-border-bottom-colors: #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
-moz-border-top-colors:    #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
-moz-border-left-colors:   #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
-moz-border-right-colors:  #۵۵۵ #۶۶۶ #۷۷۷ #۸۸۸ #۹۹۹ #aaa #bbb #ccc;
padding: ۵px ۵px ۵px ۱۵px;

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

Border in CSS3

 

Border in 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) ۲۷ ۲۷ ۲۷ ۲۷ round round;

یا

border-image: url(border.png) ۲۷ ۲۷ ۲۷ ۲۷ round round;

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

Border in 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: ۵px;
-webkit-border-radius: ۵px;
border: ۱px solid #۰۰۰;

۴.  تصاویر در CSS۳ :
یکی از نقص های نسخه قبلی CSS محدودیت کاربر در انتخاب تصاویر پس‌زمینه بود به طوری که شما نمیتوانستید بیش از یک تصویر را به یک div اختصاص دهید ولی در CSS۳ شما میتوانید به تعداد دلخواه تصویر به یک div اضافه کنید. به کدهای زیر دقت کنید:
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg)  top ۱۱px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

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

۵.  اضافه کردن سایه به متن ها:
۱. شما میتوانید با استفاده از خصوصیت های CSS۳ به متن های خود، سایه نیز اضافه کنید. شاید این یکی از بهترین امکاناتی باشد به در CSS۳ گنجانده شده است.

Text Shadow in CSS3

برای اعمال خاصیت بالا، میتوانید از کد زیر استفاده کنید:
text-shadow: ۲px ۲px ۲px #۰۰۰;

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

8 دیدگاه برای «شناخت CSS۳ و قابلیت های آن – بخش اول»

  1. ممنون از شما ، منم می خواستم css۳ رو این جوری معرفی کنم اما وقتش رو نداشتم
    خوشحال شدم خودمم هم یاد میگیرم و مهم نیست از کجا انتشار پیدا کنه
    منم شدم خواننده همیشگیت

  2. در همه مرورگرهای جدید این قابلیت ها پشتیبانی میشوند ولی در مرورگرهای قدیمی مثل IE۶ و IE۷ و مرورگرهایی که قبل از دو سال قبل منتشر شده اند پشتیبانی نمیشوند.

  3. میشه در مورد استفاده از تصاویر به جای کد در کادر حاشیه بیشتر توضیح بدید و یه نمونه بذارید؟

  4. سلام.
    با جستجوی عبارت css3 image border در گوگل می‌توانید به نمونه‌های زیادی دست پیدا کنید.

امکان ثبت دیدگاه وجود ندارد.