Tag: shadows

Long Shadows Generator

The Long Shadows Generator makes it easy to create an icon with a long-shadow style. You can apply the effect to text only and there are sliders to adjust all the CSS…
csshead 0 Comments

CSS Box Shadow & Text Shadow Experiments

Using a little HTML and some CSS we take a trip to the dark side of the moon, create a periodical table and make a radioactive love concoction. We even throw some CSS animations in there to add to the party…
csshead 0 Comments

Getting Clever with CSS3 Shadows – Screencast

As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways. This quick video tutorial will show you how…
csshead 0 Comments

CSS3 Advanced Box Shadows

In this video, you’ll learn about additional box-shadow features, such as multiple shadows and inset shadows. You’ll also learn some advanced techniques, such as how to create a sunken well effect…
csshead 0 Comments

CSS3 box-shadow and Image Hover Effects

The CSS3 box-shadow property is a new way of adding drop shadow effects just by editing a style sheet. There’s no need to use Photoshop! Just open your style sheet in a text editor and away you go. Well, it’s almost as simple as that but not quite. There’s one caveat and that is browser […]
csshead 0 Comments

Shadows and CSS3

I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. […]
csshead 0 Comments

Cross-browser Drop Shadows Using Pure CSS

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to […]
csshead 0 Comments

Four Sided PNG Drop Shadows with CSS

In the PNG Drop Shadows article we explored a new CSS method that uses the PNG image format to apply drop shadows to any arbitrary box, producing excellent looking shadows. That’s great, but the method limits us to having shadows on just two sides of the content box. Clients aren’t going to be satisfied with […]
csshead 0 Comments