In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:
Tutorial end product
Real-world example
The following is a list of steps needed to create the drop-shadow page edge images using the freely available GNU Imagine Manipulation Program (v2.6.6):
- Create a new image: File > New. Image size: 960 x 60, Fill with Transparency.
- Using the “Rectangle select tool” R, draw a random rectangle, it doesn’t matter where you draw it or how big you draw it because once you have a arbitrary selection, specify the following attributes in the Toolbox: Position: 10, 10. Size: 940, 40 px. The result should be a central rectanglar selection with a 10px margin on each side.
- Select the “Bucket fill tool” Shift+b, make sure the current foreground colour is black (d) and click inside the selection to create a black rectangle.
- Shrink the selection by a pixel: Select > Shrink, 1 pixel.
- Switch the foreground/background colours (x) so it’s now white and bucket fill the new selection to create a white rectangle with a black border.
- Add the shadow: Filters > Light and Shadow > Drop Shadow. Offset X: 0, Offset Y: 0, Blur radius 10, Colour: black, Opacity: 50, Allow resizing: unticked. The shadow is quite faint so it might be difficult to see until we have a white background.
- Add two horizonal guides. Image > Guides > New Guide. Horizontal, Position: 20 and Image > Guides >New Guide. Horizontal, Position: 40.
- The guides make is so we can slice the image into three: Image > Transform > Guillotine. Three new gimp windows will pop up. Save them as topShadow.png, edgeShadow.png and bottomShadow.png and we’re done.
Here is the smallest amount of HTML (that I can think of) that uses these drop-shadow images to create a valid webpage:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mockup</title> <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" /> <style> .row {width: 960px;margin: 0 auto} .topShadow {background: transparent url('topShadow.png') 0 0 no-repeat;padding-top:20px;margin-top:40px} .edgeShadow {background: transparent url('edgeShadow.png') 0 0 repeat-y} .bottomShadow {background: transparent url('bottomShadow.png') bottom left no-repeat;padding-bottom:20px} </style> </head> <body> <div class="row topShadow"></div> <div class="row edgeShadow"><p style="height:400px;text-align:center">Hello world!</p></div> <div class="row bottomShadow"></div> </body> </html>
Notes:
- Inline CSS is bad – The only reason I used it was to condense the example into a single file.
- I used the Yahoo reset – amongst other things, it strips all margin and padding from divs.
- The page is centered using margin: 0 auto; on the row class.
- The padding on the topShadow and bottomShadow divs is the same height as the background drop-shadow images.
- The edgeShadow div background is repeated vertically so the page can be any height.
There’s a few problems with what we’ve done so far:
- We shouldn’t use a empty div elements for the top and bottom shadows.
- The transparency used in the shadow images won’t work in IE6 because it doesn’t support 24bit png images. If you want to support IE6, here is one solution.
- We use 3 images for the page outline – we could save two HTTP requests if we could use a single image.
- The process we used to build the shadow images didn’t involve any creativity. The programmer inside me says that if a robot could do a task, a robot should do the task – I have written a script that generates these images automatically.
Let’s convert the toy example into something that is actually usable.
The first thing to do is to concatenate the 3 shadow images into a single image, tiled horizontally. e.g.
montage -mode concatenate topShadow.png edgeShadow.png bottomShadow.png pageShadow_horzSprite.png
Good info about sprites can be found at alistapart. We use the sprite image as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mockup</title> <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" /> <style> <!-- /* 1KB Grid */ .grid_1 { width:60px} .grid_2 { width:140px} .grid_3 { width:220px} .grid_4 { width:300px} .grid_5 { width:380px} .grid_6 { width:460px} .grid_7 { width:540px} .grid_8 { width:620px} .grid_9 { width:700px} .grid_10 { width:780px} .grid_11 { width:860px} .grid_12 { width:940px} .column { margin: 0 10px;overflow: hidden;float: left;display: inline} .row { width: 960px;margin: 0 auto;overflow: hidden} .row .row { margin: 0 -10px;width: auto;display: inline-block} /* Theme */ body {padding-top:40px;} .topShadow { background: transparent url('pageShadow_horzSprite.png') 0 0 no-repeat; padding-top:20px; } .edgeShadow { background: transparent url('pageShadow_horzSprite.png') -960px 0 repeat-y; } .bottomShadow { background: transparent url('pageShadow_horzSprite.png') bottom right no-repeat; padding-bottom:20px; } .topShadow .grid_12, .bottomShadow .grid_12 { background: transparent url('pageShadow_horzSprite.png') -960px 0 repeat-y; margin:0; padding:0 10px; } /* Base - used just for demo*/ ul li {list-style-type:disc;margin: 0 20px;} h2 {font-weight:bold;font-size:1.2em;margin:0.5em 0} p {font:40px/55px Helvetica;text-align: center;border: 1px dashed #000;} --> </style> </head> <body> <div class="row topShadow"> <div class="column grid_12"><p>header goes here (12)</p></div> </div> <div class="row edgeShadow"> <div class="column grid_8"><p>8</p> <div class="row"> <div class="column grid_4"><p>4</p></div> <div class="column grid_4"><p>4</p></div> </div> <div class="row"> <div class="column grid_2"><p>2</p></div> <div class="column grid_2"><p>2</p></div> <div class="column grid_2"><p>2</p></div> <div class="column grid_2"><p>2</p></div> </div> </div> <div class="column grid_4"><p style="line-height: 222px;">4</p></div> </div> <div class="row bottomShadow"> <div class="column grid_12"><p>footer goes here (12)</p></div> </div> </body> </html>
This is what the resulting page looks like:
How does it work?
- The 1KB grid is used to allow for a flexible layout structure.
- A single image (pageShadow_horzSprite.png) with varying offsets is used for the page shadow. To tile images vertically we need to use a horizontal sprite and set the horizontal offset. This is how we access the sprite image to get the 3 background page shadows:
background: transparent url('pageShadow_horzSprite.png') 0 0 no-repeat;
background: transparent url('pageShadow_horzSprite.png') -960px 0 repeat-y;
background: transparent url('pageShadow_horzSprite.png') bottom right no-repeat;
I have done a related post which describes how to automatically generate page shadow images.
wow! I love this blog, keep posting.
I love this blog, keep posting. and keep it up.
rkf0xhm
zl9l768z
q2sauinu
qb9ji70
I thought your content was excellent and really fascinating. Please continue to offer us such wonderful content.