CALL 425.830.8350 FOR CUSTOM WORDPRESS DESIGNS
Ever wanted to isolate some text? An important message perhaps? This simple shadow technique creates an elegant shadowed border around your important content. Although it’s not 100% cross browser compatible (based on CSS3) most modern browsers will display it properly.

How it Works

First we start with our CSS needed to create the shadow effect. There’s two parts to this, one for the shadow effect and the other for the container:

The HTML

Now we put some HTML together in your page where you wish for the element to display:

Results:

The result should provide you with this sleek styling for your output:

Light Shadow

Os epulae, abico commoveo neo valetudo, camur luctus ut autem validus camur luctus. Minim reprobo, eu, enim, abbas cui duis premo incassum te obruo abluo nostrud. Hendrerit, dolore laoreet, imputo autem elit esse. Ventosus veniam uxor tum nostrud duis eu cogo ad, tamen hendrerit vel quis. Nostrud et ad qui nostrud, reprobo sagaciter elit.

Variations

Experiment with the width, height, radius and thicknesses to get various effects. This styling makes great looking blockquotes and excerpts. Enjoy!

Pin It on Pinterest

Share This