Css3

1. Varun Presentation By

2. CSS How To There are three ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style External Style Sheet <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> Internal Style Sheet <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> Inline Styles <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

3. The id and class Selectors Id Selectors #para1 { text-align:center; color:red; } class Selectors .center { text-align:center; } Element Specific class selector p.center { text-align:center; }

4. CSS Styling Background Background Color body {background-color:#b0c4de;} Background Image body {background-image:url('paper.gif');} Background Image - Repeat Horizontally or Vertically body { background-image:url('gradient2.png'); background-repeat:repeat-x; //y for vertical } Background Image - Set position and no-repeat body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }

5. CSS Styling Text Text Color h1 {color:#00ff00;} Text Alignment h1 {text-align:center;} Text Decoration h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} Text Transformation p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} Text Indentation p {text-indent:50px;}

6. Box Model <!DOCTYPE html> <html> <head> <style> div.ex { width:220px; padding:25px; border:15px solid gray; margin:0px; } </style> </head> <body> <img src="w3css.gif" width="250" height="250" /> <div class="ex">The picture above is 250px wide. The total width of this element is also 250px.</div> </body> </html>

7. Styling Links a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ • When setting the style for several link states, there are some order rules: • a:hover MUST come after a:link and a:visited • a:active MUST come after a:hover Styling Tables <style> table, td, tr { border:1px solid green; } tr { background-color:green; color:white; } </style>

8. Styling Lists ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol>

9. CSS3 Borders CSS3 Modules 1. Backgrounds and Borders 2. Box Model 3. Text Effects 4. 2D/3D Transformations 5. Animations 6. Selectors 7. Multiple Column Layout 8. User Interface 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. Border properties: 1. border-radius 2. box-shadow 3. border-image

10. 1. CSS3 Rounded Corners div { border:2px solid; border-radius:25px; } Example 1. CSS3 Box Shadow div { box-shadow: 10px 10px 5px #888888; } Example

11. CSS3 Box Shadow - Requires 4 parameters and has an optional fifth. 1. First you have the horizontal offset of the shadow towards your element. 2. Second you have the vertical offset 3. Third parameter is the blur distance. No negative values allowed. 4. Fourth is the color of your shadow. 5. The optional fifth parameter is the ‘inset’ keyword which indicates that the box-shadow should be an inner shadow instead of the standard outer shadow. Demo – boxshadow.html div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888 inset; }

12. CSS3 Border Image 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 */ } Original image The image is tiled (repeated) to fill the area The image is stretched to fill the area

13. CSS3 Text Shadow - Requires 4 parameters 1. First you have the horizontal offset 2. Second you have the vertical offset 3. Third parameter is the blur distance. No negative values allowed. 4. Fourth is the color of your shadow. ( text-shadow: horizontal-offset vertical-offset blur color; ) Example 01 text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

14. text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); 02 - Double Shadow text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd; 02 – 3D Shadow

15. CSS3 – ( font – face Rule ) 1. Before CSS3, web designers had to use fonts that were already installed on the user's computer. 2. With CSS3, web designers can use whatever font he/she likes. 3. When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed. Your "own" fonts are defined in the CSS3 @font-face rule. <style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>

16. CSS3 – New User Interface features 1. resize 2. outline-offset 3. box-sizing CSS3 Resizing In CSS3, the resize property specifies whether or not an element should be resizable by the user. div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } http://www.w3schools.com/cssref/playit.asp?filename=playcss_resize&preval=horizontal resize: none|both|horizontal|vertical:

17. CSS3 Outline Offset The outline-offset property offsets an outline, and draws it beyond the border edge. div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; }

18. CSS3 – Multiple Columns 1. column-count 2. column-gap 3. column-rule Column Count With CSS3, you can create multiple columns for laying out text - like in newspapers! div { column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } http://www.w3schools.com/cssref/playit.asp?filename=playcss_column-count

19. Column Gap div { column-gap:40px; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ } The column-gap property specifies the gap between the columns. http://www.w3schools.com/cssref/playit.asp?filename=playcss_column-gap

20. Column Rule The column-rule property sets the width, style, and color of the rule between columns. div { column-rule:3px outset #ff00ff; -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ } http://www.w3schools.com/cssref/playit.asp?filename=playcss_column-rule- style&preval=hidden div { column-count:3; column-rule-style:solid; column-rule-color:rgba(255,130,255,0.5); } http://www.w3schools.com/cssref/playit.asp?f ilename=playcss_column-rule-color

21. CSS3 Transitions and Animations

22. With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts. property : -webkit-transition: -webkit-transition-delay: -webkit-transition-duration: -webkit-transition-timing-function: -webkit-transition-property: CSS3 Transitions http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition- property

23. With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages. CSS3 @keyframes Rule div { animation: myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } CSS3 Animation

24. Thank You

Css3

Esté a ler uma amostra.

Confira estes a seguir

Css3

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (13)

Semelhante a Css3 (20)

Mais recentes (20)

Css3