blogfreakz.com » Tutorials

jVectorMap: An Interactive jQuery Map

Marvin@Blogfreakz — Fri, 03 Feb 2012 12:43:33 +0000

Integrate an interactive map into your website with jVectorMap. This is a jQuery plugin which shows vector maps on HTML pages and applies SVG in all contemporary modern browsers ranging from ancient IE 6 to 8, Chrome, Opera, IE9, Safari, Firefox. All you have to do is connect Javascript and CSS files of plugin and that’s it! You can also change its parameters easily.

You can check out the full tutorial HERE.

Incoming search terms for the article:

How to Create YouTube Popup Buttons with CSS

Keith@Blogfreakz — Fri, 03 Feb 2012 11:53:12 +0000

Here’s a very cool CSS trick I found that will let you have the same buttons as those in YouTube’s footer! But first, lots of thanks to the following coders below:

Dennis Sa - for the jsbin of the matte buttons http://jsbin.com/efesot/6
Trevor Gerzen – for applying the transitions, and
Chris Coyier – for coming up with this neat trick and sharing it on the web.

HTML

As for the base styles for all three states (default, hover, active):

CSS

.button {

border: 1px solid #DDD;

border-radius: 3px;

text-shadow: 0 1px 1px white;

-webkit-box-shadow: 0 1px 1px #fff;

-moz-box-shadow: 0 1px 1px #fff;

box-shadow: 0 1px 1px #fff;

font: bold 11px Sans-Serif;

padding: 6px 10px;

white-space: nowrap;

vertical-align: middle;

color: #666;

background: transparent;

cursor: pointer;

}

.button:hover, .button:focus {

border-color: #999;

background: -webkit-linear-gradient(top, white, #E0E0E0);

background: -moz-linear-gradient(top, white, #E0E0E0);

background: -ms-linear-gradient(top, white, #E0E0E0);

background: -o-linear-gradient(top, white, #E0E0E0);

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

}

.button:active {

border: 1px solid #AAA;

border-bottom-color: #CCC;

border-top-color: #999;

-webkit-box-shadow: inset 0 1px 2px #aaa;

-moz-box-shadow: inset 0 1px 2px #aaa;

box-shadow: inset 0 1px 2px #aaa;

background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);

background: -moz-linear-gradient(top, #E6E6E6, gainsboro);

background: -ms-linear-gradient(top, #E6E6E6, gainsboro);

background: -o-linear-gradient(top, #E6E6E6, gainsboro);

}

NOTE: This is short tutorial just teaches you how to mimic the look and not the function. So if you want to be able to include menu functionality on the buttons (like YouTube does) you can check out this link and try incorporating the code there with the one here.

Demo

Download Files

Incoming search terms for the article:

TinyTips jQuery Plugin

Marvin@Blogfreakz — Fri, 03 Feb 2012 06:14:01 +0000

Web designer Mike Merritt designed a jQuery plugin that will give more definition on your web site by adding tooltips to any element on a page. You can check out his work in this DEMO.

Download the development version and production version zip files.

HTML

tinyTips 1.0

Testing tinyTips

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean ut nunc metus, gravida tincidunt libero.

Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus.

Maecenas vestibulum nibh non nibh viverra posuere. Sed tristique eleifend elit sit amet varius.

jQuery/Javascript

Place the following at the head of your page as you include the TinyTips and jQuery.

To add tooltips, use the following:

Do provide a tooltip style and content attribute.

Add the following to the stylesheet. You can create your own style by naming the class .yournameTip and use your name as the tip style. By using the dev version, you can also modify the markup for tooltips.

.lightTip { width: 342px; }

.lightTip .content { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }

.lightTip .bottom { height: 14px; background: url(../images/notch-white.png) top center no-repeat; }

.yellowTip { width: 342px; }

.yellowTip .content { width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }

.yellowTip .bottom { height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }

.orangeTip { width: 342px; }

.orangeTip .content { width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }

.orangeTip .bottom { height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }

.redTip { width: 342px; }

.redTip .content { width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }

.redTip .bottom { height: 14px; background: url(../images/notch-red.png) top center no-repeat; }

.greenTip { width: 342px; }

.greenTip .content { width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }

.greenTip .bottom { height: 14px; background: url(../images/notch-green.png) top center no-repeat; }

.blueTip { width: 342px; }

.blueTip .content { width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }

.blueTip .bottom { height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }

.purpleTip { width: 342px; }

.purpleTip .content { width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }

.purpleTip .bottom { height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }

.darkTip { width: 342px; }

.darkTip .content { width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }

.darkTip .bottom { height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }

Create a jQuery Star Comment Rating System

Marvin@Blogfreakz — Tue, 31 Jan 2012 12:16:15 +0000

The commenting system just became more fun for users! Created by eligeske, this animated jQuery star commenting system is a great way to rate your posts. Add this to your website and see your visitor activity increase.

Download the ZIP FILE.

HTML (star_rating.html)

JQuery-Star Comment Rating

0.5

1.0

1.5

2.0

2.5

3.0

3.5

4.0

4.5

5.0

not rated

–

edit

jQuery/Jvascript (star_rating.js)

/*

* Written by eligeske

* downloaded from eligeske.com

* have fun. nerd.

*/

$(document).ready(function(){

// hover

$('#rating_btns li').hover(function(){

$rating = $(this).text();

$('#rating_on').css('width', rateWidth($rating));

});

// mouseout

$('#rating_btns li').mouseout(function(){

$rating = $('#rating').text();

if($rating == "not rated"){

$('#rating_on').css('width', "0px");

else{

$('#rating_on').css('width', rateWidth($rating));

});

//click

$('#rating_btns li').click(function(){

$rating = $(this).text();

$('#rating').text($rating);

$('#rating_output').val($rating);

$pos = starSprite($rating);

$('#small_stars').css('background-position', "0px " + $pos );

$('#rating_btns').hide();

$('#rating_on').hide();

$('#rated').fadeIn();

});

//edit

$('#rate_edit').click(function(){

$('#rated').hide();

$('#rating_btns').fadeIn();

$('#rating_on').fadeIn();

});

function rateWidth($rating){

$rating = parseFloat($rating);

switch ($rating){

case 0.5: $width = "14px"; break;

case 1.0: $width = "28px"; break;

case 1.5: $width = "42px"; break;

case 2.0: $width = "56px"; break;

case 2.5: $width = "70px"; break;

case 3.0: $width = "84px"; break;

case 3.5: $width = "98px"; break;

case 4.0: $width = "112px"; break;

case 4.5: $width = "126px"; break;

case 5.0: $width = "140px"; break;

default: $width = "84px";

return $width;

function starSprite($rating){

$rating = parseFloat($rating);

switch ($rating){

case 0.5: $pos = "-11px"; break;

case 1.0: $pos = "-22px"; break;

case 1.5: $pos = "-33px"; break;

case 2.0: $pos = "-44px"; break;

case 2.5: $pos = "-55px"; break;

case 3.0: $pos = "-66px"; break;

case 3.5: $pos = "-77px"; break;

case 4.0: $pos = "-88px"; break;

case 4.5: $pos = "-99px"; break;

case 5.0: $pos = "-110px"; break;

default: $pos = "-77px";

return $pos;

});

Incoming search terms for the article:

Animated CSS3 Multilevel Menu with Transition

Marvin@Blogfreakz — Mon, 30 Jan 2012 08:06:45 +0000

Script-tutorials.com gives us this cool UL-LI-based multilevel menu, with transition and animation effect using CSS3. You can create this menu in 2 easy steps.

Click on the above image to view the demo.

You may also download the full pack HERE.
Step 1: HTML

Index.html

CSS3 multilevel menu with transition and animation | Script Tutorials

CSS3 multilevel menu with transition and animation

Back to original tutorial on Script Tutorials

Parent link #1

Sub #11

Sub #12

Sub #13

Sub #14

Parent link #2

Sub #21

Sub #22

Sub #23

Sub #24

Parent link #3

Sub #31

Sub #32

Sub #33

Sub #34

Parent link #4

Sub #41

Sub #42

Sub #43

Sub #44

Step 2: CSS

Css/menu.css

ul#nav {
    border: 1px solid #454545;
    display: block;
    height: 400px;
    margin: 0;
    padding: 15px;
    width: 160px;

    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;

    background: -moz-linear-gradient(#f1f7ff, #d9e1ec);
    background: -ms-linear-gradient(#f1f7ff, #d9e1ec);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f7ff), color-stop(100%, #d9e1ec));
    background: -webkit-linear-gradient(#f1f7ff, #d9e1ec);
    background: -o-linear-gradient(#f1f7ff, #d9e1ec);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec')";
    background: linear-gradient(#f1f7ff, #d9e1ec);
}

@-moz-keyframes custom_effect {
    0% {
        background:rgba(255, 255, 255, 0.0);
        height: 60px;
    }
    33% {
        background:rgba(255, 255, 255, 0.0);
        height: 160px;
    }
    66% {
        background:rgba(255, 255, 255, 1.0);
    }
    100% {
        background:rgba(190, 220, 255, 0.8);
        height: 135px;
    }
}
@-webkit-keyframes custom_effect {
    0% {
        background:rgba(255, 255, 255, 0.0);
        height: 60px;
    }
    33% {
        background:rgba(255, 255, 255, 0.0);
        height: 160px;
    }
    66% {
        background:rgba(255, 255, 255, 1.0);
    }
    100% {
        background:rgba(190, 220, 255, 0.8);
        height: 135px;
    }
}
ul#nav li {
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;

    background-color:transparent;
    border: 1px solid #454545;
    display: block;
    height: 60px;
    line-height: 60px;
    margin-bottom: 15px;
    overflow: hidden;
}
ul#nav li:hover {
    -moz-animation-name: custom_effect;
    -moz-animation-duration: 0.4s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: custom_effect;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    background:rgba(190, 220, 255, 0.8);
    height: 135px;
}
ul#nav a {
    border-style: none;
    border-width: 0;
    color: #181818;
    cursor: pointer;
    float: left;
    font-size: 13px;
    font-weight: bold;
    line-height: 30px;
    margin-top: 100px;
    padding-left: 18px;
    text-align: left;
    text-decoration: none;
    text-shadow: 0 1px 1px #FFFFFF;
    vertical-align: middle;

    -moz-transition: all 0.1s 0.4s;
    -ms-transition: all 0.1s 0.4s;
    -o-transition: all 0.1s 0.4s;
    -webkit-transition: all 0.1s 0.4s;
    transition: all 0.1s 0.4s;
}

Incoming search terms for the article:

css text animation

Auto-Convert Text To Different Cases Using jQuery

Keith@Blogfreakz — Fri, 27 Jan 2012 14:41:19 +0000

jQuery By Example’s author created this neat plugin for automatically converting your text to upper, lower, title, and pascal case. The auto feature is just half of it, the other half is that it converts your text in REAL-TIME!

Check out the live demo here or take a look at its code here.

First thing you need to do is reference the necessary jQuery file and plugin by inserting this into your code:

You can use this plugin for the textbox element; all you need to do is to set the case which you want to implement by setting the “caseValue” property to upper, lower, title, or pascal. (NOTE: All values are in lower case).

Your code should then look like one of the following:

Upper case:

$(function() {

$(“#txtUpper”).Setcase({caseValue : ‘upper’});

});

Lower case:

$(function() {

$(“#txtLower”).Setcase({caseValue : ‘lower’});

});

Title case: Only the very first letter of the entire text is capitalized.

$(function() {

$(“#txtTitle”).Setcase({caseValue : ‘title’});

});

Pascal case: Every first letter of the word is capitalized.

$(function() {

$(“#txtPascal”).Setcase({caseValue : ‘pascal’});

});

Below is the code for the plugin, which takes advantage of the keypress and blur method:

(function($) {

//Create plugin named Setcase

$.fn.Setcase = function(settings) {

// Defaults

var config = {

caseValue: ‘Upper’

};

//Merge settings

if(settings) $.extend(config, settings);

this.each(function() {

//keypress event

$(this).keypress(function(){

if(config.caseValue == “upper”)

{

var currVal = $(this).val();

$(this).val(currVal.toUpperCase());

}

else if(config.caseValue == “lower”)

{

var currVal = $(this).val();

$(this).val(currVal.toLowerCase());

}

else if(config.caseValue == “title”)

{

var currVal = $(this).val();

$(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());

}

else if(config.caseValue == “pascal”)

{

var currVal = $(this).val();

currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {

return txtVal.toUpperCase();

});

$(this).val(currVal);

}

});

//blur event

$(this).blur(function(){

if(config.caseValue == “upper”)

{

var currVal = $(this).val();

$(this).val(currVal.toUpperCase());

}

else if(config.caseValue == “lower”)

{

var currVal = $(this).val();

$(this).val(currVal.toLowerCase());

}

else if(config.caseValue == “title”)

{

var currVal = $(this).val();

$(this).val(currVal.charAt(0).toUpperCase() + currVal.slice(1).toLowerCase());

}

else if(config.caseValue == “pascal”)

{

var currVal = $(this).val();

currVal = currVal.toLowerCase().replace(/\b[a-z]/g, function(txtVal) {

return txtVal.toUpperCase();

});

$(this).val(currVal);

}

});

};

})(jQuery);

Hope you enjoy trying this plugin out on your site. Cheers!

Incoming search terms for the article:

Create a Flexible jQuery Data Heat Map

Keith@Blogfreakz — Thu, 26 Jan 2012 10:45:06 +0000

Sometimes reading a table’s long and numerous columns can be quite a very cumbersome and tedious task. You want your readers to immediately see the whole picture once they glance at your table’s contents.

This is where Design Chemical’s Data Heat Map can help. When you’re dealing with hierarchical and/or numeric data, or data with a maximum and minimum value, the heat map adds varying shades of a particular color, making it easier for the viewer to quickly spot the highest and lowest value. It can be a nice alternative for sorting data in ascending or descending order because you eliminate the user’s need to click on a button just to rearrange the data in a particular column.

The two main objectives of this tutorial are:

To capture and statistically analyze all data points
To provide a method of grouping the data and be able to identify what formatting should be applied

Let’s start with the usual basic HTML markup. We’ll just keep the code short by only including one row of data with the CSS classes but feel free to add as many rows as you like if you want to make it look like the one in the demo page or the image sample above:

HTML

Title data 1 data 2 data 3 data 4 data 5 data 6

Wanda 25 55 26 19 39 21

Let’s go over the code first part by part.

First thing we’ll do is capture and analyze the data, meaning we have to find out the largest value within the range. We do this by creating an array of all the data points and then returning the maximum value:

Next is to group the data points. We’ll be using the percentage (%) of each value from the max value to find exactly where the data point is positioned on a scale of 1-100.

This is critical to create the heat map as this scale is what we’ll use to dynamically generate the CSS style. You can adjust the max number (100) to suit your data and style of heat map. In addition, we only want to use integers so we also include the rounding off of the results.

n = 100; // Declare the number of groups

// Loop through each data point and calculate its % value

$(‘.heat-map tbody td’).not(‘.stats-title’).each(function(){

var val = parseInt($(this).text());

var pos = parseInt((Math.round((val/max)*100)).toFixed(0));

});

The above code is still incomplete since we still have to add the actual formatting into the same loop.

To create the heat map effect we are basically going to use background color.

Technically there is no restriction on how you apply the styles, and background color is only one option. The code is fairly flexible and some minor adjustments can be applied to font size, container size, background image, etc.

Color is easy because we can directly calculate each color value between 2 defined colous – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate color we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.

// Define the ending colour, which is white

xr = 255; // Red value

xg = 255; // Green value

xb = 255; // Blue value

// Define the starting colour #f32075

yr = 243; // Red value

yg = 32; // Green value

yb = 117; // Blue value

// Calculate a specific colour point

// pos – calculated in the earlier code identifies where on the scale the data point is

red = parseInt((xr + (( pos * (yr – xr)) / (n-1))).toFixed(0));

green = parseInt((xg + (( pos * (yg – xg)) / (n-1))).toFixed(0));

blue = parseInt((xb + (( pos * (yb – xb)) / (n-1))).toFixed(0));

// Once we have our RGB values we combine them to create our CSS code

clr = ‘rgb(‘+red+’,'+green+’,'+blue+’)';

Finally we apply the new RGB value (heat map style) to each data point by setting the background colour of the table cell.

$(this).css({backgroundColor:clr});

Below are the combined parts of the code to create the complete heat map function.

Complete jQuery code

If you want to completely change the look (i.e. the colors of the cells) of the heat map, all you have to do is change the start and end color RGB values. Have fun experimenting with the values and customizing the look of your tables!

Download Source Files

Incoming search terms for the article:

How to Create Polaroid Images with CSS3

Marvin@Blogfreakz — Thu, 26 Jan 2012 04:23:40 +0000

Create a Polaroid effect with your images using CSS3! Mark of Zurb.com teaches us how to do it in this uber-cool tutorial.

Click on the above image to view the demo.

This is done with only CSS and no Javascript, with no actual text used on the images. It works on a grid of linked images that can randomly switch, just like flipping through a stack of photos. You can use any images you want to set the groundwork.

CSS

ul.polaroids a:after {

content: attr(title);

}

CSS to randomly rotate the images

/* By default, we tilt all our images -2 degrees */

ul.polaroids a {

-webkit-transform: rotate(-2deg);

-moz-transform: rotate(-2deg);

}

/* Rotate all even images 2 degrees */

ul.polaroids li:nth-child(even) a {

-webkit-transform: rotate(2deg);

-moz-transform: rotate(2deg);

}

/* Don’t rotate every third image, but offset its position */

ul.polaroids li:nth-child(3n) a {

-webkit-transform: none;

-moz-transform: none;

position: relative;

top: -5px;

}

/* Rotate every fifth image by 5 degrees and offset it */

ul.polaroids li:nth-child(5n) a {

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

position: relative;

right: 5px;

}

/* Keep default rotate for every eighth, but offset it */

ul.polaroids li:nth-child(8n) a {

position: relative;

top: 8px;

right: 5px;

}

/* Keep default rotate for every eleventh, but offset it */

ul.polaroids li:nth-child(11n) a {

position: relative;

top: 3px;

left: -5px;

}

For the hover effect

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */

ul.polaroids a:hover {

-webkit-transform: scale(1.25);

-moz-transform: scale(1.25);

position: relative;

z-index: 5;

}

Final details

/* Add drop shadows and smooth out the transition (Safari only) */

ul.polaroids a {

-webkit-transition: -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

}

/* On hover, darken the shadows a bit */

ul.polaroids a {

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

}

Note: This requires Safari 4.x and Chrome 5 for you to see the full effect. If you use Firefox, the enlarging transition can’t be viewed.

Incoming search terms for the article:

Create A Grayscale Image Hover In HTML5

Keith@Blogfreakz — Wed, 25 Jan 2012 10:08:26 +0000

It used to be that shifting an image from grayscale to colored and vice-versa as you hover over it required 2 copies of the said image — one in grayscale and the other in color. But thanks to Darcy Clarke for the JavaScript & HTML 5 grayscale in this tutorial, this feat is easier and faster because the grayscale image is generated from the original source.

Click on the above image for the demo.

Steps:

Get a copy of jquery.js
Paste the code below onto your web page. What the code will do is look for the target images (.item img) and then generate a grayscale version.

Be sure to set your target image (eg: .post-img, img, .gallery img, etc.)

TIP: You may change the transition speed by adjusting the highlighted number in the code (ie. 1000 = 1 second)

Provided that JavaScript is enabled, this will work on any browser that supports HTML5 such as Safari, Chrome, and Firefox. Otherwise, the image will revert to its original colored state.

Developer’s Note: if it doesn’t work with Firefox and Chrome locally, you need to put the HTML file on a web server.

Incoming search terms for the article:

Make Blinking Neon Forms with CSS3 and jQuery

Keith@Blogfreakz — Mon, 23 Jan 2012 13:12:25 +0000

This cool form effect has the usual attributes we enjoy — rounded corners, stroke edges and other CSS-generated qualities. But thanks to web developer Rakesh Menon, this one’s got another thing up its sleeve: it’s got a glowing neon border that pulsates!

Here’s the demo for you to really appreciate it. Click here for the source files (/zip).

Now let’s start the tutorial with the xHTML to setup the layout.

xHTML

Form Tutorial

If you would rather use Google’s API instead of downloading a copy of jQuery, you can just replace this part of the code “” with the one below:

Once you’ve decided where to get the source for your jQuery, let’s move on to CSS.

CSS

margin:0;

padding:0;

}

textarea, input{

outline:none;

}

body{

background:#3D3D3D;

}

#page-wrap{

width:350px;

min-height:500px;

height:auto;

margin:0 auto;

position:relative;

padding-top:50px;

font:15px Arial;

}

#myform{

width:375px;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

margin:0 auto;

position:relative;

}

#myform label{

top:10px;

position:relative;

color:white;

}

.field{

background:gray;

padding:15px 15px 0 10px;

height:50px;

width:350px;

}

#myform div:first-child{

-moz-border-radius-topleft: 8px;

-moz-border-radius-topright: 8px;

-webkit-border-top-left-radius: 8px;

-webkit-border-top-right-radius: 8px;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

#myform div:last-child{

-moz-border-radius-bottomleft: 8px;

-moz-border-radius-bottomright: 8px;

-webkit-border-bottom-left-radius: 8px;

-webkit-border-bottom-right-radius: 8px;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

}

.area{

padding:15px 15px 0 10px;

min-height:195px;

}

.inputfield{

padding:0 10px 0 10px;

float:right;

width:200px;

font:15px Arial;

border:2px aqua inset;

-moz-border-radius: 8px; /* FF1+ */

-webkit-border-radius: 8px; /* Saf3+, Chrome */

border-radius: 8px; /* Opera 10.5, IE 9 */

}

.textfield{

height:25px;

padding-top:5px;

}

.textarea1{

padding-top:10px;

padding-bottom:10px;

height:150px;

max-height:200px;

max-width:250px;

}

If you take a look at the result at this point you’ll notice that you still have the default look for the submit button. If you want to change it, just copy/paste and add this code in your CSS.

.submitbutton{

border: 0px;

float:right;

width:75px;

height:40px;

font:20px Arial;

position:relative;

top:20px;

right:10px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

-webkit-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

background-image: -moz-linear-gradient(top, white, #3cdfdf); /* FF3.6 */

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf)); /* Saf4+, Chrome */

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’); /* IE6,IE7 */

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’white’, EndColorStr=’#3cdfdf’)”; /* IE8 */

}

.submitbutton:hover{

background: #3cdfdf;

color:white;

}

The last piece of CSS code below will add the glowing effect to the neon edges of your input boxes. This part (@-webkit-keyframes) by the way, only works in browsers using the Webkit layout engine like Chrome and Safari:

@-webkit-keyframes pulsate {

0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }

25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset }

50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset }

75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset }

100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }

}

.inputfield:focus{

-webkit-animation-name: pulsate;

-webkit-animation-duration: 1.5s;

-webkit-animation-iteration-count: infinite;

-moz-box-shadow: 0px 0px 30px #3cdfdf;

box-shadow: 0px 0px 30px #3cdfdf;

}

And lastly, we’ll work on the jQuery. This part of the tutorial can actually be considered as optional since it simply adds a black background to set off the highlighted input field (see comparison image below).

If you’d like to include it in your design then just copy/paste this code in to your .js file:

$(document).ready(function(){

var globalParent=null;

var mouse_is_inside=false;

/*The snippet below is activated when an inputfield is focused*/

$(‘.inputfield’).focus(function(){

globalParent=$(this).parent(‘div’);

globalParent.click();

});

/*This following part will be activated when the inputfield loses focus*/

$(‘.inputfield’).blur(function(){

globalParent.click();

});

/*Following part will be activated when the user clicks anywhere inside

the container div of the inputfield*/

$(‘.field’).click(function(){

if(!($(this).is(‘.dummy’))){

$(‘.dummy’).css(‘background-color’,'gray’);

$(‘.dummy label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

$(this).css(‘background-color’,'black’);

$(this).children(‘label’).css(‘color’,'#3cdfdf’);

$(this).addClass(‘dummy’);

}

});

/*The following code checks time and again whether the mouse is inside the form or not*/

$(‘form’).hover(function(){

mouse_is_inside=true;

function(){

mouse_is_inside=false;

}

);

/*If user clicks anywhere outside the form, all highlighting is removed*/

$(‘body’).click(function(){

if(!mouse_is_inside)

{

$(‘.field’).css(‘background-color’,'gray’);

$(‘.field label’).css(‘color’,'white’);

$(‘.dummy’).removeClass(‘dummy’);

}

});

And that concludes this tutorial. Try to run or open your HTML and see if it’ll work on your browser. I personally have only tested it in the latest version of Chrome and IE9, and the blinking effect doesn’t work in IE9. Yet. Still, I hope you enjoy this one!