Monday, April 4, 2011

Contact Form with CSS3

Contact form is an easy way to set your website apart from others. Some people is not techie so creating contact form will help them to easily reach you ;)

Most contact forms don’t require a lot of fields for entering information. As long as you have the basic ones for the visitors’ name and email address, then you should be fine.

Take note: This is CSS3 coded. So, this will works only on CSS3 browsers capability, such as Firefox, Chrome, Safari, and other modern browsers.

Insert the code below inside your <body> ... </body>

<!-- Contact Form -->
<div class="contact-form re">
<h1>Get in touch with us...</h1>
<label>Name</label>
<input type="text" alt="name" />
<label>Email</label>
<input type="text" alt="email" />
<label>Subject</label>
<input type="text" alt="fullname" />
<label>Your Message</label>
<textarea rows="1" cols="1"></textarea>
<label>
 
</label>
<input class="send" type="button" value="Send"a alt="send" />
</div>
<!-- Contact Form -->

Create contact.css, then here's the CSS code:

/********************************************
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/

/**********************
COMMON STYLE
**********************/
body {
background:#fff7e8;
font-family:Arial, Helvetica, sans-serif;
}
.re {position:relative;}

/**********************
CONTACT FORM
**********************/
.contact-form {
background:#fffff8;
color:#000;
width:250px;
padding:20px;
margin:50px auto;
/* Rounded Corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* Add Shadow */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 10px #ccc;
box-shadow:0px 0 10px #ccc;
} .contact-form h1 {
margin:0;
padding:0 0 15px;
font-size:18px;
font-weight:bold;
}
.contact-form label {
display:block;
width:150px;
font-size:14px;
font-weight:bold;
padding:0 0 2px 2px;
}
.contact-form input {
width:235px;
font-size:14px;
margin:0 0 10px;
padding:5px;
border:2px solid #ffd506;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Submit Button Style */
.contact-form input.send {
background:#FFF;
padding:7px 0;
text-align:center;
width:250px;
font-size:14px;
margin:0 0 2px;
border:1px solid #FC0;
cursor:pointer;
font-weight:bold;
/* Add Shadow */
-webkit-box-shadow:0px 0 5px #ccc;
-moz-box-shadow:0px 0 5px #ccc;
box-shadow:0px 0 5px #ccc;
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#f69d01));
background: -moz-linear-gradient(0% 40% 90deg,#f69d01, #EEE);
}
.contact-form textarea {
font-family:Arial, Helvetica, sans-serif;
height:100px;
font-size:14px;
width:235px;
font-size:14px;
margin:0 0 0;
padding:5px;
border:2px solid #FC0;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

On the <head> tag insert the code below: (make sure path is correct "css/") i put my contact.css on css folder.

<link rel="stylesheet" type="text/css" href="css/contact.css" />

That's all! Enjoy! God bless always!

CSS3 Rounded Corners

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

CSS3 Gradient Background

background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);

CSS3 Drop Shadow

-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc;
box-shadow:0px 0 50px #ccc;
Posted by alfieindesigns at 4/04/2011 08:51:00 AM 1 comments

Saturday, April 2, 2011

Container centered horizontally and vertically using CSS

Position absolute plus mathematical computations

In this approach you will learn how to position your container centered. Horizontally and Vertically? Yes, using the position absolute plus some mathematical computations.

Insert the code below inside your <body> ... </body>

<!-- Center -->
<div class="centered ab">
</div>
<!-- Center -->

Create center.css, then input the CSS code below:

/********************************************
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/

/**********************
COMMON STYLE
**********************/
.ab {position:absolute;}

/**********************
CENTERED CONTAINER
**********************/
.centered {
background:#000;
width:20px;
height:20px;
top:50%;
left:50%;
margin:-10px 0 0 -10px;
}

On the <head> tag insert the code below: (make sure path is correct "css/") i put my tab.css on css folder.

<link rel="stylesheet" type="text/css" href="css/center.css" />

The computations

Make sure to put width and height to ensure that our computation will work properly. Below you will notice that the top and left are sets as 50%, we used percentage (%) instead of px. Why? because percentage computed the resolution/size of you window screen while the px is set as fixed.

/**********************
CENTERED CONTAINER
**********************/
.centered {
background:#000;
width:20px;
height:20px;
 top:50%;
left:50%;
margin:-10px 0 0 -10px;
}

Top 50% is concerning the value of height, likewise left is the value of width.

width:20px;
height:20px;
top:50%;
left:50%;

We need to set negative value on margin half the whole value of width or height. Example:

height:500px;
top:50%;
margin-top:-250px;

The sample above will make abolute 'div' vertically centered.

On our css we used width 20px, height 20px, so the margin will be negative half value of the two, so:

width:20px;
height:20px;
top:50%;
left:50%;
 margin:-10px 0 0 -10px;

That's all! Enjoy! God bless always!

Posted by alfieindesigns at 4/02/2011 09:19:00 AM 2 comments
Subscribe to: Comments (Atom)