|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
Beginners to web design.
Thread: Shadow efect
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 9
|
|
| Author |
|
Morpheo
Stranger  Joined: Aug 20, 2008 Post Count: 3 Status: Offline |
I've started to create HTML websites, and I have a question about design. I want to get this efect in page borders, an efect like a shadow:  I don't know how to do it and I want to learn. If someone could be so helpful I will be very plesant. Thanks. PD: excuse for my english, I'm from Spain. I hope you can understand me. ---------------------------------------- [Edit 4 times, last edit by Morpheo at Aug 20, 2008 5:16:09 PM] |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Hello, This isn't something that you can code -- rather, you would use Photoshop to create the shadow image (either by applying a "drop shadow" layer style, or by using a gray gradient) which you would then include in your code. Your English is much better than my Spanish.  ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
Morpheo
Stranger Joined: Aug 20, 2008 Post Count: 3 Status: Offline |
Ok, so first step is going to Photoshop and create a small shadow. For example 20x20 pixels. Perfect, that's easy. The problem is: Where and how I put that image in my XHTML or CSS code??? |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Ok, so first step is going to Photoshop and create a small shadow. For example 20x20 pixels. Perfect, that's easy. The problem is: Where and how I put that image in my XHTML or CSS code??? Most likely, you would give one of your divs that wrap your entire page's contents the shadow background image, with a vertical repeat Something along the lines of this: .wrapper { background: url("shadowimage.jpg") 0 0 repeat-y; } ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Ok, so first step is going to Photoshop and create a small shadow. For example 20x20 pixels. Perfect, that's easy. The problem is: Where and how I put that image in my XHTML or CSS code??? Most likely, you would give one of your divs that wrap your entire page's contents the shadow background image, with a vertical repeat Something along the lines of this: .wrapper { background: url("shadowimage.jpg") 0 0 repeat-y; } But then his image must be as wide as his wrapper right? Because he was saying he'd make a 20 by 20 image. Just helping to clear it up for him. I'd probably just make the one image. But alternativley, you could have 2 wrappers ya? One for the left image and one for the right. #wrapperleft { background: url("shadowimage.jpg") 0 0 repeat-y; } #wrapperright { background: url("shadowimage.jpg") 100% 0 repeat-y; } ---------------------------------------- Eric :~) Knowledge is Power |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
But then his image must be as wide as his wrapper right? Because he was saying he'd make a 20 by 20 image. Just helping to clear it up for him. I'd probably just make the one image. But alternativley, you could have 2 wrappers ya? One for the left image and one for the right. #wrapperleft { background: url("shadowimage.jpg") 0 0 repeat-y; } #wrapperright { background: url("shadowimage.jpg") 100% 0 repeat-y; } Correct. How he does it exactly (using one wrapper div, using two, using multiple shadow images, whatever) is up to him to implement. Once he has the basics, he should be able to play with the code till it appears to his liking. ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
Morpheo
Stranger Joined: Aug 20, 2008 Post Count: 3 Status: Offline |
Aha, that's the point. So, I need to create the small shadow and repeat it in a only DIV. A DIV only for the shadow. Perfect. That DIV I must put it separately from the body, correct? only a DIV for the wrapper |
||
|
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
You can do a side shadow with a table or with divs and it's easier with table cells. Use a table three cells wide with the side cells the width of your shadow, or use three divs where the code structure is easy if all the divs have a fixed height but more complicated as the shadow has to be "dragged down" to the height of the center div if none have a fixed height. See examples 13a and 13b here (the side shadows are 200px wide but you can have any width):- http://www.wickham43.net/specialeffects.php Also a whole page shadow here:- http://www.wickham43.net/gradiatedbackground.html ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Aha, that's the point. So, I need to create the small shadow and repeat it in a only DIV. A DIV only for the shadow. Perfect. That DIV I must put it separately from the body, correct? only a DIV for the wrapper Here go bro - this will give you a good start. Now you just need to make your image. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Shadow</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; } h1 { font-size: 1.8em; text-align: center; padding: 175px 0 0; } h2 { font-size: 1.4em; text-align: center; padding: 25px 0 0; } html { height: 100%; } body { height: 100%; background: #333; } #wrapper { min-height: 100%; margin: 0 auto; width: 700px; background: url("images/shadow.png") 0 0 repeat-y; } * html #wrapper { height: 100%; } #clearfooter { height: 80px; } #footer { height: 80px; width: 700px; margin: -80px auto 0 auto; background: #999; } --> </style> </head> <body> <div id="wrapper"> <h1>#wrapper div</h1> <div id="clearfooter"> </div><!-- end #clearfooter --> </div><!-- end #wrapper --> <div id="footer"><!-- #footer sits outside the #wrapper --> <h2>#footer div</h2> </div><!-- end #footer --> </body> </html> ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 3 times, last edit by ewwatson at Aug 21, 2008 10:56:29 AM] |
||
|
|
|
|
Current timezone is GMT Jun 20, 2013 1:58:20 AM |
