Forum

DMK Tech Forums is an online platform providing technology enthusiasts with an opportunity to hold discussions. Common heads under which discussions fall are: computer hardware, computer software, computer security, computer technology, internet and gaming. Under these sub-headings, there are numerous topics covering the entire area of technology. There is also a members’ area where off-topic discussions may take place.

Share:

Create a drop shadow effect for your website using CSS  

  RSS

dmkmedia
(@dmkmedia)
Admin Admin
Joined: 9 months ago
Posts: 17
04/06/2019 6:20 am  
wpf-cross-image

This tutorial will teach you how to create a drop shadow background effect for your website, using only a single image and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new dimension to your site and can really make your content stand out. This post will run through the basics of how the code works and what is needed to create the effect. A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom of this post.

Drop shadow effect example:

The shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to yourusing CSS. Two drop shadow images have been created, allowing you to use a larger width if necessary. Included sizes are optimised for 800×600 and 1024×768 monitor resolutions. Depending on which size you wish to use, simply change the width property of the #container style.

 

Now that the background effect is applied to the website, add a #container div to your html and give it the property margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px.

HTML Code:

Your Content Here

CSS Code:

body {

background-image: url(images/background_760.jpg);

background-repeat: repeat-y;

background-position: center;

background-color: #f7f4ee;

} #container {

width: 760px; margin: 0 auto; text-align: center;

}

 

Try Our other web design posts for more tips

HOW TO REDUCE THE BOUNCE RATE OF YOUR WORDPRESS SITE

DMK I.T. Services Tel 020 3334 9818


Quote
Share:

What clients say?

Nullam velit commodo sem, at egestas nulla metus vel imperdiet aptent taciti sociosqu ad litora torquent per conubia nostra mattis nulla eleifend magna, eget dictum urna to lorem gravida quis. Nulla facilisi. Mauris et dictum ante. Praesent rutrum velit eget quam elit dui, congue eu ornare vel, mattis sed eros at mattis ipsum.

Loading…

Please Login or Register