FUN with Cascading Style Sheets – CSS Tutorial 9

Now that you’ve learned all the basics of CSS, it’s time for a little bit of fun using that information.
Using CSS to add a shadow to your images.

This is a great technique for making your testimonials stand out.
You can use an extra div tag to do this.

<div align=”center”>
<div style=”width:115px;height:115px; filter:shadow(color:gray);”>
<img src=”http://www.yoursite.com/images/image1.jpg” width=”100″ height=”100″ style=”border:1px solid black;”>
</div>
</div>

For this effect, you want to use a width and height for your shadow filter which is slightly larger than your image. In the example above, we are using a picture that is 100×100 and the shadow filter is 15px larger.

If you image was 80×80, you could use a shadow that was 90×90 and adjust from there for more or less shadow. You can also adjust the strength and direction of the shadow by defining those withing the color property, like…

(color:gray,strength:18, direction:132)

How about some cool box borders

Use CSS to create a Dashed Box

<div style=”margin:0px auto;border: black 1px dashed;padding: 15px;font-size: 12px;width: 200px;background-color: white;text-align: center”>
Place an image, text or both here
</div>

You can, of course, adjust the size of the box, text alignment, font size, font family and what ever else you like here.

Well, that concludes this tutorial!

I wish you the best and hope you will continue to work on your CSS skills as it is becoming more and more a norm in website creation and can allow you to put yourself out in front of others that haven’t taken the time to learn.

USE IT!

Thanks,

PS

Remember, you can have a copy of these lessons, including a discussion of CSS for WordPress Blogs in a great pdf file that you can give away to your prospects in exchange for an email address.

This valuable file is available for free and can be downloaded after signing up for my updates.

Have fun with Cascading Style Sheets!




Share this post using these icons:
Facebooktwittergoogle_pluslinkedinmail

Related Posts