A Visual Guide of various CSS 3 Properties & Values
| property (value) | syntax | visual result (display) |
|---|---|---|
| float (left) | <p style="float:left;">float left</p> | float left |
| float (right) | <p style="float:right;">float right</p> | float right |
| clear (both) | <p style="clear:both;">clear both</p> | clear both |
| display (block) | <p style="display:block;">display block</p> | display block |
| display (inline) | <p style="display:inline;">display inline</p> | display inline |
| display (inline-block) | <p style="display:inline-block;">display inline-block</p> | display inline-block |
| display (none) | <p style="display:none;">display none</p> | |
| visibility (hidden) | <p style="visibility:hidden;">visibility hidden</p> | |
| position (absolute) | <p style="position:absolute; right:50px; top:450px;">position absolute</p> | position absolute |
| text-shadow | <p style="text-shadow:5px 5px 2px #666;">Text shadow</p> | Text shadow |
| color (rgba) | <p style="color:rgba(255, 128, 0, 0.7);">color (rgba)</p> | color (rgba) |
| gradient (linear) | <p style="background-image:-moz-linear-gradient(left, blue, white); text-align:center;">linear gradient</p> | linear gradient |
| gradient (radial) | <p style="background-image:-moz-radial-gradient(white, blue); text-align:center;">radial gradient</p> | radial gradient |
| box-shadow | <p style="box-shadow:10px 10px 10px #666; border:thin solid #ccc;">box shadow</p> | box shadow |
| transform (translate) | <p style="transform:translate(100px, 10px);">transform:translate</p> | transform:translate |
| transform (rotate) | <p style="transform:rotate(30deg);">transform:rotate</p> | transform:rotate |
| transform (scale) | <p style="transform:scale(1.5);">transform:scale</p> | transform:scale |
| transform (skew) | <p style="transform:skew(20deg, 5deg); border:thin solid #ccc;">transform:skew</p> | transform:skew |
| transition | <p class="tran" style="transition:all 1s ease-in;">transition</p> | transition |
| opacity | <p style="opacity:.3;">opacity</p> | opacity |