CSS & HTML: Minimal Style Lightweight Drop Shadow For Images

Posted February 1 '09
Comments

While a simple traditional border helps a picture gain page presence, a drop shadow takes it up a notch by providing it with a more artistic interest, and can easily be achieved using CSS without the use of additional graphics.

Minimalistic Drop Shadow

As demonstrated to the right, we just need to give the picture a border and specify the styling of the 4 sides individually. This can be applied directly to any of your existing <img/> elements without much ado.

Add the below class attribute to your <img/> elements as follows:

<img class="imgshadow" src="beach.jpg"/>

Then add the following code to your CSS file:

.imgshadow
{	border-top: solid 1px #ddd;
	border-left: solid 1px #ddd;
	border-right: solid 2px #ccc;
	border-bottom: solid 2px #ccc;
	padding: 10px;
	background: #fff;
	margin: 0 0 0 10px;
	float: right;
}

If you don't have a CSS file, you may insert the above code right into your HTML file, but you must wrap it in <style> tags:

<style type="text/css">
	put the CSS code here
</style>

A Little Explanation

As you can tell by looking at the code, we've emulated a shadow by making the right and bottom borders slightly thicker and darker. We also framed the picture with the use of padding, and set the frame color to white with the background value. We then gave the picture a left margin of 10 pixels to separate it from the text; the margin values are applied in a clockwise manner starting from the top. Finally, for the purpose of the presentation, we floated the picture to the right of the paragraph; if you are floating your picture, be sure that it appears before your text in your code.

That's all it takes. In parting, you're expected to make some changes to the code I gave you, which is why I explained how I achieved the individual effects. Feel free to play with these values for the results that best suit your design. If you need any additional help, or have a suggestion as to how to improve upon this code, don't hesitate to utilize the form at the bottom of this page.

Share/Save/Bookmark

Continue Reading:

Also See:

Categories: CSS & HTML

Tags: . .

Comments

Be the first to comment on this article.

Your thoughts







Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>