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

Horizontal Grid

Vertical Grid

The concept is inspired by one Richard Rutter with his article Compose to a Vertical Rhythm. If you’re having trouble trying to align your site’s font with the grid because of the size variation, you can use a few tools like Baseline Rhythm Calculator, Grid bookmarklet, and Adobe Air EM calculator to help you out with the math. Or better yet, try getting some EM-based CSS.

Incoming search terms for the article:

• grid css
• simple website templates quaint

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:

• how to create polaroid in css3
• css3 rotate
• polaroid effect
• polaroid foto effect

Color Scheme Designer

Color Scheme Designer provides colors in color wheel form.  It has different color variations in percentage ratio like mono, tetrad, triad, analogic, accented analogic and complementary. This is especially useful in creating color combinations that work.

Ultimate CSS Gradient Generator

This gradient editor and generator tool allows you to make CSS gradients with cross-browser support. It has a Photoshop-like interface, opacity support with opacity stops, import from image and existing CSS, flexible preview panel, over 135 gradient presets and more!

CSS ColorCodes

With this tool, you can select any color from the color picker then copy its hexadecimal value from the bottom field. It also has 2 options which you can provide the RGB and hexadecimal color codes.

Colors Palette Generator

Colors Palette Generator allows you to upload any image you want for generating and using a color palette based on the image’s primary colors.

CSS Colors

This tool offers over 16 million colors with both RGB and hexadecimal color modes.

Gradient Image Maker

Gradient Image Maker creates gradient images that you can use in your website’s template design. It lets you generate 3 types of gradient images with instant previewing.

Incoming search terms for the article:

• color design table css
• primary hexadecimal colors
• color tools
• css color
• hexadecimal color codes
• hexadecimal colors
• palette color maker
• smash box color pallets

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

Go crazy with the cool CSS Filter Effects 1.0 tutorials from WebKit Nightly ! Here you’ll learn how to customize basic image or video rendering with Photoshop-like effects. Let’s check it out.

Note: To test and view the effects, use Webkit Nightly and Chrome Canary.

Here are some CSS snippets that will change the element:

Blur

img {

-webkit-filter: blur(2px);

}

Hue-rotate

img {

-webkitfilter: hue-rotate(90deg);

}

Grayscale

img {

-webkit-filter: grayscale (100%);

}

Sepia

img {

-webkit-filter: sepia (100%);

}

Opacity

Default is 100%, no transparency.

img {

-webkit-filter: opacity (30%);

}

For more of these awesome tutorials click here.

Incoming search terms for the article:

• css3 sepia
• css filter sepia
• webkit sepia
• webkit filter css
• webkit effects
• webkit blur
• css3 filter sepia
• css filter effects 1 0
• webkit-filter: grayscale();

Web design is the first and foremost element that captures the attention of a visitor. Of course the other contents that retain visitors and make them perform an action in the website are important too,  however, it is imperative that no stone should be left unturned to get all the attention of visitors. Today creating websites have become as easy as pie, thanks to the website builders and web design software. With so many web design software available in the market, it makes it difficult to choose and this list of top ten web designing software can guide you to choose the one best suitable for your needs. Enjoy!

Photoshop is undoubtedly must be the 1st  in the list of web design software. When it comes to manipulating images or creating graphics for websites, Photoshop is the go to software. This has been the number once choice of web designers and web design companies to create that picture perfect web design. The innumerable tools available in the software make it very easy, even for the novice designer, to create amazingly attractive web designs. Apart from its several benevolent features that help in creating web pages, the software comes with excellent support in the form of help files, tutorials, and online support.

Dreamweaver, one of the most preferred software in the web design industry. Several features of the software such as syntax highlighting, code hinting project and workflow management ensures easy way of creating flawless web templates. One other feature is its in built FTP client which allows the users to have a glance at end product as well as the source code.

If you are on the lookout for a convenient tool for slicing and dicing a design mockup into HTML/CSS, Fireworks is the perfect software.

Kuler can help you create, alter, blend, and match colors as you wish. When it comes to creating color swatches or using RGB and HEX codes, this could be the best one in the market.

Pixlr is one other image editor that is note worthy. In fact you can perform most of the tasks you would do with your Photoshop editor. Although not up to the caliber of Photoshop, it is surprising that you can download this software free of cost.

Photoscape is yet another free software where you can create and manipulate images and designs similar to that of Photoshop.

Pingdom is a favorite tool of web developers when it comes to testing the performance of the designed pages. It points out any flaws in web page and thus helps designers to create perfect design.

Panic Coda which is similar to Pingdom is for Mac OS X operating system. It enables the designer to identify flaws and allows a design team to work in unison to eliminate flaws.

Yuuguu is a multi-platform screen sharing tool, which again comes handy when several techies are involved in the design project.

BEEdit is an HTML and text editor for Mac, which includes features for editing, searching, and manipulation of text. It comprises required HTML tools for creating a perfect coding.

This list is by no means exhaustive, and if you guys want me to expand on any of those not yet listed, please do let me know in the comments!

Incoming search terms for the article:

• website designing
• website design software
• web design software
• best css3 editor for wordpress
• website designing tool
• top web designs software
• top ten web editor
• software to create CSS
• css3 editor mac
• css website design software easy