1. Use CSS3 to Create a Dynamic Stack of Index Cards
In this tutorial, you will learn how to create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
2. Dynamic PNG shadow position & opacity
3. Awesome Overlays with CSS3
Gradient border, going form from a lighter to darker as you go from top to bottom are the trick with these overlays. To create that effect we used to the border-image property, which is a tricky little addition to CSS.
4. How to Create Depth and Nice 3D Ribbons Only Using CSS3
To create a drop-shadow with RGBa (a color model that allows an optimized contrast with any kind of background), we will use box-shadow. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.
5. Halftone Navigation Menu With jQuery & CSS3
Learn to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
6. Building Coverflow with CSS Transforms
Learn how to create a coverflow effect that actually flows and animates in real-time, without using canvas or pre rendered graphics.
7. Going Nuts with CSS Transitions
You will learn how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
8. Sliding Vinyl with CSS3
To create a sliding vinyl effect for showing off the music you love, we take a standard album cover, a little HTML, and some CSS3 transitions and transforms.
9. Fun with CSS3 and Mootools
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.
10. Fun with 3D CSS and video
Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
The Principles of Beautiful Web Design, 4th Edition
Learn PHP in One Day and Learn It Well
Docker for Web Developers