�ݺ�ߣ

CSS 3 Ramkumar Lakshminarayanan

Cascading Style Sheet CSS is used to control the style and layout of Web pages. CSS3 is the latest standard for CSS CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added. Some of the most important CSS3 modules are: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

CSS3 Borders With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop. In this session you will learn about the following border properties: border-radius box-shadow border-image

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner. In CSS3, creating rounded corners is easy. In CSS3, the border-radius property is used to create rounded corners: This box has rounded corners!

Add Rounded Corner to a div element. div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ }

CSS3 Box Shadow In CSS3, the box-shadow property is used to add shadow to boxes: div { box-shadow: 10px 10px 5px #888888; -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ }

CSS3 Border Image With the CSS3 border-image property you can use an image to create a border The original image used to create the border above:

Example Use an image to create a border around a div element: div { border-image:url(/rajaramcomputers/css-3-session1/border.png) 30 30 round; -moz-border-image:url(/rajaramcomputers/css-3-session1/border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(/rajaramcomputers/css-3-session1/border.png) 30 30 round; /* Safari and Chrome */ }

New Border Properties Property Description CSS border-image A shorthand property for setting all the border-image-* properties 3 border-radius A shorthand property for setting all the four border-*-radius properties 3 box-shadow Attaches one or more drop-shadows to the box 3

CSS3 Backgrounds CSS3 contains several new background properties, which allow greater control of the background element. In this session you will learn about the following background properties: background-size background-origin You will also learn how to use multiple background images.

Firefox 3.6 and earlier does not support the background-origin property, and requires the prefix -moz- to support the background-size property. Safari 4 requires the prefix -webkit- to support the new background properties. Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support the new background properties

CSS3 The background-size Property The background-size property specifies the size of the background image. Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re-use background images in different contexts. You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element.

Example div { background:url(/rajaramcomputers/css-3-session1/img_flwr.gif); -moz-background-size:80px 60px; /* Firefox 3.6 */ background-size:80px 60px; background-repeat:no-repeat; }

Example2 div { background:url(/rajaramcomputers/css-3-session1/img_flwr.gif); -moz-background-size:100% 100%; /* Firefox 3.6 */ background-size:100% 100%; background-repeat:no-repeat; }

CSS3 The background-origin Property The background-origin property specifies the positioning area of the background images. The background image can be placed within the content-box, padding-box, or border-box area.?

Example Position the background image within the content-box: div { background:url(/rajaramcomputers/css-3-session1/img_styl.jpg); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }

CSS3 Multiple Background Images CSS3 allows you to use several background images for an element body {? background-image:url(/rajaramcomputers/css-3-session1/img_flwr.gif),url(/rajaramcomputers/css-3-session1/img_tree.gif); }

New Background Properties Property Description CSS background-clip Specifies the painting area of the background images 3 background-origin Specifies the positioning area of the background images 3 background-size Specifies the size of the background images 3

�ݺ�ߣ

Css 3 session1

Recommended

More Related Content

Similar to Css 3 session1 (20)

More from Dr. Ramkumar Lakshminarayanan (20)

Css 3 session1