1 / 8

The future of CSS

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.

salvador-hoover
Download Presentation

The future of CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The future of CSS

  2. 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.

  3. 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*

  4. 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,3rd 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.*

  5. 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*

  6. 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*

  7. 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 CSS3 @font-face rule. Define in CSS: @font-face{font-family: myFirstFont; src:url(‘Chopin_Script.ttf')} Using New Font in a DIV: font-family:myFirstFont;

  8. 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” Fonts: @font-face{font-family: 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

More Related