Download presentation
Presentation is loading. Please wait.
1
CSS3 Style of the HTML document CSS2+New Specifications Differences
Media queries Namespace Selectors level 3 color
2
CSS3 Modules Selectors Box Model Backgrounds
box wraps around HTML elements – margins,borders,padding, content Backgrounds Multiple Backgrounds Image Values and Replaced Content Text Effects (Adding shadow, word wrap) 2D Transformations (Translate, Rotate, Scale) 3D Transformations Animations Multiple Column Layout User Interface
3
CSS3 – Rounded corners <html> <head> <style> #test { border-radius: 30px 20 px 25px 30px; /*background-color:rgba(255,0,0,0.5);*/ background:-moz-linear-gradient(yellow,red); padding:12px; border:10px solid blue; width:200px; height:100px; } </style> </head> <body> <p id="test"> CSS 3 </p> </body> </html> #p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */ hsl (240, 100%, 50%) h(hue) – degree on the color wheel – 120(green), 240 (blue), 0/360 (red) S(Saturation) – 100% is the full color L(Lightness) – 100% (white), 0% (Black)
4
CSS3 – border image #bordering { border: 10px solid transparent; padding: 15px; -webkit-border-image: url(border.png) 30 round; /* Safari */ -o-border-image: url(border.png) 30 round; /* Opera */ border-image: url(border.png) 30 round; }
5
Multiple backgrounds background-image: url(img_flwr. gif), url(paper
Multiple backgrounds background-image: url(img_flwr.gif), url(paper.gif); background: url(img_flower.jpg) no-repeat center fixed;
6
Gradient Background Smooth tansition between 2/more colors Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) <html> <head> <style> #test1 { background:repeating-radial-gradient(red 5%, yellow 10%,green 15%); width:500px; height:500px; } </style> </head> <body> <p id="test1"> background image</p> </body> </html>
7
Shadow Effects Text shadow Add a color Blur effect Box shadow
Add color
8
CSS3 Text Text Overflow How the overflowed content should be displayed to the users Text-overflow (clip/ellipsis) Word-wrap Long words to be wrapped on next line Word-break Word wrap <html> <head> <style> p { width:12em; word-wrap:break-word; } </style> </head> <body> <p> Demo for Word wrap in HTML (CSS 3 is being used) </p> </body> </html> Word break
9
Transformation 2D Transformation 3D Transformation
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; transform: translate(100px,100px); /* Standard syntax */ transform: rotate(20deg); } </style> </head> <body> <div> The translate() method moves an element from its current position. This div element is moved 50 pixels to the right, and 100 pixels down from its current position. </div> </body> </html>
10
Transition Property value can be changed very smoothly
Width and height can be considered Transition delay Transition and transformation
11
Animation Images Multicolumn User Interface Without javascript / flash
One style to another Keyframes Multicolumn User Interface Rounded image (px) Circled image (%) Responsive image Adjust to fit the size of the screen Opacity Visual effects (blur)
12
XHTML Transition from HTML to XML well formed quoted attributed
Similar presentations
