JavaScript, CSS and PHP Code samples

Archive for August, 2008

Shadow without using images in CSS

Hi,

Here is a small piece of code which i found very useful. In normal cases we used to create images for producing shadows like this. Imagine if your page has around 4 coloumns where each coloumn is of diffrent width. You need to cut around 6 to 8 images for producing this shadow effect.

By using this code you can produce shadow effect without the use of images.

Shadow without using images

Shadow without using images

Concept : Main container div is surrounded by 4 divs. Each div is going 1px negative margin giving 1px visible area for each 4 divs. All the divs uses background colors starting with darker color to the innermost div and light color to the outer most div.

Here is the demo

Here is the HTML and CSS required to produce this effect

<div class="shContainer">
		<div class="shadow1">
			<div class="shadow2">
				<div class="shadow3">
					<div class="container">
This is div dropping shadow in its outer surface. No images are used. Works well with all the browesers.
CSS driven.
If you resize the page also the look and feel of the shadow is not affected.
This is a very optimistic coding, which saves lot of memory.
 Means your page load time will be more ( coz there is no image).
					</div>
				</div>
			</div>
		</div>
	</div>

CSS for this is:

.shContainer {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}

.shContainer .shadow2,
.shContainer .shadow3,
.shContainer .container {
position: relative;
left: -1px;
top: -1px;
}

.shContainer .shadow1 {
background: #F1F0F1;
}

.shContainer .shadow2 {
background: #DBDADB;
}

.shContainer .shadow3 {
background: #B8B6B8;
}

.shContainer .container {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
}

FORM validation using YUI

Hi,

I am here writing out a script for form validation using YUI. (yahoo user interface). YUI is a opensource javascript library from Yahoo. Which turely a good library for a webdev.

See the Demo here.

Form validatin screen1

Form validatin screen1

Error showing mandatory fields are not entered

Error showing mandatory fields are not entered

The files that you require for this are two javascript files. One is from YUI called yahoo-dom-event.js and the other is developed by me formValidator.js.

Main Key features of this code is

  • only you have to use one id for the form id=”loginForm”
  • only you have to use the class names password, email, input. No need of individual ids.
  • script will take care of the validation depending on the class names.

Here is the HTML.

<div class="loginArea">
  <form action="#" method="post" id="loginForm" >
    <fieldset>
    <div class="errorMsgCont"></div>
    <ul>
      <li>
        <label for="username">User name</label>
        <input type="text" name="username" class="username" />
      </li>
      <li>
        <label for="password">Password</label>
        <input type="password" name="password" class="password" />
      </li>
      <li>
        <label for="repassword">Re-Type Password</label>
        <input type="password" name="repassword" class="password" />
      </li>
      <li>
        <label for="email">email id</label>
        <input type="text" name="email" class="email" />
      </li>
      <li class="terms">
        <input type="checkbox" name="terms" class="terms" />
        <p>I here by agree to the terms and conditions of the Site</p>
        <div class="erroTerms">you have to agree</div>
      </li>
      <li class="buttons">
        <input type="submit" id="submit" name="submit" value="Register" />
        <input type="reset" id="reset" name="reset" value="Reset" />
      </li>
    </ul>
    </fieldset>
  </form>
</div>

Check the demo, if you find its usefull then leave me a comment.

Follow

Get every new post delivered to your Inbox.