CSS3 ویژگی های

CSS3 ویژگی های استاد:مهندس زمانیان ارائه دهنده:پونه موسوی 8811103 تاریخ: 1392/4/5

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

پیشوند اختصاصی مروگرها • در Css3 بیشتر روي حالت نمایشی تاکید شده و بر طبق همین روال مرورگرهاي مختلف ، تعبیري متفاوت از یک ویژگی را ارائه میدهند. • پیشوند مروگرهاي مختلف در جدول زیر نشان داده شده است . • مثال: div.Classname { box-shadow: 1px 1px1px1px #000000 inset; -moz-box-shadow: 1px 1px1px1px #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): • با استفاده از ویژگی box-shadow می توان به راحتی برای جعبه ها سایه ایجاد کرد. • این ویژگی 4 مقدار عددی و یک کد رنگ می گیرد. div{box-shadow: 5px6px7px10px#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 • ایجاد سایه برای متن ها: • باید فاصله سایه افقی، فاصله سایه عمودی، میزان تاری سایه ساخته شده و رنگ سایه را برای این ویژگی مشخص کنیم. h1{text-shadow: 5px 5px5px #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)تبدیل کردن دو بعدی • 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 */}

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

Opacityروشنتر کردن عکس با • با استفاده ازاین ویژگی می توانیم میزان روشنایی عکس ها را تغییر دهیم. <div id="use-opacity"> <imgsrc="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;}

پایان

CSS3 ویژگی های