CSS3 big style fieldset registration form

Experimenting with CSS3, I created a big style registration form with rounded borders and shadow effects. The only image used is not the button, but the pen that serves as […]

Experimenting with CSS3, I created a big style registration form with rounded borders and shadow effects. The only image used is not the button, but the pen that serves as a background image for the form itself.

Click on the image to see the demo of the page:

Click on the image to see a DEMO
Click on the image to see a DEMO

The CSS code has a lot of CSS3 elements and this form will only work in browsers that have support for CSS3 (which IE of course has not):

form.registration{
 width:600px;
 float:left;
 color:#818181;
 background: #f1f1f1 url(pen.png) no-repeat top right;
 border: 2px solid #ccc;
 padding:10px;
 font-family: Georgia;
 font-size: 14px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
}

The form will have rounded borders and a box shadow which looks very intriguing by using rgba values. Next, we define how the fieldset should be positioned:

form.registration fieldset{
  border-top:1px solid #ccc;
  border-left:0;
  border-bottom:0;
  border-right:0;
  padding:6px;
  margin:0px 30px 0px 0px;
}

The legend will give a name to the fieldset and we want it to have a less intense color:

form.registration legend{
  text-align:left;
  color:#ccc;
  font-size:18px;
  padding:0px 4px 0px 4px;
  margin-left:20px;
}

Now, let’s define the rest of the form:

form.registration label{
  font-size: 32px;
  width:200px;
  float: left;
  text-align: right;
  color:#999;
  clear:left;
  margin:4px 4px 0px 0px;
  padding:0px;
}
form.registration input{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  width:300px;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:32px;
  padding:3px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
form.registration input:focus, form.registration select:focus{
  background-color:#E0E6FF;
}
form.registration select{
  font-family: Georgia;
  font-size: 28px;
  float:left;
  border:1px solid #cccccc;
  margin:2px 0px 2px 2px;
  color:#00abdf;
  height:40px;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

And now, let’t define some style for the CSS3 button:

.button, .button:visited{
  float:right;
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  cursor: pointer;
  padding: 5px 10px 5px 5px;
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  padding: 10px 15px;
  background-color: #00abdf;
  display: inline-block;
  -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.button:hover{
  background-color: #777;
}

The html code looks as follows:

<form>
 <fieldset>
 <legend>About you</legend>
 <label>First name</label>
 <input type="text" maxlength="100" value=""/>           
 <label>Last name</label>
 <input type="text" maxlength="100" value=""/>                                  
 <label>Birthdate</label>
 <select>
 <option value="1">1</option>
 <option value="2">2</option>                             
 </select>
 <select>                               
 <option value="1">January</option>
 <option value="2">February</option>
 </select>
 <select>                           
 <option value="2009">2009</option>
 <option value="2008">2008</option>              
 </select>          
 </fieldset>
 <fieldset>
 <legend>Account details</legend>
 <label>E-Mail</label>
 <input type="text" maxlength="120" value=""/>
 <label>Password</label>
 <input type="password" maxlength="20"/>                                          
 </fieldset>
 <fieldset>   
 <a>Register</a>  
 </fieldset>   
</form>

Enjoy!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 4

Comments are closed.
  1. you have done a great job. I used it for project and it’s really perfect..thank you again..