How To Create a Pure CSS Polaroid Photo Gallery
Learn how to build a cool looking stack of Polaroid photos with pure CSS styling. Basic CSS is used to style up the photos into a Polaroid style images, then some additional styling with shadows and rotation are injected, then z-index property is used to alter the stacking order of all the objects.
Bubble Effect with CSS
You might be familiar with the plugin jQuery Dock which allows developers to create a menu like Apple Dock. Now, you will create a similar menu with bubble effect by using CSS only. Although it doesn’t have as smooth of an effect as jQuery Dock, it’s helpful for those that just want to make a cool menu by using pure CSS. This tutorial includes two methods: CSS sprites (basic) and the image swapping (advanced).
Text Rotation With CSS
Many of the popular browsers of today support the ability to rotate HTML elements. We can make it work in Internet Explorer (back to version 5.5 even). This tutorial explains this technique step by step.
Create a JQuery Content Slider Using Pure CSS
Pure CSS Timeline
Learn how to build a CSS timeline while using some clean and simple markup. The result is a simple and clean looking timeline with some very straight forward markup. The result is a simple and clean looking timeline out of CSS and HTML.
Pure CSS Vignette
A vignette effect is a discoloration on the edges of an image. This effect usually appears in photography and it can be either accidental or intentional. It can also be either light or dark, depending on the situation.
Pure CSS Animated Progress Bar
Here’s a simple demonstration of how you can create animated progress bar using pure css.
Accordion using only CSS
An accordion effect can be achieved using CSS3’s
:target pseudo-class-webkit-transition property this accordion can also be animated.
Snazzy Hover Effects Using CSS
This tutorial will go over creating flexible advanced hover techniques using CSS2.1 properties. We’ll be using these key CSS property, pseudo-classes, and pseudo-element to accomplish our technique:
contentRather than create unnecessary mark-up to display our caption, we’ll use CSS generated content to add the caption.
:focusLets us show/hide the caption overlay with our mouse/keyboard.
:afterUsed in conjunction with the content property to dynamically append our caption content and layout.
This was just a bit of fun. So what now? Well, it would be great to see if anyone can come up with a nice pure CSS solution! If you have one, please share.