Cool Web Design Tricks 1 – Shadows Down the Outsides of Your Webpage

Ever wondered how to get those neat shadows along the edges of your webpage to give it that slick three-dimensional look? Read on and let me explain exactly how to do it the easy way.

A good place to begin this tutorial is at the very beginning as Mary Poppins would probably have said.

Let’s imagine that you have made your webpage or are in the process of making it with css. You’ve decided to create the page 780px wide and centered it on screen. You have made the background either side of the webpage a light gray.

For the sake of this article I am going to assume that your main page style is called.wrapper and that you have created the wrapper div in the body.

It looks okay I suppose but how much better would it look if it had a shadow along the length of either side of your white page?

I am going to refer to Photoshop in this tutorial mainly because it’s something I use but I assume you could use almost any image editor and adapt the following information to suit.

Start Photoshop. Create a new file and create it 820px wide and 200px high. The height is simply to make sure we can see what we’re doing but the width is 40px wider than our page – 780px plus 20px on both sides.

Color the whole background light gray so that it is exactly the same color as the background on our web page.

Create a new layer and with the rectangle marque tool create a rectangle over the gray background 780px by 100px high, color it black.

Now go to select and choose all. Go to Layer and choose Align Layers to Selection – Horizontal Centers. This will shift your black rectangle to the centre of the background from left to right, the top and bottom doesn’t matter.

Select the black rectangle layer. Double click the thumbnail or open the blending options any other way you prefer. Go to Outer Glow, set the screen mode to normal, set the opacity to about 70%. Make the size 20px which is the width each side of the rectangle. And in the colored square click and select black from your swatch.

Your graphic should now be 820px wide with a black rectangle 780px wide in the center with blurry sides.

OK the blending panel to close it. Now the good bit, if your picture has dotted lines all around it press ctrl d to get rid of them, now go to Layers – Flatten Image.

Choose the cropping tool and crop a region the entire width of your graphic and also as narrow as you easily can. Press enter to verify the selection and you’ll be left with a wide strip of your image.

Go to File – Save As and save it as a jpg file. Go back to your page and add the graphic.

To include it you must wrap your wrapper div with shadow div. In the css add

Place the closing div following the closing wrapper div.

At this point add this to your css:

background-image: url(xxxxx.jpg);
width: 820px;
margin: 0 auto 0 auto;
The curly braces don’t show in this article but I am sure you realize that they belong at the beginning and end of each style.
You should have the white page 780px wide centered in the monitor using a gray background each side with an awesome shadow running down either side of your web page.

I hope you liked this quick hint, watch out for more soon.

Points to Remember in Web Design

The internet is the new corner of the world where everyone is in. Web design brings in a lot of quality to how people appreciate data placed on the internet.

Here are the three things you should remember when you do web design:

1. The proper arrangement of the pages and the way the information is presented should complement the kind of population that is intended for that page. Understanding the project you are in will help you come up with the right ideas for the design. Every detail must be precise. From the color of the background to the size of the pictures and even the right set of animations for each page. The best thing to do is create a dummy design and see how each of your idea goes with the concept. You should also take into consideration the amount of web experience your expected audience have and the information preferences as well.

2. Make sure that your website is accessible and user-friendly. Use universal computer languages (HTML, CSS, XML, etc) to ensure that the page would be useful to everyone. Using complicated languages might cause data error when the website is viewed by someone who isn’t using a computer that supports the language you are using. Always make sure that the labels of your hyperlinks make sense. Also try to create text equivalents to non-text components.

3. Always specify the restrictions of the site you are creating. There are already several web explorers out there (eg. Internet Explorer, Mozilla Firefox, Google Chrome, Rockmelt, etc); understanding the specifications of each browser would help you do a proper web design. Doing a little research on which of the browser responds the best to the design you are creating may also help to. If in any case, the page you have created cannot be compatible with other browsers, then you should make sure that you indicate the limitations of the site when using other browsers.

A lot of the other things that you would learn from web design, you will learn during the actual procedure of designing a creation. The best thing about being a part of the design team is that you get to be innovative and you get to learn new stuff everyday about how to improve your work. Every day, new web design tricks are being introduced to the internet population, understanding your audience, embracing the language and specifying the restrictions would help you steer towards success in effective web design.