CSS3 های ویژگی

زمانیان: مهندس استاد : موسوی پونه دهنده 8811103ارائه

1392/4/5تاریخ:

در موجود جدید های ویژگی از مرورگرها پشتیبانی در Css3نحوه. است شده زیرمشخص جدول

مروگرها پشتیبانی

درCss3 همین طبق بر و شده تاکید نمایشی حالت روي بیشترارائه را ویژگی یک از متفاوت تعبیري ، مختلف مرورگرهاي روال

میدهند.. است شده داده نشان زیر جدول در مختلف مروگرهاي پیشوند:مثال

div.Classname{box-shadow: 1px 1px 1px 1px #000000 inset;-moz-box-shadow: 1px 1px 1px 1px #000000 inset;}

مروگرها اختصاصی پیشوند

: ها گوشه گردن گرددر ◦ ها گوشه کردن ویژگی CSS3گرد از استفاده border-radiusبا

. است ساده بسیارdiv{border:2px solid;border-radius:25px;}

کنید، ◦ گرد را خاص اي گوشه فقط که باشید داشته نیاز شما -borderاگرradius نیاز میتوان که است کوچکتري هاي ویژگی به شدن تجزیه قابل

کند برآورده را .شما border-top-left-radius:15px; /* چپ /*باال border-top-right-radius:10px ; /* راست /*باال border-bottom-left-radius:8px ; /* چپ /*پائین border-bottom-right-radius:20px; /* راست /*پائین

Borders

ها جعبه به سایه کردن (:Box Shadow)اضافهویژگی ◦ از استفاده ها box-shadowبا جعبه برای راحتی به توان می

. کرد ایجاد سایهویژگی ◦ .4این گیرد می رنگ کد یک و عددی مقدار

div{box-shadow: 5px 6px 7px 10px #888888;}

واژه،کلمه ◦ رنگ کد بعد داخل insetاگر در سایه ، کنیم درج divرا. شود می تشکیل

Borders

: عکس از استفادهویژگی ◦ از استفاده ایجاد border-imageبا برای توانیم می ،Border ها

. کنیم استفاده عکس ازdiv{border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */}

برای ◦ بکاربردن برای اصلی :borderعکس

Borders

: ها متن برای سایه ایجادساخته ◦ سایه تاری میزان عمودی، سایه فاصله افقی، سایه فاصله باید

. کنیم مشخص ویژگی این برای را سایه رنگ و شدهh1{text-shadow: 5px 5px 5px #FF0000;}

Word Wrapping:باشد ◦ بزرگ قدری به ما کلمه که شود می استفاده زمانی ویژگی این از

. می شکسته ما کلمه ویژگی این از استفاده با بزند بیرون کادر از که. میگیرد قرار بعد خط در اش باقیمانده و شود

p {word-wrap:break-word;}

Text Effects

CSS3 برای را مختلف عکس چند که دهد می را امکان این ما به. کنیم انتخاب صفحه یک زمینه پشت عکس

body{ background-image:url(img_flwr.gif),url(img_tree.gif);}

Multiple Background Images

Transform و اندازه شکل، تغییر امکان ما به که است قابلیتی. دهد می را اجزا مختصات

Translate:)(دیگری ◦ جای به خود فعلی مکان از را اجزا توان می متد این از استفاده با

. کرد منتقلdiv{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */}

(2D Transforms) کردن تبدیلبعدی دو

Rotate)(:◦ . را دوران مثبت مقدار داد دوران را اشیا توان می متد این از استفاده با

. در را دوران منفی مقدار دهد می انجام ساعت های عقربه جهت در. دهد می انجام ساعت های عقربه خالف جهت

div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}

(2D Transforms) کردن تبدیلبعدی دو

scale)(:داده ◦ پارامترهای به توجه با را اجزا اندازه توان می متد این از استفاده با

. کرد وبزرگ ،کوچک ارتفاع و عرض برای شدهdiv{transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari and Chrome */}

(2D Transforms) کردن تبدیلبعدی دو

The skew)(:◦. دهد می ما به را شده داده های زاویه در اجزا چرخش امکان متد این

div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */}

(2D Transforms) کردن تبدیلبعدی دو

به استایل یک از را اجزا توانیم ،می قابلیت این از استفاده با. ببریم دیگری استایل

. دهد می ما به را روان و ساده انیمیشن ایجاد امکان قابلیت اینdiv{transition: width 2s;-webkit-transition: width 2s; /* Safari */}div:hover{width:300px;}

Transitions

. دهیم تغییر را ها عکس روشنایی میزان توانیم می ویژگی ازاین استفاده با

<div id="use-opacity"><img src="image.png" alt="" /></div>

#use-opacity img{opacity : 0.5; /* شود روشنتر 50درصد */}#use-opacity img:hover{opacity: ; /* شود روشن 1.0کامل */}

Opacity با عکس کردن روشنتر

RGB:◦RGB کلمه سه رنگ . Red,Green,Blueمخفف سه این ترکیب با است

. ساخت را رنگی هر توان میbody{background: rgb(0,0,0);{

RGBA:حقیقت ◦ از RGBAدر ترکیبی بلکه نیست ویژگی و RGBیک

Opacity.استبرابر ◦ آن رنگ که صورت RGBA(255,255,255,0.7)متنی به باشد

. شیشه شبیه چیزی واقع در ، پیداست آن پشت که شود می دیده سفید◦. است تاری میزان دهنده نشان چهارم عدد

رنگ

از :RGBAمثالی<div class="rgba-example"><div id="child">This is an example of RGBA</div>div.rgba-example{background: url(images.jpg);width:150px;height:150px;font-family: tahoma;font-weight: bold;font-size:11pt;color : rgba(255,255,255,0.7);}#child{background: rgba(255,255,255,0.5) ;width:100px;height:125px;margin:0 auto;color:RoyalBlue;}

رنگ

پایان