Jump to content


Photo
* * * * * 1 votes

TUTORIAL: CSS Drop Shadow Background Effect


  • Please log in to reply
57 replies to this topic

#1 Ben

Ben

    Web Designer Forum Admin

  • Root Admin
  • PipPipPipPipPip
  • 3,127 posts
  • Gender:Male
  • Location:Essex, UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 22 October 2006 - 07:07 PM

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
:)

Attached Files



#2 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 07 September 2007 - 10:54 PM

Just wanted to say that I just used this and it worked great :D

All i did though was place an 800px wide rectangle on an 850px wide canvas, apply shadow, reduce to 1px high, set as background image, and then add a centered 800px wide container


#3 Ben

Ben

    Web Designer Forum Admin

  • Root Admin
  • PipPipPipPipPip
  • 3,127 posts
  • Gender:Male
  • Location:Essex, UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 08 September 2007 - 08:39 AM

Hey, that's great! Glad you found it useful.

Yip, your method sounds right, it's just about repeating the background vertically or repeat-y; nice one :good:

:)


#4 Boyles Web Design

Boyles Web Design

    Hi...

  • Privileged
  • PipPipPipPipPip
  • 1,637 posts
  • Gender:Male
  • Location:Indiana, USA
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 08 September 2007 - 06:21 PM

ya it worked good for me two thanks for the tut.


#5 3wshare.com

3wshare.com

    Forum Newcomer

  • Members
  • Pip
  • 11 posts
  • Location:China
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 12 September 2007 - 08:41 AM

Simple ,but useful .. :D


#6 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 12 September 2007 - 09:59 PM

yeah but what if you don't want the bg to span all the way down to the bottom of the page?


#7 Sazzad

Sazzad

    Privileged

  • Privileged
  • PipPipPipPip
  • 633 posts
  • Gender:Male
  • Location:New York, New York
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 14 September 2007 - 08:43 PM

Yea that is really helpful for css users to know...however from my experience, i usually create 2 containers...one for the bg image and one for the content...when i use margins, for a strange reason the content comes out very awkward

CSS
#container {
	width: 768px;
	margin: 0 auto;
	text-align: center;
	backgroud-image: url("image/bg.gif")
	backgrond-repeat: repeat-y;
}
#container2 {
	width: 760px;
	margin: 0 auto;
	text-align: left;
}

HTML
<div id="container">
<div id="container2">then the rest of the content goes here</div>
</div>


#8 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 19 September 2007 - 10:48 AM

yeah but what if you don't want the bg to span all the way down to the bottom of the page?


Then you can add a footer image that covers over the bg image :) rounds it off nicely


I had one question about this whole shadow thing, don't know if anyone can provide any insight...
When I set the whole thing up it works and looks great, but then I find that on other computers (same browser in some cases) all my content is 1 pixel off to the left... when I change my bg image shifted 1 pixel to the left, it looks wrong on my computer, but correct on everyone else's..... whats up with that?


#9 Dizi

Dizi

    Queen of the Spammers

  • Members
  • PipPipPipPipPipPip
  • 5,731 posts
  • Gender:Female
  • Location:Newcastle, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 19 September 2007 - 10:55 AM

Then you can add a footer image that covers over the bg image :) rounds it off nicely
I had one question about this whole shadow thing, don't know if anyone can provide any insight...
When I set the whole thing up it works and looks great, but then I find that on other computers (same browser in some cases) all my content is 1 pixel off to the left... when I change my bg image shifted 1 pixel to the left, it looks wrong on my computer, but correct on everyone else's..... whats up with that?



Do you have a link so we can see this?


#10 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 19 September 2007 - 03:48 PM

www.eggmandesigns.co.uk/btq/test.html

:)

Looks correct for me, but i've been told its one pixel out! But as I said, when I correct it for them, its wrong for me....


#11 Expat629

Expat629

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,141 posts
  • Gender:Female
  • Location:Newcastle upon Tyne, United Kingdom
  • Experience:Intermediate
  • Area of Expertise:Entrepreneur

Posted 20 September 2007 - 05:44 PM

I see what you mean, ^. It looks fine in my FF2 but off in IE6. No clue why though... <_<


#12 kip0130

kip0130

    Privileged

  • Privileged
  • PipPipPipPip
  • 743 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:Coder

Posted 22 October 2007 - 07:12 PM

how would i do this if i dont want my background to be a color what if i want it to be a pattern?


#13 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 22 October 2007 - 07:57 PM

When I set the whole thing up it works and looks great, but then I find that on other computers (same browser in some cases) all my content is 1 pixel off to the left... when I change my bg image shifted 1 pixel to the left, it looks wrong on my computer, but correct on everyone else's..... whats up with that?


I've just experienced the same problem - has been doing my head in all day...I fixed it by taking the backgound image out of the body tag and putting it into a wrapper div and then all the content within an innerwrapper div. The ufortunate outcome of this solution means that the background doesn't span the whole height of the browser window which is the effect I was after. The 1 pixel shift only seems to appear in IE7 for me.


#14 kip0130

kip0130

    Privileged

  • Privileged
  • PipPipPipPip
  • 743 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:Coder

Posted 22 October 2007 - 08:26 PM

I've just experienced the same problem - has been doing my head in all day...I fixed it by taking the backgound image out of the body tag and putting it into a wrapper div and then all the content within an innerwrapper div. The ufortunate outcome of this solution means that the background doesn't span the whole height of the browser window which is the effect I was after. The 1 pixel shift only seems to appear in IE7 for me.

hmm so maybe its best to not have a drop shadow then :(
i cant figure it out to make it not do that.


#15 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 23 October 2007 - 04:36 PM

found a solution,

instead of making your image white in the middle with shaddow on both sides, make your shadow drag all the way across, and taper off at each end to your background color. Overlay your container div on the image the same way, set the bgcolor to white (or whatever you want) and the 1px difference will now not be noticeable. (unless you look really really hard).

hope that helps, let me know if you need me to describe it in any more detail


#16 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 October 2007 - 04:50 PM

yeah but then if you've got a page with not much content on it, it won't stretch to the bottom of the page and you'll have this big central column of shadow underneath your content...so noy much of a solution for me as some of my pages aren't very 'tall'


#17 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 23 October 2007 - 06:21 PM

still an easy solution, put the background with the shadow in a div that wraps around the container, the wrapper will expand as the container does


#18 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 October 2007 - 06:25 PM

that's what I've done to solve my issue - compromised and lost the full height central column.


#19 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 23 October 2007 - 08:50 PM

you can still have a full height column in a seperate div behind the column that holds your content.

or even just set you content column height to 100% ?


#20 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 October 2007 - 09:00 PM

or even just set you content column height to 100%


that doesn't work with divs...


#21 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 23 October 2007 - 10:38 PM

you're right, I give up.


#22 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 October 2007 - 10:44 PM

That's the spirit! I gave up hours ago...


#23 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 23 October 2007 - 11:22 PM

how about in the html

<!-- [if gte IE5.5000]
<style type="text/css">
@import ("ie55up.css");
</style>
-->

so if browser = ie5.5 or higher css =

#container {
blah;
blah;
margin-left: 1px;
}


#24 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 October 2007 - 11:25 PM

Thanks for the suggestion, but I'm leaving my css as it is as I need to plough on with the job... and the client is happy with the design compromise.


#25 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 23 October 2007 - 11:35 PM

didnt mean for that site specifically, just as a plausable solution


#26 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 October 2007 - 11:48 PM

oh ok - might try that next time around then...cheers.


#27 Onigiri

Onigiri

    Forum Newcomer

  • Members
  • Pip
  • 28 posts
  • Location:London, England
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 29 October 2007 - 03:46 PM

When I need shadows (especially pngs with alpha transparency) for content boxes I usually just whip up a script and have it apply the shadow to every element with a specific class. The easiest way seems to be to build the top inside the element you wish to give the shadow.

I just dynamicly insert a div as the first element in the element and let it expand to take up the entire line positioning the top left corner png as its background, then put another div in it with the top right image and let it do the same but background-position it right and this time give the div left and right padding that is the width of the corner images. Then all you need to do is put another div inside the last one (so we have a div inside a div inside a div), and this one will have the top tile background repating along the y axis with the padding making sure it doesn't overlap the corner images and give you an extra dark shadow. Then position the whole thing with negative margins and/or relative positioning so it sits just above the element you're giving the shadow.

The left/right shadows I just nest two divs and do the same kind of thing with the actual page content being appendChild'ed to the innermost div so it acts as a wrapper. And I do the same thing as I did for the top for the bottom but with a few changes. All background images and positioning being done using css, you just create the elements with the right classes with javascript and arrange them in your html

Well, that's pretty much the gist of how I tackle it. Being all in Javascript it keeps your HTML squeeky clean, and you can just have it fallback to a nice border if they don't have javascript enabled which seems like the best of both worlds and is the best method of having real alpha-transparent shadows I could come up with. For IE6 which doesn't support PNGs and the hacks can't handle the complex positioning of the script I either change the page background which the shadow is on top of to be a nice matt colour and use a conditional to make ie use jpgs with the shadow pre-layed on the matt colour, or do the border fallback.

Lol, did anyone follow? I was like "God, am I really going to attempt to explain this?" :p
Basically you dynamically build the caps like they were a column layout (kinda like faux) using padding and negative margin and wrestle them into place as caps, contain the content and give that wrapper the left/right shadow and wrestle the bottom cap into place like the top one. *sarcasm*Sounds like fun right?*sarcasm* :D But you just gotta love shadows~


#28 EggMan

EggMan

    EggPornstar

  • Privileged
  • PipPipPipPipPip
  • 1,201 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:SEO

Posted 31 October 2007 - 01:20 PM

:blink:


#29 Eskymo

Eskymo

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 2,438 posts
  • Gender:Female
  • Location:Fife, Scotland, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 31 October 2007 - 08:41 PM

my thoughts exactly Neurotoxin - sounds like...far too complicated...for something so simple.


#30 *kenv

*kenv

    Advanced Member

  • Members
  • PipPipPip
  • 361 posts
  • Gender:Male
  • Location:Canada
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 03 November 2007 - 06:02 AM

its like... an image with a gradient to the left and one to the right... i just dont get it o.O


#31 Thomas Thomassen

Thomas Thomassen

    HTTP 503

  • Privileged
  • PipPipPipPipPip
  • 2,254 posts
  • Gender:Male
  • Location:Trondheim, Norway
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 03 November 2007 - 10:29 AM

It's basicly Onion Skinning, except that the extra wrappers needed is added with JS, keeping the markup clean. I've been thinking of JS drop shadow effects, but lately I've avoided drop shadows unless the element is fixed size so I can apply one background image to the element.
I have however begun to use the coming CSS3 shadow properties. Yes, most browsers won't display it, but they will in the future and older browsers gracefully degrade into simple not having shadows.


#32 Design Simple Web

Design Simple Web

    Forum Newcomer

  • Members
  • Pip
  • 9 posts
  • Location:Brighton
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 06 November 2007 - 04:30 PM

THX for tips.


#33 rockarena

rockarena

    Forum Newcomer

  • Members
  • Pip
  • 41 posts
  • Experience:Beginner
  • Area of Expertise:Coder

Posted 07 December 2007 - 11:24 AM

I also had a question about applying this technique to a patterned background. Still puzzled at how you can do this. Topic here:

Drop shadow anguishes


#34 danielnr

danielnr

    Forum Newcomer

  • Members
  • Pip
  • 5 posts
  • Experience:Beginner
  • Area of Expertise:Video Production

Posted 16 June 2008 - 10:31 AM

Hi all, Ben, this is fantastic but i would like to round off the top with a header and a footer image. I am fairly new to web design but I'm a fast learner and know the basics of java, so that always helps....lol

I'm actually using Dreamweaver to create my website, and my background drop shadow works great, but how can i round of the top and bottom of my site with another image?

Any help appreciated!

Thanks


#35 sandhyadhasal

sandhyadhasal

    Forum Newcomer

  • Members
  • Pip
  • 5 posts
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 20 July 2008 - 11:11 AM

Hello Ben,

I am new to this forum but i think it will make me something special as i am learing so many new things from this forum tutorials.......and i am very happy to a part of this forum.......thank you very much for the dropshadow border tutorial........its simply Great!

Regards,

Sandhya


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
:)



#36 a.g.r.c

a.g.r.c

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,051 posts
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 20 July 2008 - 05:43 PM

This tutorial is a milestone in CSS usage.

Well done for publishing!


#37 Ben

Ben

    Web Designer Forum Admin

  • Root Admin
  • PipPipPipPipPip
  • 3,127 posts
  • Gender:Male
  • Location:Essex, UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 21 July 2008 - 06:59 AM

This tutorial is a milestone in CSS usage.

Well done for publishing!


No problem at all, i'm extremely pleased you find it so useful :)


#38 PeterPan

PeterPan

    Forum Newcomer

  • Members
  • Pip
  • 14 posts
  • Experience:Beginner
  • Area of Expertise:Web Developer

Posted 24 July 2008 - 01:49 PM

Thanks !
Its cool topic !
B)











------------------------------------------------------------------------
loznica webdizajn
web015 šabac
web014 valjevo


#39 Boz

Boz

    Forum Newcomer

  • Members
  • Pip
  • 17 posts
  • Location:England
  • Experience:Beginner
  • Area of Expertise:Web Designer

Posted 25 July 2008 - 11:55 AM

Thanks, i still need to work on it a bit, but thanks :D


#40 miikey

miikey

    Forum Newcomer

  • Members
  • Pip
  • 48 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:Entrepreneur

Posted 09 August 2008 - 11:30 PM

Awsome tutorial. A few months ago I designed a template and was trying to achieve this effect but instead I just made a huge .jpeg picture with the drop shadow effect and made it no repeat as a background.

I hope I'll get to use this. Awsome tut!





3 user(s) are reading this topic

0 members, 3 guests, 0 anonymous users