As you may well know, CSS is used to create style sheets for web pages. Unfortunately, using CSS style sheets is well beyond the capabilities of many web site owners because most books and tutorials are written in total geek. So today we're going to take a quick peek into some of the mysterious and wonderful capabilities of CSS without sinking into the black hole of CSS style sheet programming.
As a web site owner, you probably have one or more pictures on your web site. You've got some type of photo or clip art in your page header and maybe you've sprinkled a few more throughout your site. These pictures are fine however they may look like they have just been glued to the page.
One quick and easy CSS trick can help you fix that glued on problem. Instead of just pasting your plan image to your web page, you can use a drop shadow to border your image and make it stand out.
To create a drop shadow for your web site images you simply need to use 1 of these 2 pieces of code.
CSS Trick # 1:
<div
style="width:115px;height:115px;filter:shadow(color:gray);">
<img
src=yourpicturefile.jpg width="100"
height="100" style="border:1px solid black;"></div>
CSS Trick #2:
<div
style="width:115px;height:115px;filter:shadow(color:gray,strength:18, direction:132);">
<img
src=yourpicturefile.jpg width="100"
height="100" style="border:1px solid black;"></div>
Here's how to understand what's going on in the above snippets of code.
First, it's the <div> tags that make these CSS tricks work so be sure to leave those tags in place.
Second, the width and height are set to be larger than your picture size. In the above examples, the picture I am putting on the site is named, yourpicturefile.jpg and has a width and height of 100 pixels. So to make sure my shadow shows up, the width and height for my <div> tag is sized slightly larger. You can adjust these numbers until you are happy with the size of your shadow.
Third, after the size of my picture you see a style for the border around my picture. If you don't want a border then replace the 1px with a 0px. If you want a thicker border then change the 1px to a larger number. Just be sure to keep the px part.
Now here's the difference between these 2 CSS tricks. The first snippet of code generates a simple shadow that is always the same color, brightness and in the same location for every picture it's used with. The second snippet of code give you control over the color of the shadow, how bright it is and where it is located. You can play around with these attributes until you are happy with how your drop shadow looks.
Now when you go off and use 1 of these tricks, you will find that your pictures don't appear exactly where you want them. To position your picture beside some text, the easiest way is to create an HTML table with the text in 1 column and the code for your shadowed picture in another column. If your picture is all by itself and you want to have it be left justified, centered or right justified then use 1 more CSS trick to put it where you want it.
To position your stand-alone picture put a <div align="center"> before the code from 1 of the above pieces of code and a </div> after it. Keep the quotes and use either the word, left, center or right to put your picture where you want it.
See how easy it was! You don't have to be a CSS expert to put shadows on your images when you know a couple of CSS tricks.
To Your Success,
Susan
P.S. If you found this tip useful, please leave a comment.
Tags: css tricks, drop shadow, web site design
|