CSS Tutorials — Effects

We are making an Apple-like slideshow gallery with the help of jQuery & CSS, with no PHP or databases required. As a bonus all the source code is freely available for download.

Rounded corners have been included in the CSS3 specification. Here’s how you can use them today in most modern browsers.

With CSS3, you can create all kinds of transparency effects, including overlapping, partially transparent text and buttons. And it even works in IE!

Use CSS to create a polaroid picture effect from a photo.

This experiment is the Flipbook or flick animation. The idea behind this is simple enough. Using a large image with a hide overflow, we are going to build an animation based on mouse position not unlike the mouse rollover.

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Shadow in website design is something that can be achieved by using CSS and images, to achieve shadow in CSS2 you would use images and positioning, it can be achieved but it usually means that you have to create multiple divs. But one of the exciting new attributes in CSS3 is box-shadow which allows someone to get a nice shadow effect with just using one attribute applied to a div.

In this tutorial, we’re going to look at some simple techniques you can apply to any bit of copy to dramatically improve the visual appeal and readability. We’ll start with some text marked up semantically, and won’t touch the XHTML at all in this exercise; everything will be achieved with CSS. We’ve also provided two style sheets. The first one is the starting point, a shell for your code.

Create Facebook-like picture tagging system using only CSS. Select a person on a photo with your cursor to display his name.

Learn how to change image transparency (opacity) using only CSS code. Simple but useful technique that you can use to create nice looking gallery or just crossover effect.