This document provides a summary of CSS3 features and their syntax, including:
- Equally and individually rounded corners using border-radius properties for different browsers.
- Adding text shadows, box shadows, and outlines with property values for offset, blur, color, and thickness.
- Using RGBA, gradients, font-face, multiple columns, box sizing, and selectors.
- Notes that CSS3 is not fully supported by all browsers and graceful degradation for older browsers is recommended. It hopes that the sheet is very useful.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100%(1)100% found this document useful (1 vote)
500 views
CSS3 Help Sheet
This document provides a summary of CSS3 features and their syntax, including:
- Equally and individually rounded corners using border-radius properties for different browsers.
- Adding text shadows, box shadows, and outlines with property values for offset, blur, color, and thickness.
- Using RGBA, gradients, font-face, multiple columns, box sizing, and selectors.
- Notes that CSS3 is not fully supported by all browsers and graceful degradation for older browsers is recommended. It hopes that the sheet is very useful.
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1
SantosVZ CSS3 Help Sheet
Equally Rounded Corners Text Shadow Box Resize
-webkit-border-radius Webkit text-shadow resize both -moz-border-radius Firefox vertical Syntax horizontal border-radius Standard 5px 5px 5px #000000 min-height Individually Rounded Corners x-offset, y-offset, blur, color min-width filter: dropshadow( ) Webkit overflow: auto -webkit-border-top-left-radius Syntax -webkit-border-top-right-radius Outline (color=#000000, offx=5, offy=5) -webkit-border-bottom-left-radius outline color, x-offset, y-offset -webkit-border-bottom-right-radius Syntax Firefox RGBA 5px dashed #000000 -moz-border-radius-topleft thickness, style, color background-color: rgba(R, G, B, A) -moz-border-radius-topright color: rgba(R, G, B, A) Gradients -moz-border-radius-bottomleft -moz-border-radius-bottomright Syntax -webkit-gradient Standard 255, 255, 255, 1 Syntax
border-top-left-radius Red, Green, Blue, Opacity linear
border-top-right-radius (0-255, 0-255, 0-255, 0-1) type of gradient left bottom border-bottom-left-radius right bottom border-bottom-right-radius Font Face left top @font-face right top Box Shadow position of start & end font-family: ‘ ’; color-stop(0.5, rgb(R,G,B)) -webkit-box-shadow Webkit src: url(’ url_of_font_file‘); position & color of stops -moz-box-shadow Firefox src: local(’ ‘), url(’ url_of_font.woff‘) format(’woff ‘), -moz-linear-gradient box-shadow Standard url(’url_of_font.ttf’) format(’truetype’); Syntax Syntax left More info by Paul Irish: http://bit.ly/cC76RC 5px 5px 5px #000000 right top x-offset, y-offset, blur, color Box Sizing bottom box-sizing: content-box position of start & end Multiple Columns rgb(R, G, B) 50% -moz-box-sizing: content-box position & color of stops Webkit -webkit-box-sizing: content-box -webkit-column-count -ms-box-sizing: content-box Selectors -o-box-sizing: content-box; -webkit-column-gap -icab-box-sizing: content-box; Incredibly powerful, Firefox but we couldn’t -khtml-box-sizing: content-box; possibly fit them on -moz-column-count Syntax this sheet. -moz-column-gap content-box Info at 456 Berea Street: Standard acts like a standard box-model element http://bit.ly/cKO24D
column-count border-box CSS3 is not yet supported in
column-gap padding and border render inside the box all browsers. Graceful degradation in older browsers Espero que les sea de mucha utilidad such as IE6 (arghh) is highly recommended.