استاد:مهندس زمانیان ارائه دهنده:پونه موسوی 8811103 تاریخ: 1392/4/5 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; }

Borders گرد گردن گوشه ها: گرد کردن گوشه ها در 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): این ویژگی 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 :

Text Effects ایجاد سایه برای متن ها: Word Wrapping: باید فاصله سایه افقی، فاصله سایه عمودی، میزان تاری سایه ساخته شده و رنگ سایه را برای این ویژگی مشخص کنیم. h1 { text-shadow: 5px 5px 5px #FF0000; } Word Wrapping: از این ویژگی زمانی استفاده می شود که کلمه ما به قدری بزرگ باشد که از کادر بیرون بزند.با استفاده از این ویژگی کلمه ما شکسته می شود و باقیمانده اش در خط بعد قرار میگیرد. p {word-wrap:break-word;}

Multiple Background Images CSS3 به ما این امکان را می دهد که چند عکس مختلف را برای عکس پشت زمینه یک صفحه انتخاب کنیم. body {  background-image:url(img_flwr.gif),url(img_tree.gif); }

(2D Transforms)تبدیل کردن دو بعدی 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 */ }

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

Opacityروشنتر کردن عکس با با استفاده ازاین ویژگی می توانیم میزان روشنایی عکس ها را تغییر دهیم. <div id="use-opacity"> <img src="image.png" alt="" /> </div> #use-opacity img { opacity : 0.5; /* درصد روشنتر شود 50*/ } #use-opacity img:hover opacity: کامل روشن شود*/ ;1.0*/

رنگ 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;}

پایان