HailPixel Color Picker is one of the easiest to use CSS color pickers I ever encountered. The color picking area is the whole screen and you choose the color by moving the cursor around : back and forth for Hue, up and down for Lightness and scrolling up and down for Saturation.
When it comes to designing a website or modifying an existing web design, having a knowledge of CSS or Cascading style sheet language is a must. In fact, CSS is one of the basic prerequisite for designing a visually appealing website. What’s good about CSS is that it is an easy language and you can get a hang of it by putting in some time and efforts. This post is about 30 best platforms that help you to know more about the wonderful language called CSS.
Source : Flickr
You will find some great and highly useful CSS references and CSS blogs. This will definitely help you learn more about the language as well as know some intricate details like how certain browsers react to certain CSS elements. You will also get to know about some services that can be of great help when it comes to generating code and cheat sheets for easy reference of selectors, pseudo-classes, and properties. Read further and enlighten yourself.
Starting this issue we’ll be introducing a new section to the blog, Design Inspiration. This section will consist of websites selected from our web gallery.
This tutorial will show you how to design a stylish, custom contact form for your website / portfolio from scratch. It will cover all the aspects of the design including the CSS and HTML coding and PHP programming.
The result will be a fully functional, personalized contact form and will look like this :
As you can see the contact form consists of 2 parts : one containing the contact information of the sender, labeled “Your contact information” and one part regarding the sender’s message, labeled “Your message“. Each part represents, as you will see below, a fieldset tag, and both are integrated in a form tag. The form also integrates a very simple and basic captcha system that you will see works pretty well, considering most spammers aren’t concerned about portfolio websites, so they don’t use advanced spam robots to trick these contact forms. A more advanced captcha system can be developed using a database and an array in PHP or can be found can be found on the internet (for example here).
For the HTML part you will need some basic knowledge of some HTML tags like : form, fieldset, label and input. As I said before the form is composed by 2 fieldsets. The first fieldset, “Your contact information“consists of 3 text inputs, namely “Name“, “E-mail“, “Subject“. As you can see in the code below we are using labels to name the inputs and p tags to align them 70px to the right (this can also be done via the CSS file).
The most important thing regarding the input tags is their name attribute. We named each input according to what it does, “name“, “email“, “subject“. Remember these as we will use them in the PHP file.
The second fieldset contains the message box defined by a textarea tag with 7 rows and 50 cols (these are attributes that define the textarea’s height and width) . It also includes the input for the captcha and a special kind of input, for the submit button. For this fieldset too it’s important to remember the name attributes of each input and textarea, namely “comments“, “spam” and “submit“.
<form action="contact.php" method="POST"> <fieldset> <legend>Your contact information</legend> <p style="margin-left:70px;"> <label><strong>Name:</strong></label>(required)<br /> <input type="text" name="name" value="" /> </p> <p style="margin-left:70px;"> <label><strong>E-mail:</strong></label>(required)<br /> <input type="text" name="email" value="" /> </p> <p style="margin-left:70px;"> <label><strong>Subject:</strong></label>(required)<br /> <input type="text" name="subject" value="" /> </p><br /> </fieldset> <fieldset> <legend>Your message</legend> <p style="margin-left:70px;"> <label><strong>Message:</strong></label>(required)<br /> <textarea name="comments" rows="7" cols="50" ></textarea> </p> <p style="margin-left:70px;">Security code : <strong>56728</strong><br /> <label><strong>Please enter the code you see above :</strong></label>(required)<br /> <input type="text" name="spam" value="" /> </p> <p style="margin-left:70px;"> <input class="button" name="submit" type="submit" value="Send" /> </p> </fieldset> </form>
As you can see the form calls a file called “contact.php“. This is the PHP file that we’ll actually use to send the email message.
We created the HTML form. It’s time to dress it up a little. We”ll do this by defining proprieties for the inputs and textareas in the CSS file.
As you can see we defined 3 proprieties for the inputs and textarea, one in the normal state, one on hover (when the mouse is over it) and one on focus (when you actually click on it and start typing text). The hover and focus states are identical in this case, but you can define them individually. As you can see when we hover over the inputs and textareas this image 
is loaded in the top right corner. Also the color of the border changes from #666666 to #000000. There are virtually unlimited possibilities on what you can in terms of style with these textareas and inputs and depends only on one’s creativity.
input, textarea {
border:1px solid #666666;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:1em;
margin:0;
padding:4px;
background:#fff;
}
input:focus, input:hover,textarea:focus, textarea:hover{
border: 1px solid #000;
background:url(../images/contact_crazyleaf.gif) top right no-repeat;
}
label {
margin:2px;
}
input {
width:300px;
}
.button {
margin:0 0 15px 0;
background:url(../images/div_back_contact.gif);
color:#000;
font-weight:bold;
width:310px;
}
Minor alignment adjustments are also a must so everything aligns perfectly. The contact form is the last thing standing between you and the client. You want it to be as perfect as it can be.
This is the really tricky part.
First off you need to create a file (with Notepad or other text editor) called contact.php You can name this file anyway you like, just remember the name of the file must be identical to what you input in your action attribute on your HTML form. Additionally you have to create 2 more HTML files, one called thankyou.html, and one error.html. The first file will be loaded if the information from the form has been send successfully and the second one in there were errors.
The PHP file consists of multiple parts. The first part defines some constants, like the email address the information will be sent to ($mailto), the URL that contains the HTML form that is collecting the information ($formurl), the URL of the thank you page ($thankyouurl), and the URL for the error page ($errorurl).
The second part reads the information sent by the HTML form. Remember when I said it’s important to remember the name attributes of each input and textarea? Well, this is where we use them. This part of the script takes each value inserted in each input and textarea and inserts it into a PHP variable.
The third part verifies with two PHP if instructions if the required fields have been completed and if the basic captcha has been entered correctly. If so the script passes to the final part, if not the error page will be displayed.
The forth and last part of the script composes the message and sends it to you (to the mail address defined in the first part of the script, in the configurable area).
<?
$mailto = 'name@name.com' ;
$subject = "Contact form message - Crazyleafdesign" ;
$formurl = "http://www.yoursite.com/contact.html" ;
$errorurl = "http://www.yoursite.com/error.html" ;
$thankyouurl = "http://www.yoursite.com/thankyou.html" ;
// -------------------- END OF CONFIGURABLE SECTION ---------------
$name = $_POST['name'] ;
$email = $_POST['email'] ;
$subject = $_POST['subject'] ;
$comments = $_POST['comments'] ;
$spam=$_POST['spam'] ;
$http_referrer = getenv( "HTTP_REFERER" );
if (!isset($_POST['email'])) {
header( "Location: $formurl" );
exit ;
}
if (empty($name) || empty($email) || empty($subject) || empty($comments) || $spam!="56728") {
header( "Location: $errorurl" );
exit ;
}
$name = strtok( $name, "\r\n" );
$email = strtok( $email, "\r\n" );
$subject = strtok( $subject, "\r\n" );
if (get_magic_quotes_gpc()) {
$comments = stripslashes( $comments );
}
$messageproper ="---------- Crazyleafdesign.com message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\n\n\nMessage : " . $comments;
mail($mailto, $subject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" );
header( "Location: $thankyouurl" );
exit ;
?>
That’s about it. The form is complete. You can see it in action on our site.
A custom contact form with an upload field will be available in one of our future tutorials.
Ever found yourself blank, with no inspiration or in a situation in which every idea you come up with seems not good enough ? Well, don’t worry. Every designer has these kind of moments.
CSS and Flash web galleries are great places to get inspiration from. Most galleries showcase loads of good and original concepts which can get you over these kind of moments.
CSS Beauty
Probably the oldest (it was started in 2004) and most known and appreciated CSS gallery. It’s maintained by Alex Giron, co-founder and senior consultant of nclud and includes besides the web gallery a job board, a design news section and one of the best CSS forums on the web.
Info :
Design Snack
Design Snack is our personal favorite (except CLD Web Gallery of course) CSS and Flash web gallery. It’s a user controlled web design showcase, meaning that the content is decided by the users, not by the admins.
Info :
CSS Mania
CSS Mania is another great web gallery with a 4 year tradition behind. Currently it indexes over 10000 websites and has over 13000 RSS subscribers. Started by Gabriel Segura, one of the founders of Blogs Media, featuring a powerful perl/php/mysql script mix, CSS Mania offers besides the web gallery a really nice job board.
Info :
CSS Remix
“A fresh blend of the best-designed Web 2.0 sites” as they call themselves, CSS Remix is one of the giants of the niche with over 13000 readers. It’s powered by the strong content management system Expresion Engine which makes CSS Remix one of the most reliable websites of its kind.
Info :
Best Web Gallery
Best Web Gallery is a really stylish CSS and Flash websites showcase. It’s maintained by Nick La, the founder of Web Designer Wall and N.Design-Studio . Powered by WordPress, this web gallery has quickly became one of the top names of the niche.
Info :
CSS Elite
CSS Elite, started in March 2006, is a great CSS gallery and web development resources website. Also powered by WordPress, what sets this gallery apart is the great collection of design resources, fit for any web developer.
Info :
2800+ Fans
8000+ Followers
7100+ SubscribersSubscribe for free to our monthly newsletter and receive in you inbox fresh design articles, freebies and resources.
Flat UI Pro contains a huge number of basic components, icons and glyphs, which simplify you work when it comes to new projrcts.
Don't waste time reinventing the wheel, use Flat UI Pro to get started. Get it now.