TUTORIAL: CSS Drop Shadow Background Effect

View New Content

2 Pages
←
1
2

You cannot start a new topic
You cannot reply to this topic

TUTORIAL: CSS Drop Shadow Background Effect Easily add a Background Drop Shadow Effect for your Website Rate Topic: 1 Votes

#41 janebush08

Forum Newcomer

Group: Members
Posts: 4
Joined: 13-October 08
Reputation: 0
Gender:Male
Experience:Beginner
Area of Expertise:SEO

Posted 13 October 2008 - 11:51 AM

Nice Web Design Tutorial... thanks... hope to get more tutorials / knowledge from you.. thanks once again...

#42 solutionsdxb

Forum Newcomer

Group: Members
Posts: 1
Joined: 05-August 08
Reputation: 0
Experience:Nothing
Area of Expertise:Designer

Posted 30 April 2009 - 07:25 AM

is it possible to have this background image , as i am not expert in photoshop and neither i am having the application , so if somebody can help me in providing this background image to be used to get the shadow effect for my pages.

with regards

#43 tobo

Advanced Member

Group: Members
Posts: 413
Joined: 04-March 09
Reputation: 12
Gender:Male
Experience:Intermediate
Area of Expertise:Web Designer

Posted 30 April 2009 - 09:52 AM

Any suggestions on getting this effect with a liquid layout? so the bg image cant be one size but would have to probably be two opposing images which cling to the sides of the main content as it expands or contracts in different screen sizes?

I had ago at this and had trouble laying out the divs with the shadow effect because they didn't want to run the length of the main content div?

went for fixed width in the end but would like to know the answer for the next time I need it!

#44 mlcuthell

Forum Newcomer

Group: Members
Posts: 2
Joined: 31-December 09
Reputation: 0

Posted 31 December 2009 - 07:06 PM

Hi There,

I have a very basic understanding of HTML. But advanced PS.

I am trying to apply the drop shadow to a blogger template... is this tut possible solely in HTML?

I have trying a work around off my basic knowledge but I seem to be failing, it may be a bit of a newb question but could you let me know!

Thanks in Advance!

#45 Stardog

Forum Newcomer

Group: Members
Posts: 86
Joined: 09-April 08
Reputation: 1
Location:Edinburgh
Experience:Advanced
Area of Expertise:Web Designer

Posted 31 December 2009 - 08:01 PM

mlcuthell, on 31 December 2009 - 07:06 PM, said:

Yes!

http://owltastic.com...adows-and-css3/

For text:
text-shadow: 1px 1px 1px rgba(0,0,0,.4);

Numbers = Offset from middle, Offset from middle, Sharpness of shadow, rgba(red,green,blue,opacity)

For boxes:
-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,.5);
box-shadow: 0px 0px 10px 5px rgba(0,0,0,.5);

(webkit/moz are because they are currently unsupported css properties. You have to use -webkit to get it to work in Safari/Chrome and -moz for Firefox.)

Numbers = Offset from middle, Offset from middle, Sharpness of shadow, Thickness of shadow, rgba(red,green,blue,opacity)

Rounded corners:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

#46 mlcuthell

Forum Newcomer

Group: Members
Posts: 2
Joined: 31-December 09
Reputation: 0

Posted 01 January 2010 - 10:28 PM

Sorry I'm a little confused, where do I add this code?

Still in the body section? Do I just add that code alone?

I have created the jpeg as per the tut... A further breakdown would be very helpful thanks!!! I want to apply it to the wrapper on this website

Link to web

Thanks.

#47 Percy

Forum Newcomer

Group: Members
Posts: 2
Joined: 15-March 10
Reputation: 0

Posted 15 March 2010 - 01:08 PM

Thank you so much for that really straight forward easy to use CSS drop shadow for my background. I joined your site, because your tut was so brilliant. Thank you, thank you, thank you!!

#48 angie

Forum Newcomer

Group: Members
Posts: 1
Joined: 07-April 10
Reputation: 0

Posted 08 April 2010 - 12:13 AM

My background is an image. How do I apply the drop shadow effect to the image instead of the background color?

#49 elizas

Forum Newcomer

Group: Members
Posts: 1
Joined: 29-April 10
Reputation: 0

Posted 29 April 2010 - 07:29 AM

The following Javascript code will help you change the background-color of your web-page automatically and at a time-interval (in milli-seconds) as specified in the code.

<head>
<script type="text/javascript" language="javascript">

/* Method To Generate Random Numbers Between "0-255" for RGB Color-code Format & Assign To Body-Backgrond-Style */

function bgDisco()
{
var x =Math.round(255*Math.random());

var num1 =getHex(x);

var y =Math.round(255*Math.random());

var num2 =getHex(y);

var z =Math.round(255*Math.random());

var num3 =getHex(z);

document.body.style.background="#"+num1+num2+num3;

setTimeout("bgDisco()",1000);
}

/* Method To Convert Decimal To Hexadecimal */

function getHex(dec)
{

Eliza

#50 Splash Gordon

Forum Newcomer

Group: Members
Posts: 1
Joined: 02-May 10
Reputation: 0

Posted 02 May 2010 - 01:19 PM

Superbe, thank you for this very useful and understandable lesson!
Posted Image

#51 Daemonz

Forum Newcomer

Group: Members
Posts: 1
Joined: 16-July 10
Reputation: 0

Posted 16 July 2010 - 05:12 AM

As helpful as this is, this makes it where I can't use a BG image. I have to use a color. How can I fix this?

#52 Mo_

Forum Newcomer

Group: Members
Posts: 5
Joined: 01-September 10
Reputation: 0

Posted 01 September 2010 - 01:24 PM

Thanks dude :drinks:

Ben, on 22 October 2006 - 07:07 PM, said:

CSS Drop Shadow Background Effect for your Website

A very easy to follow tutorial on how to quickly create a drop shadow background effect for your website using a small 1px high image and a touch of CSS. EASY!

For a live example: Click Here

Note:
I'll be demonstrating this using Macromedia Fireworks, but any other product is fine, i.e Photoshop, Paintshop Pro etc.

Step 1.

Create a new blank canvas with the dimensions 1024 x 1000 pixels in your favorite image editing software.
Give the canvas colour the attribute #F7F4EE

Step 2.

[See attached image for this step]

Create a white rectangle measuring 768 x 900 pixels in the middle of the canvas.

Apply a glow effect to the rectangle, give the glow a dark grey colour I would suggest #666666 and drop the opacity of the glow to 20%. In fireworks it automatically gives a wide spread of shadow, simply adjust the spread to 3 and the fade to 7 with an offset of 0 (See attached image) - If you are using software other than fireworks simply adjust the properties until you have your desired shadow/glow effect.

Step 3.

Rather than using the whole image you have just created, we are going to cut out a 1px high slice spanning the width of your whitebox and the shadow you just created in Step 2. Fireworks has a great tool called "Fit Canvas" - which crops the canvas to the dimensions of all the elements on your screen and removes any unused space. This quickly gives you shadow with equal widths either side of the white rectangle. (See 2nd attached image)

To do this simply use the shortcut Ctrl+Alt+F or Modify -> Canvas -> Fit Canvas.

Now goto Modify -> Canvas -> Canvas Size -> Give it a height of 1px. (This will make sense later)

Goto File -> Export Wizard -> The Web -> Export is as a .jpg (gif's normally don't blend the shadow as well)

Name the image: background.jpg (Put this in your website images foloder)

Result: You will have now created a 1px high image that we can now use to give your website a drop shadow effect.

Note: If you are using image software other than Fireworks and don't have the "Fit canvas" tool - Export the image using a slice measuring 1px high spanning the width of your White Rectangle and Shadow you created in Step 2. Make sure the width is an even number and has covers equal ammounts of shadow either side.

Step 4.

Create a stylesheet and call is styles.css and save it in the root of your website.

Now in Step 3 we created a 1px high image of your background, using CSS we are going to tile (repeat) this image vertically giving you a drop shadow effect no matter how far your website scrolls downwards.

We are going to apply this to the BODY of your website.

Add the following code to your styles.css file:

body {
	background-image: url(images/background.jpg); /** Link to the image you created **/
	background-repeat: repeat-y; /** Repeats the image vertically **/
	background-position: center; /** Centers the Background image **/
	background-color: #f7f4ee; /** Website BG colour (matches canvas colour in Step 1) **/
}

Open up your favorite Web Editing software create a new document and call it index.html and save it in the root of your website folder. Now to link to the stylesheet you created add the following into the <head> of your document:

<link href="styles.css" rel="stylesheet" type="text/css" />

To make sure everything sits central when you start to add content to your website put it within a master container:

For example: within the <BODY> of your website add <div id="container">Content Here</div> - where it says "Content Here" - add all your website content within there.

with the style:

#container {
	width: 768px;
	margin: 0 auto;
	text-align: center;
}

And that's it! You have now created website with a drop shadow effect that you can add easily add content to.

For a live example: Click Here

#53 Jornes

Forum Newcomer

Group: Members
Posts: 2
Joined: 13-September 11
Reputation: 0
Gender:Male
Location:Malaysia
Experience:Intermediate
Area of Expertise:Web Developer

Posted 13 September 2011 - 08:18 PM

Hi! If i create the dropshadow using only CSS code, is this work on all the browsers?

#54 Malick

Dedicated Member

Group: Members
Posts: 175
Joined: 20-July 11
Reputation: 13
Gender:Male
Experience:Intermediate
Area of Expertise:Coder

Posted 13 September 2011 - 09:09 PM

Maybe using the new CSS-3 built-on drop shadow would be a better idea now?

Eg:

box-shadow: 3px 3px 4px #000;

#55 Fox

Forum Newcomer

Group: Members
Posts: 1
Joined: 04-October 11
Reputation: 0

Posted 04 October 2011 - 04:29 PM

Good stuff.
Thank you for sharing.

#56 omghi2u

Forum Newcomer

Group: Members
Posts: 2
Joined: 23-December 11
Reputation: 0
Gender:Male
Experience:Intermediate
Area of Expertise:Coder

Posted 23 December 2011 - 11:18 PM

I found this tut to be extremely helpful as well because I can't use CSS3 in my development and design due to the customers requirements. However, in following this tutorial I'm having difficulty with 1pixel to the right. Developing a Master Page with this background and the 2 issues I have currently is the 1 pixel to the right showing the white center, the other issue is the background in the body of my css and in doing so it flows all the way down the page, even past the contentplaceholders and footer. If I put it in the main container then I get no background at all. Novice level web designer, new to CSS but a .NET junkie. Any help or suggestions would be great.

#57 omghi2u

Forum Newcomer

Group: Members
Posts: 2
Joined: 23-December 11
Reputation: 0
Gender:Male
Experience:Intermediate
Area of Expertise:Coder

Posted 29 December 2011 - 03:49 AM

omghi2u, on 23 December 2011 - 11:18 PM, said:

Developing a Master Page with this background...................the other issue is the background in the body of my css and in doing so it flows all the way down the page, even past the contentplaceholders and footer. If I put it in the main container then I get no background at all.

Fixed the 1pixel issue with my layout, looks great. However I'm still having the issue with the background image running all the way down past the content holder. Below is what I have in my style sheet. I have attempted to put the BG Image into #wrapper but it wont' appear. Only time it will appear is when I have it in the body of the css.

body {
 margin: 0;
 top: 0; 
 padding:0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #ffffff;
 background-position: center;
 background-image: url("../Images/background.jpg");
 background-repeat: repeat-y; 
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}