Feb 17, 2012

CSS3 Effects – Image, Text Shadow And Lightbox Effects

CSS3 is the next version and most popular design technology among web designers and developers nowadays. CSS( Cascading Style Sheet)- this technology provides a way to change color, fonts, size,background, border, etc of website design.

This is the language used to present a document or application such as color, layout, fonts, etc written in Markup languages like HTML, XHTML, XML. And CSS3 contains new and advanced features in design by which designer can make their web applications’s layout more attractive and effective.  Only few line of code can help to make your project more impressive and beautiful.

CSS or cascading style sheets is basically a style sheet language that is used to describe presentation semantics and also the looks and formatting of a document that is originally written in a mark-up language. Today we cover some CSS3 effects to enhance your web designs, this list have text effects, image hover effects, image effects, menu transform effects and lightbox.

Here we have listed some awesome and cool CSS3 Effects 2012, have a look at them and please share your thoughts in our comments section below.


1) Original Hover Effects with CSS3

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

2) Text Shadow

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow.

3) CSS3 Polaroids

In this playground adventure, we use some awesome CSS2 and CSS3 to turn an otherwise unassuming list of images into a full-blown set of polaroid pictures.

4) Fun 3D CSS3 Effect

It’s got nice hover tile effects, etc. it was pretty fun looking, thought maybe someone could grab it and run with it!

5) Using Target to Create a Lightbox Effect with CSS3

A full explanation of what it does can be found on the W3 site but for the purposes of this tutorial, we will be using it to create a Lightbox effect.

6) Sliding Vinyl with CSS3

We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

7) jslickmenu a jQuery Plugin for Slick CSS3 Menus

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.

8 ) Text Shadow Box/ Text Shadow Box

Move your cursor over the box to cast a shadow with the spotlight. This demo uses the CSS property text-shadow, supported in Safari, Firefox 3.5, Opera, and Chrome.

9) CSS3 Tilt Shift text


10) Adding an Outline to Your Text Using the CSS3 Text Stroke Property

In this tutorial you will see how to add an outline, or stroke, to your text using the CSS3 text-stroke property.


11) Scaling Web Page Elements Using the CSS3 Scale Transform

CSS3 transforms allow you to apply various visual effects to the items in your Web pages, including scaling elements to either increase or decrease their size.

12) An Intro to CSS3 Effects

CSS3 Effects can be very useful. What could previously only be accomplished by creating images can now be done with a few simple lines of CSS code. An introduction to these effects can be found in this article.


13) Menu with CSS3 Effects and Notification Bubbles

This Menu with CSS3 Effects and Notification Bubbles has everything you need. The functionality is divided in different parts and that makes it very powerful.


14) Beautiful Lightbox Effect with CSS3

So you can learn “how to create a neat lightbox effect using only CSS” with this article. its awesome and beautiful Lightbox Effect with using CSS3. So the effect is to have some thumbnails that are clickable, and once clicked, the respective small and large image is shown.

Leave a comment