For celebrating Valentine’s Day, this is a great tutorial from Web Froze where you get to use pure CSS3 to create a nice heart shape for your web design graphics. Below are the following codes to achieve this.

CSS

.heart-shape {

position: relative;

width: 100px;

height: 90px;

margin:10px 0px;

}

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: #fd2d8a;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

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

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

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

.heart-shape:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

HTML

<div class ="heart shape"></div>
 

You may download a copy of the light version here or the full version here.

Below are snippets of the plugin:

CSS

#magazine{

width:800px;

height:400px;

}

#magazine .turn-page{

width:400px;

height:400px;

background-color:#ccc;

}

HTML

<div id='magazine'>

<div> Page   1 </div>

<div> Page   2 </div>

<div> Page   3 </div>

</div>

jQuery

$('#magazine').turn();

That’s it! The plugin requires jQuery 1.7 or later and only weighs in at 15K. It also works on tablets and smartphones.

Incoming search terms for the article:

• jquery multi book flip
• jquery book
• page flip effect html5
• jquery page flip demo
• jquery book flip
• animated page flip demo in jquery
• jquery
• javascript pageflip on ios
• how to use turn js
• animated page turns of a book using jquery

Click on the image for the demo.

Download the zip file.

CSS

.slider.default

{

background-color: #D2DBEC;

border: 1px solid #299BC9;

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;

width: 200px;

height: 4px;

background-image: -o-linear-gradient(#ADC7EB, #D2DBEC);

}

.inner.default

{

background: #299BC9;

-moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

-webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;

}

.draghandle.default

{

width: 8px;

height: 20px;

background-color: #299BC9;

}

.draghandle.default.selected

{

background-color: #ADC7EB;

}

The above code is for the default theme, and you can change it into your theme name. Aside from the default theme, you can choose from the following theme colors: simple, blue, steel, green, dark-green, orange and red.

When your theme is all set, you can use it like so:

$('#my-slider').jqslider({theme:'YOUR THEME NAME HERE'});

Add the following in the head section of your HTML file

1. Add a reference to latest jQuery script
2. Add a reference to jqslider.js
3. Add a reference to jqslider.css

Add block element (div) within body of HTML and assign id and call jqslider initialize function.

<div id="jqslider"></div>

<script type="text/javascript">

$(document).ready(function() {

$('#jqslider').jqslider({ theme:'steel' });

});

</script>

Incoming search terms for the article:

• blogger jQuery
• jquery chart fillcolor
• jquery multi range slider
• jquery multi slider range

• 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

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:

• popup white css
• youtube icons
• button popup css
• youtube
• how to design button like youtube with css
• free css web popup design
• css3 free template
• css youtube style button
• Cool 61 css
• youtube style popup buttons

Download the ZIP FILE.

HTML (star_rating.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JQuery-Star Comment Rating</title>

<script type="text/javascript" src="js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/star_rating.js"></script>

<style type="text/css">

#rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repeat; border: 1px solid #F9BA0D; width: 140px; height: 23px; text-align: left; margin-left: 6px;}

#rating_on { background: url(images/rating_onbackground.jpg) top left no-repeat; width: 0px; height: 21px; position: relative; z-index: 50; top: -21px; }

#rated { display: none; width: 138px; padding: 3px 0px 3px 2px; height: 23px; background-color: #1E1D1C; height: 17px;font-size: 11px;color: #FFC910;}

#rated div { display: block; float: left; }

#rating { font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFC910; padding-left: 3px; width: 22px; }

#small_stars { height: 11px; width: 69px; background-image: url(images/stars_small_sprite.jpg); background-position: 0px -11px; font-size:1px; line-height: 11px; margin-top:3px; }

#rate_edit { line-height: 17px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #FFF; padding-left: 9px; cursor: pointer; }

#rate_edit:hover { text-decoration: underline; }

#rating_btns { position: relative; z-index: 100; width: 140px; height: 21px;}

#rating_btns ul, #rating_btns li { padding: 0; margin: 0; }

#rating_btns li { float: left; width: 14px; height: 21px; display: block; font-size: 1px; cursor: pointer; color: #1E1D1C;

}

</style>

</head>

<body>

<div id="rating_cont">

<div id="rating_btns">

<ul>

<li>0.5</li>

<li>1.0</li>

<li>1.5</li>

<li>2.0</li>

<li>2.5</li>

<li>3.0</li>

<li>3.5</li>

<li>4.0</li>

<li>4.5</li>

<li>5.0</li>

</ul>

</div>

<div id="rating_on" >&nbsp;</div>

<div id="rated">

<div id="rating" style="height: 17px; line-height: 17px;">not rated</div>

<div> &#8211; &nbsp;</div>

<div id="small_stars">&nbsp;</div>

<div id="rate_edit">edit</div>

</div>

</div>

<input type="hidden" id="rating_output" name="rating_output" />

</body>

</html>

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:

• jquery rating
• 5 star vote jquery
• rating jquery
• jquery stars background
• jquery star rating
• jquery ratings
• jquery rating tool
• jquery rating system with comments
• jquery rating system
• jquery rating script

Click on the above image to view the demo.

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

Index.html

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="utf-8" />

<title>CSS3 multilevel menu with transition and animation | Script Tutorials</title>

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

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

</head>

<body>

<header>

<h2>CSS3 multilevel menu with transition and animation</h2>

<a href="http://www.script-tutorials.com/css3-multilevel-menu-with-transition-and-animation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

</header>

<div>

<ul id="nav">

<li>

<a href="#">Parent link #1</a>

<a href="#">Sub #11</a>

<a href="#">Sub #12</a>

<a href="#">Sub #13</a>

<a href="#">Sub #14</a>

</li>

<li>

<a href="#">Parent link #2</a>

<a href="#">Sub #21</a>

<a href="#">Sub #22</a>

<a href="#">Sub #23</a>

<a href="#">Sub #24</a>

</li>

<li>

<a href="#">Parent link #3</a>

<a href="#">Sub #31</a>

<a href="#">Sub #32</a>

<a href="#">Sub #33</a>

<a href="#">Sub #34</a>

</li>

<li>

<a href="#">Parent link #4</a>

<a href="#">Sub #41</a>

<a href="#">Sub #42</a>

<a href="#">Sub #43</a>

<a href="#">Sub #44</a>

</li>

</ul>

</div>

</body>

</html>

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
• css3 menus

Below are the steps on how to achieve this effect.

1. XHTML

The markup is pretty much straight forward and has few divs and images.

<div id="main">

<div id="iphone">

<div id="webpage">

<img src="img/webpage.png" width="499" height="283" alt="Web Page" />

<div id="retina"></div>

</div>

</div>

</div>

This is a simulation of what you will achieve with the above code.

2. CSS

This is the styling for the retina divs, iPhone and webpage effect.

Styles.css

#iphone{
        /* The iphone frame div */
        width:750px;
        height:400px;
        background:url('img/iphone_4G.png') no-repeat center center;
}

#webpage{
        /* Contains the webpage screenshot */
        width:499px;
        height:283px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-141px 0 0 -249px;
}

#retina{
        /* The Retina effect */
        background:url('img/webpage.png') no-repeat center center white;
        border:2px solid white;

        /* Positioned absolutely, so we can move it around */
        position:absolute;
        height:180px;
        width:180px;

        /* Hidden by default */
        display:none;

        /* A blank cursor, notice the default fallback */
        cursor:url('img/blank.cur'),default;

        /* CSS3 Box Shadow */
        -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
        -webkit-box-shadow:0 0 5px #777;
        box-shadow:0 0 5px #777, 0 0 10px #aaa inset;

        /* CSS3 rounded corners */
        -moz-border-radius:90px;
        -webkit-border-radius:90px;
        border-radius:90px;
}

#retina.chrome{
        /* A special chrome version of the cursor */
        cursor:url('img/blank_google_chrome.cur'),default;
}

#main{
        /* The main div */
        margin:40px auto;
        position:relative;
        width:750px;
}

3. jQuery

script.js

$(document).ready(function(){

        /* This code is executed on the document ready event */

        var left       = 0,
               top            = 0,
               sizes   = { retina: { width:190, height:190 },
                               webpage:{ width:500, height:283 } },
               webpage = $('#webpage'),
               offset  = { left: webpage.offset().left, top: webpage.offset().top },
               retina  = $('#retina');

        if(navigator.userAgent.indexOf('Chrome')!=-1)
        {
               /*      Applying a special chrome curosor,
                       as it fails to render completely blank curosrs. */

               retina.addClass('chrome');
        }

        webpage.mousemove(function(e){

               left = (e.pageX-offset.left);
               top = (e.pageY-offset.top);

               if(retina.is(':not(:animated):hidden')){
                       /* Fixes a bug where the retina div is not shown */
                       webpage.trigger('mouseenter');
               }

               if(left<0 || top<0 || left > sizes.webpage.width ||
                       top > sizes.webpage.height)
               {
                       /*      If we are out of the bondaries of the
                               webpage screenshot, hide the retina div */

                       if(!retina.is(':animated')){
                               webpage.trigger('mouseleave');
                       }
                       return false;
               }

               /*      Moving the retina div with the mouse
                       (and scrolling the background) */

               retina.css({
                       left                           : left - sizes.retina.width/2,
                       top                                   : top - sizes.retina.height/2,
                       backgroundPosition     : '-'+(1.6*left)+'px -'+(1.35*top)+'px'
               });

        }).mouseleave(function(){
               retina.stop(true,true).fadeOut('fast');
        }).mouseenter(function(){
               retina.stop(true,true).fadeIn('fast');
        });
});

Angelov also provided a zip file which you may download here.

Incoming search terms for the article:

• retina chrome
• apple retina
• retina apple wordpress
• jquery apple effect
• jquery apple color picker
• jquery apple
• iphone video display css template
• html5 template for iphone retina
• carousel jquery apple
• retina css3

Let’s being with the HTML markup:

As you can see, the code is pretty much straightforward. We have the input element “button” to create the sticky notes, and a container <div> with an id (“board”) in which to place them. This also includes the reference tags to the CSS style sheets and the JavaScript file.

The HTML for our posticks will be as follows:

Each postick <div> will have a subdiv called “toolbar” so we will have a place for us to put a close (x) button in. We’ll also have another subdiv called “editable” with an HTML5 attribute “contenteditable”; this will contain the text that the user will input in the sticky note.

And now for the CSS part, which is a lengthy one:

Like the HTML code, the CSS code is also straightforward. We first reset the body tag, then we stylize the button (input) that creates the posticks, and then stylize the postick itself and the elements inside it (i.e. the delete button, toolbar, etc.).

And now for the JavaScript:

I believe the JavaScript is pretty much self-explanatory since it also already contains some notes about each part of the code, and especially if you already know enough about JavaScript.

Anyway, you can check the demo of the tutorial here. Also, you can get the full source code (.zip) here. I hope you enjoy creating and using your posticks!

Incoming search terms for the article:

• sticky div jquery
• jquery sticky notes
• sticky notes using jquery with storing facility
• jquery html5 lightbox
• ajax sticky notes script
• sticky notes windows with html5 and css3
• jquery sticky note script
• jquery sticky notes script
• node js file uploader html5
• php script sticky notes

Indonesian artist Hidayat Sagita made this tutorial in which the goal is to use CSS3 instead of images, so CSS3 properties replace the following Photoshop techniques:

1. -webkit-gradient or –moz-linear-gradient property is used for color gradient
2. Border property for stroke.
3. –webkit-box-shadow, -moz-box-shadow or box shadow property for drop shadow
4. –webkit-border-radius, -moz-border-radius, border-radius for rounded corner
5. For a smooth bevel, the border property is used on one side or more with thickness of 1 pixel
6. Stacked layer for layer masking

Demo
Download

Some of this player’s properties are only supported by few browsers, but it’s so powerful that minimal use of images is required. Also, jazzing up your website with a player like this is totally worth it, so a browser upgrade won’t hurt at all.

Incoming search terms for the article:

• css3 music
• css3 player
• cool website design
• create a cool music player
• create html5 audio player
• how to make a music player for the web
• intext:website -intext:you must be logged in and intext:leave a reply -intitle:leave a reply ~musique
• music in css3
• musikplaer coole designs

We all know that HTML5 is the future of web development. The only problem is some people still use older versions of web browsers that don’t support this language yet. So for that, here’s a script that will force those browsers to recognize the new tags introduced by HTML5 such as <article> and <header>.

Download the script (.js file) here .

Then link it (the .js script) to your page by inserting this code below in the <head> portion of the HTML.

Test browser for CSS3 support

Here’s a nice code that you can modify to see if a browser supports a particular CSS3 property. Just remember that every time you pass the property, you should take out or omit the dash so like say instead of “border-radius”, pass “BorderRadius”, etc.

Preloading images

Spare your visitors from having to wait a few seconds for a large image to load up every time they click on a thumbnail. With this code you can just preload the images in the background so they’re ready to be displayed.

You can check out this code’s source page to get a better understanding on the code’s step-by-step process.

Add class to <body> tag if JavaScript is enabled

What this code simply does is just add a hasJS class in the <body> tag if it detects that JavaScript is enabled on the client’s browser setting.

$('body').addClass('hasJS');

Disable the “Enter” key in forms

This fourth and last one’s not really about making your web page more responsive but I thought I’d include it anyway since I think that this can be a very helpful code to your web site’s visitors, especially if they’re viewing or filling up a form page. This code will prevent any unwanted or accidental form submission by disabling the function of the “Enter” key.

Incoming search terms for the article:

• jquery responsive box
• responsive lightbox jquery
• html5 jquery snippets
• jquery force older browsers to use Html5 tags
• box jquery responsive web design
• jquery под responsive design box
• jquery 브라우저 이미지 캐쉬
• lightbox jquery snippets for wordpress
• lightbox responsive
• lightbox responsive web