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

Wednesday, March 30, 2011

Old Facebook Tab

Tab Navigation CSS

The purpose of the tab interface is to guide the user as to their present location, these small features do actually improve the usability of the tab structure. Below are simple codes for tab interface.

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

<!-- Tabs -->
<div class="tabs">
<a href="#" class="selected">Wall</a>
<a href="#">Info</a>
<a href="#">CSS</a>
<a href="#">HTML</a>
<a href="#">alfie-css</a>
<a href="#">alfieindesigns</a>
<br class="clear" />
</div>
<!-- Tabs -->

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

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

/**********************
COMMON STYLE
**********************/
.clear {clear:both;} /* use to clear all floats */

/**********************
TAB ALA FACEBOOK
**********************/
.tabs {
border-bottom: 1px solid #D8DFEA;
bottom: 0;
font-family:Arial, Helvetica, sans-serif; /* When you change font-family be sure to adjust the height */
height: 24px; /* Adjust this for border bottom to fit the layout (only if you change the font family ) */
left: 0;
width: 530px; /* Change to fit your layout */
padding:50px 0 0 10px;
}
.tabs a {
float:left;
background:#D8DFEA;
border-color:#D8DFEA;
border-style:solid solid none;
border-width:1px 1px 0;
display:block;
font-size:13px;
font-weight:bold;
padding:4px 11px;
white-space:nowrap;
color:#3B5998;
cursor:pointer;
outline-style:none;
text-decoration:none;
margin:0 2px 0 0;
}
.tabs a:hover {
background-color:#627aad;
border-color:#627aad;
border-style:solid solid none;
border-width:1px 1px 0;
color:#FFF;
}

.tabs a.selected, .tabs a:hover.selected {
background-color:#FFF;
color:#333333;
font-size:13px;
padding:5px 10px 4px;
border-color:#D8DFEA;
border-style:solid solid none;
border-width:1px 1px 0;
}

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/tab.css" />

That's all! Enjoy! God bless always!

Posted by alfieindesigns at 3/30/2011 11:10:00 PM 3 comments

Simple Layout

Two Column CSS Layout

The layout consists of a header, a main content column, a left column, a right column and a footer. It is fixed width centered layout. A pretty basic layout, and not at all difficult to create with CSS.

Below are the basic markup for this layout, you will notice that each category (ex. header, content) are having comments. So, you will not confuse which code is intended for.

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

<!-- Header -->
<div class="header">
This is header
</div>
<!-- Header -->

<!-- Content -->
<div class="content">

<!-- Left Column -->
<div class="left-column">
Left Column
</div>
<!-- Left Column -->

<!-- Right Column -->
<div class="right-column">
Right Column
</div>
<!-- Right Column -->

</div>
<!-- Content -->

<!-- Footer -->
<div class="footer">
Copyright ® alfieindesigns. All rights reserved.
</div>
<!-- Footer -->

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

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

/**********************
COMMON STYLE
**********************/
body {
background:#EEEEEE; /* Add general background (remove this if not needed) */
font-family:Arial, Helvetica, sans-serif; /* Change value depends on layout font family/style (only for webfonts) */
font-size:12px;
margin:0;
padding:0;
color:#333; /* Change value depends on general font color */
font-weight:100;
}

/**********************
HEADER
**********************/
.header {
background:#E1D4C0;
border-bottom:1px solid #999;
width:940px; /* Change depends on website layout */
height:100px;
margin:0 auto; /* Center div */
padding:10px;
}

/**********************
CONTENT
**********************/
.content {
background:#E1D4C0;
border-top:1px solid #FFF;
width:960px; /* Change depends on website layout */
margin:0 auto; /* Center div */
}

/* Left Column */
.left-column {
background:#d5cbbd;
width:280px;
height:500px;
float:left;
padding:10px;
}

/* Right Column */
.right-column {
background:#c3b6a2;
width:640px;
height:500px;
float:left;
padding:10px;
}

/**********************
FOOTER
**********************/
.footer {
clear:both; /* Use to clear the float so it will not follow the float */
background:#E1D4C0;
border-top:1px solid #FFF;
width:940px; /* Change depends on website layout */
margin:0 auto; /* Center div */
text-align:center;/* Center content/copy */
padding:10px;
}

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

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

That's all! Enjoy! God bless always!

Posted by alfieindesigns at 3/30/2011 12:41:00 AM 1 comments

Sunday, March 27, 2011

Intoducing CSS

What is CSS?

  • CSS stands for Cascading Style Sheets
  • It defines how the HTML display the elements
  • CSS can be External style sheets , Internal style sheet, & Inline styles
  • World Wide Web Consortium (W3C) created CSS.

Work made fast with CSS

CSS defines HOW HTML elements are to be displayed.

Styles are normally saved in external file (ex. mainstyle.css) with .css extension file. External style sheets enable you to change the layout of all the pages in a Web site, just by editing one single file!

Posted by alfieindesigns at 3/27/2011 07:57:00 PM 1 comments
Subscribe to: Comments (Atom)