The future of CSS

What can CSS3 do? CSS3 is completely backwards compatible, so no need to change existing designs. Browsers will always support CSS2. The CSS3 specification is still under development by the World Wide Web Consortium. Many of the new CSS3 properties have been implemented in modern browsers but will only work with certain tags at the beginning such as “–moz-” & “-webkit-”. Internet Explorer 8 (and older) does not support CSS3.

What can CSS3 do? DIVs can now have built in rounded edges. border-radius:20px; -moz-border-radius:20px; The code above works with Google Chrome, Safari, Firefox, & Opera * Firefox requires the prefix -moz- for this code*

What can CSS3 do? DIVs can now have built in drop shadows. background-color:blue; box-shadow:15px 15px 9px #ff0000; -moz-box-shadow:15px 15px 9px #ff0000; -webkit-box-shadow:15px 15px 9px #ff0000; 1st # = x axis, 2nd # = y axis,3 rd Number = size of drop shadow, & Hexadecimal or color name dictates drop shadow color *Firefox requires the prefix -moz- & Safari and Chrome require the prefix -webkit- for this code. “Text-shadow” tag is similar and can be applied to text.*

What can CSS3 do? CSS3 allows greater control of background elements. Resizing: background:url(tree.jpg); background-size:75px 55px; -moz-background-size:75px 55px; *Firefox requires the prefix -moz- & percentages can be used instead of pixels* Multiple Background Images: background-image:url(grass.gif),url(bee.jpg); *First image listed will be on top of next image listed*

What can CSS3 do? CSS3 allows DIVs to be rotated (rotates clockwise at a given degree) & skewed (turns in a given angle, depending on the parameters given for the x & y axis). Rotation: transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); Skew: transform: skew(20deg,25deg); -webkit-transform: skew(20deg,25deg); -moz-transform: skew(20deg,25deg); -o-transform: skew(20deg,25deg); *“-moz-” = Firefox, “-webkit-” = Safari and Chrome, “-o-” = Opera*

What can CSS3 do? CSS3 also allows web designers to use different fonts other than “web safe” fonts. Fonts can be found or purchased via the internet. You will have to describe your selected font with the new rule. Define in myFirstFont; src:url(‘Chopin_Script.ttf')} Using New Font in a DIV: font-family:myFirstFont;

CSS3 REVIEW The CSS3 specification is still under development so some specialized tags for browsers are still required (“-moz-”, “-webkit-”, “-o-”) while some browsers do not work with CSS3 at all (IE8 & older). Rotation: transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); Skew: transform: skew(20deg,25deg); -webkit-transform: skew(20deg,25deg); -moz-transform: skew(20deg,25deg); -o-transform: skew(20deg,25deg); Rounded Edges: border-radius:20px; -moz-border-radius:20px ; Non-”web safe” myFirstFont; src:url(‘Chopin_Script.ttf')} font-family:myFirstFont; Resized Background: Multiple Backgrounds: background:url(table.jpg); background-image:url(grass.gif) background-size:90px 80px;,url(bee.jpg); -moz-background-size:90px 80px; To learn more CSS3 tags, go to w3schools.com/css3