The emphasis on this section deals with those CSS-3 aspects we can use today (in multiple browsers). Yes, I have included the browser specific prefixes (be sure to view the source code). For most of the examples, I have included the CSS-3 directly with the HTML (as opposed to the best practice of a separate file). However, I want visitors to be able to view the source code and examine the details in one file. These examples will open in a new browser window/ tab. Many of these examples were generated after viewing various lynda.com tutorials on CSS-3. Obviously, they are modified from the training materials provided by lynda.com.
- CSS special effects (alphabetized)
- CSS drop caps (works in most modern browsers)
- CSS gradients (requires WebKit based browsers to experience full effect - Safari or Chrome, for example)
- CSS keyframe animation (requires WebKit based browsers to experience full effect - Safari or Chrome, for example)
- CSS masking (requires WebKit based browsers to experience full effect - Safari or Chrome, for example - however, somee effects only work in Safari)
- CSS opacity
- CSS reflections (requires WebKit based browsers to experience full effect - Safari or Chrome, for example)
- CSS round corners
- CSS shadows
- CSS transformations
- CSS transition example
- More complex CSS transition example (including hover effect and onclick event handler)
- Three Column Layout (only works in -webkit and -moz browsers)