CSS3 با توجه به روند رشد مرورگرها و استافده زیاد وبمستر ها از استایل هاو استاندارد های CSS3 بر ان شدیم تا این نسخه از CSS3 را برای شما آموزش دهیم .
با توجه به اینکه اکثر استافده کنندگان اینترنت از نسخه های قدیمی اینترنت اکسپلورر استفاده می کنند اما با توجه به استفاده وسیع از CSS3 در دیگر مرورگر ها مایکروسافت هم تصمیم به ارائه نسخه 9 این نرم افزار شد تا بتواند از همچنان در گود رقابت مرورگر ها باقی بماند . در این مقاله بر روی تک تک استایل های اضافه شده به CSS3 بحث می شود و شما می توانید قالب خود را به نحوی طراحی کنید که به بهترین شکل به نمایش در بیاید .
{tag}<link rel="stylesheet" href="/css3/stylecss3.css" type="text/css" />{/tag}
Borders

* border-color
* border-image
* border-radius
* box-shadow



Box-shadow سایه برای تگ ها :


این خصیصه باعث سایه دار شدن تگی می شود که به آن اختصاص داده شده باشد و دارای 3 مقدار برای کنترل این خصیصه می باشد :
  1. فاصله افقی سایه از باکس به سمت راست .(he horizontal offset of the shadow)
  2. فاصله عمودی سایه از باکس به سمت پایین .(the vertical offset)
  3. میزان تاری سایه . (he blur radius)
این خصیصه هم اکنون بر روی مرورگر های Safari 3+ و Firefox 3.1 (Alpha) قابل اجرا می باشد .

نمونه ها :
نمایش خصیصه سایه زنی در css3


کد بکار رفته :

box-shadow: -10px -10px 0px #000;border-radius: 5px;padding: 5px 5px 5px 15px;

Border-radius شعاع دار کردن حاشه ها :


با این خصیه شما می توانید باکس های با گوشه های گرد یا شعاعی بسازید . این امر در نمایش باکس ها تاثیر چشم گیری دارد و به شما در زیبا سازی طراحی کمک می کند . این خصیصه هم اکنون بر روی مرورگرهای Mozila/Firefox و Safari 3 قابل اجرا می باشد .

نمونه ها :
کاربران Mozilla/Firefox و Safari 3 می توانند این خصیصه را در این باکس مشاهده نمایند .

کد بکار رفته :

<div style=" background-color: #ccc;-moz-border-radius: 5px;-webkit-border-radius: 5px;border: 1px solid #000;padding: 10px;" >

البته کد -moz-border-radius فقط در مرورگر موزیلا / فایرفاکس و کد -webkit-border-radius در مرورگر سافاری قابل اجرا است و مرورگر های دیگر هنوز این خصیصه را پشتیبانی نکرده اند .
موارد دیگر این خصیصه به صورت زیر می باشد :

* -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


Border-image تصویر حاشیه ها :

این خصیصه برای قرار دادن یک تصویر برای استفاده در حاشیه ها می باشد . این خصیصه در حال حاضر فقط بر روو مرورگرهای Safari و Firefox 3.1 (Alpha) قابل احرا می باشد .

نمونه ها :
نمایش تصویر باری حاشیه ها . این خصیصه قابل نمایش در مرورگر های سافاری و فایرفاکس 3 می باشد .

نمایش تصویر باری حاشیه ها . این خصیصه قابل نمایش در مرورگر های سافاری و فایرفاکس 3 می باشد .

کد بکار رفته :

border-image: url(border.png) 27 27 27 27 round round;border-image: url(/border.png) 27 27 27 27 stretch stretch;
دیگر خصیصه ها :

* border-image:
o border-top-image
o border-right-image
o border-bottom-image
o border-left-image

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


colored borders خصیصه حاشیه رنگی :


این خصیصه در css2 هم وجود داشته است اما در نسخه جدید آن شما می توایند یک شیب رنگ به آن اختصاص دهید . این خصیصه در حال حاضر فقط بر روی موزیلا / فایرفاکس قابل اجرا می باشد .

نمونه ها :
کاربران Mozilla/Firefox می توانند شیپ رنگ موجود در حاشیه این باکس را مشاده نمایند .

کد بکار رفته :
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;


این آموزش ادامه دارد .....

سایت منبع :       css3.info