Web Designer Nepal, Freelance web designer nepal, web developer nepal, joomla, wordpress, drupal, ecommerce, Open Source CMS

As we know web pages essentially revolve around boxy shapes called rectangles. These rectangles  come together in some way to form a well-formed design. Few years ago, when i started designing web, i learned to design a web in table based layout. But now table based layout has become old fashioned. Cascading Style Sheets (CSS) has been already introduced to improve the capabilities of web presentation.

By using CSS, designers could separate the design elements from the content of a web page and thereby make the pages more efficient, more consistent, more streamlined, and easier to maintain and update. Most of the professional designers are already into CSS design. And when creating design in CSS we have to divide the layout with vertical and/or horizontal guidelines to incorporate margins, spaces and columns in order to provide a framework for organizing content. To overcome that problem Grid was introduced. It helps to design solid visual and structural balance of web-sites or simply we can say grid is a tool to help the designs.

CSS2 doesn't have a property to add a shadow to a box. You can try to add a border to the right and bottom, but it won't look right. However, if you have two nested elements, you can use the outer one as a shadow for the inner one. For example, if you have a text like this (HTML):

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

you can use the outer DIV as a shadow for the inner one. The result might look like this separate page. First, give the BODY a background (light green in this example), the outer DIV a somewhat darker background (green-gray) and the inner DIV another background (e.g., yellow-white):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Next, by using margins and padding, you offset the inner DIV a little to the left and up from the outer DIV:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

You also have to move the outer DIV a little to the right. And if you have multiple sections, you probably want some space between them, too:

div.back {margin: 3em 0 3em 5em}

That's basically it. You can add a border around the inner DIV if you want. You'll probably also want some padding inside it, e.g.:

div.section {border: thin solid #999; padding: 1.5em}

Of course, you can vary the size of the shadow to your taste.

Here's how you would use the label tag and some CSS to create a stylin' form with very little markup:

<style>
label { position: absolute; text-align:right; width:130px; }
input, textarea { margin-left: 140px; }
label.check, label.radio { position:relative; text-align:left; }
</style>
<form>
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" /><br />
<label for="email">Your Email:</label>
<input type="text" name="email" id="email" /><br />
<input type="checkbox" name="subscribe" id="subscribe" />
<label for="subscribe" class="check">Subscribe</label>
</form>

If you don't want to apply this styling to ALL forms on your website what I usually do is give my form an id, and then use the ID in the style sheet such as:

#myFormID input, #myFormID textarea { ... }