A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

Just a simple demo to show how text can be transformed to look 'solid' and have a natural looking shadow effect without using any extra markup.

This makes use of CSS skew, multiple text shadows and the :before pseudo-class to apply the text shadow effect.

The full demo with solid text and shadow can be seen in Firefox, Safari and Chrome. The solid text only is seen in Opera and the skewed text only seen in IE9 and IE10.

CSS drop-shadows without images

As we have seen during these past few months, CSS3 and HTML5 have demonstrated that designing is now possible without using graphic programs and relying entirely on code. On today’s tutorial we will show you how to make the fascinating set of frame boxes featured in ThemeShock using pure CSS3 and achieve in the process something that can easily look as any Photoshop work. It’s important to state that these boxes look flawless in Safari and quite great in Chrome, so we suggest you to use either one of these browsers to check them out, now let’s begin this tutorial.

With more than 15 different styles, this exercise truly demonstrates the power of CSS3 combined to a little bit of imagination. Now we’re going to show you the specific code that was utilized to create each one of these fancy frame boxes.

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!

CSS3 is one of the coolest new web technologies available to web developers right now. Using some of its many features, it is possible to reproduce the effects that you might have previously done in Photoshop, with CSS code that is more maintainable, faster to load, and hip with the latest trends. Read on to learn about the power tools available to you and how to combine them to produce the ultimate graphical effects.

text-shadow