Customization of the plugin is easy. The script simply returns the data for you to do as you want, which means that you control the entire HTML and utilize the current CSS classes. Click on the image for the demo and documentation.

Incoming search terms for the article:

• yahoo weather widget
• jquery current weather on website

Click on the image to view the demo.

Alternatively, you can check out the code in their step-by-step tutorial over or just download it here.

Incoming search terms for the article:

• jquery 3d bar graph with slider
• php 3d bar graph
• animated bar charts free htmls5
• amazing graphs
• jquery 3d bar charts
• make a 3d bar graph tutorial
• jquery 3d bar
• html5 3D TEMPLATES
• html5 3d bar chart
• html 3d animated bar chart

Basic HTML5 mark up:

<section>

<article  >

<span>01</span>

<h1>HTC Design   Chief Talks About Its First Tablet, the Flyer</h1>

</article>

<article  >

<span>02</span>

<h1>Irrational   Design, a San Francisco Start-Up, Tries to Fly Solo</h1>

</article>

<article  >

<span>03</span>

<h1>Staying in   Touch With Home, for Better or Worse</h1>

</article>

<article  >

<span>04</span>

<h1>Google   Announces Payment System for Digital Content</h1>

</article>

</section>

And here’s the CSS:

article{

background:rgba(242,194,0,1);

width:225px;

height:225px;

position:absolute;

-moz-border-radius:12px;

border-radius:12px;

-webkit-transition:   all 400ms ease;

-moz-transition:   all 400ms ease;

transition: all   400ms ease;

}

article.blur{

-webkit-box-shadow:

0   0 10px rgba(242,194,0,1),

0   0 8px rgba(242,194,0,1),

0   0 6px rgba(242,194,0,1),

0   0 4px rgba(242,194,0,1),

0   0 2px rgba(242,194,0,1);

-moz-box-shadow:

0   0 10px rgba(242,194,0,1),

0   0 8px rgba(242,194,0,1),

0   0 6px rgba(242,194,0,1),

0   0 4px rgba(242,194,0,1),

0   0 2px rgba(242,194,0,1);

box-shadow:

0   0 10px rgba(242,194,0,1),

0   0 8px rgba(242,194,0,1),

0   0 6px rgba(242,194,0,1),

0   0 4px rgba(242,194,0,1),

0   0 2px rgba(242,194,0,1);

-webkit-transform:scale(0.85);

-moz-transform:scale(0.85);

transform:scale(0.85);

opacity:0.8;

}

article:hover{

cursor:pointer;

z-index:10;

-webkit-transform:scale(1.15);

-moz-transform:scale(1.15);

transform:scale(1.15);

-webkit-box-shadow:   0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px   rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:   0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px   rgba(0, 0, 0, 0.1) inset;

box-shadow:   0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px   rgba(0, 0, 0, 0.1) inset;

}

Incoming search terms for the article:

• css3 depth of field
• html5 depth of field
• jquery demo effect
• neat css tricks
• blur effect design depth
• depth effect css3
• html5 depth effect

To get around this and have the data saved is to wait for the Return key to be pressed, which then sends the new inner HTML of the element as an AJAX call and blurs the element. you can then press Esc to return the element to its pre-edited state.

You can see more of this in Remy Sharp’s demo .

JavaScript

document.addEventListener('keydown', function (event) {

var esc = event.which == 27,

nl = event.which == 13,

el = event.target,

input = el.nodeName != 'INPUT'   && el.nodeName != 'TEXTAREA',

data = {};

if (input) {

if (esc) {

// restore state

document.execCommand('undo');

el.blur();

} else if (nl) {

// save

data[el.getAttribute('data-name')] = el.innerHTML;

// we could send an ajax request to   update the field

/*

$.ajax({

url:   window.location.toString(),

data: data,

type: 'post'

});

*/

log(JSON.stringify(data));

el.blur();

event.preventDefault();

}

}

}, true);

function log(s) {

document.getElementById('debug').innerHTML = 'value changed to: ' + s;

}

Incoming search terms for the article:

• contenteditable save changes
• saving changes after using contenteditable
• contenteditable ajax
• contenteditable save
• create website with contenteditable
• contenteditable tutorial
• html 5 content editable color picker
• html contenteditable save changes
• html5 contenteditable ajax
• php file manager contenteditable

Below is the code:

<ul>

<?php

global $cat;

$recentPosts = new   WP_Query();

$recentPosts->query('showposts=5&cat=389');

?>

<?php while ($recentPosts->have_posts()) :   $recentPosts->the_post(); ?>

<li><a   href="<?php the_permalink() ?>"   rel="bookmark"><?php the_title(); ?></a></li>

<?php endwhile; ?></ul>

You can increase or decrease the number of posts to be displayed as you like, and don’t forget to change the category id accordingly (both highlighted in red).

Incoming search terms for the article:

• wordpress display category post using wp_query
• display recent pos css design
• wp_query show list category with post title
• wp_query recent posts
• wp_query for recent post
• wp_query categories mobile
• wp query show recent post
• worpress wp_query to show category post
• php author recent posts wp
• how to get post title using wp_query in wordpress

For example you want to number the Q-and-A pairs in an FAQ list and then add styles to those numbers at the same time, you’ll start with your basic HTML markup like this:

HTML

<dl>

<dt>How much wood   would a wood chuck chuck if a wood chuck could chuck wood?</dt>

<dd>1,000,000</dd>

<dt>What is the   air-speed velocity of an unladen swallow?</dt>

<dd>What do you   mean? An African or European swallow?</dd>

<dt>Why did the   chicken cross the road?</dt>

<dd>To get to the   other side</dd>

</dl>

The lines tagged with <dt> will be the question, which you’ll be applying the numbers to. Your basic CSS code would then be something like this:

CSS

.faq {

counter-reset:   my-badass-counter;

}

.faq dt:before {

content:   counter(my-badass-counter);

counter-increment:   my-badass-counter;

All you have to do at this point is to add the styles you want in the :before element. For example, if you want your unordered list to look like this:

Click on the image above to see more lists in the demo.

Just add a few more code (in bold) into your CSS like this:

.faq {

counter-reset:   my-badass-counter;

}

.faq dt {

 position: relative;

 font: bold 16px Georgia;

 padding: 4px 0 10px 0;

}

.faq dt:before {

content:   counter(my-badass-counter);

counter-increment:   my-badass-counter;

position: absolute;

 left: 0;

 top: 0;

 font: bold 50px/1 Sans-Serif;

}

.faq dd {

 margin: 0 0 50px 0;

} 

.faq dt, .faq dd {

 padding-left: 50px;

}

Notice that we added 2 more styles to adjust the margin and the padding so the numbers won’t sit too close beside the list items. Hope you all enjoy this tutorial!

Incoming search terms for the article:

• CSS3 unordered list
• styling UNORDERED LIST css
• css ordered list
• css numbers unordered
• css list add number
• css add numbers
• how to css sytle the numbers in an ol
• how toadd ol number in css
• ordered list
• cakephp html ordered list ol

Web designer and developer Joren Rapini’s tutorial teaches us how to create a terrific navigation image rollover, which uses very minimal HTML and CSS codes. Click on the image below for the demo:

The first thing to do is to create a navigation image menu with Photoshop. Then, we’ll be writing the HTML and CSS. And that’s it!

HTML

<ul id="navigation">

<li><a href="index.php" class="link1">Home</a></li>

<li><a href="metal" class="link2">Metal</a></li>

<li><a href="plastic" class="link3">Plastic</a></li>

<li><a href="services.php" class="link4">Services</a></li>

<li><a href="news.php" class="link5">News</a></li>

<li><a href="catalog.php" class="link6">Catalog</a></li>

<li><a href="about.php">About Us</a></li>

<li><a href="contact.php" class="link8">Contact</a></li>

<li><a href="users.php" class="link9">Registered Users</a></li>

</ul>

CSS

#navigation {
                    border-right:1px solid #999;
                    padding:10px 0px;
                    width:145px;
}
#navigation a  {
                    display:block;
                    background:url(navigation.png);                                                          
                    height:47px;
                    text-indent:-9000px;
}
#navigation a.link1:hover {background-position:-146px 0px;}
#navigation a.link2 {background-position:0px -47px;}
#navigation a.link2:hover {background-position:-146px -47px;}
#navigation a.link3 {background-position:0px -94px;}
#navigation a.link3:hover{background-position:-146px -94px;}
#navigation a.link4 {background-position:0px -141px;}
#navigation a.link4:hover {background-position:-146px -141px;}
#navigation a.link5 {background-position:0px -188px;}
#navigation a.link5:hover {background-position:-146px -188px;}
#navigation a.link6 {background-position:0px -235px;}
#navigation a.link6:hover {background-position:-146px -235px;}
#navigation a.link7 {background-position:0px -282px;}
#navigation a.link7:hover {background-position:-146px -282px;}
#navigation a.link8 {background-position:0px -329px;}
#navigation a.link8:hover {background-position:-146px -329px;}
#navigation a.link9 {background-position:0px -375px; height:65px;}
#navigation a.link9:hover {background-position:-146px -375px;}

Incoming search terms for the article:

• css rollover
• create cool navigation with images
• navigation image hover tutorial
• image rollover menu
• cool web image hover
• image rollover html css tutorial
• html5 navigation menu image rollovers css3
• image navigation
• image rollover
• image rollover css 3

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

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

HTML

<p>

    <a href="javascript:void(0)" id="demo01">Demo 1 - Simple</a>
</p>
<div id="demo01-body" style="display:none;">
    This is a simple demo
    <span style="font-size: small">(click to close)</span>
</div>

To show notifications on topbar, use showTopbarMessage

$(function () {

    $("#demo01").click(function () {
        $('#demo01-body').showTopbarMessage();
    });

});

The following can be configured: background; borderColor; foreColor; height; fontSize; close.

DEMO

Incoming search terms for the article:

• show notifcation box such facebook with jqeury
• jquery topbar
• jquery designed messagebox
• css notification message box
• messages show in top bar
• messagebox
• message notification facebook jquery
• juery topbar js
• jquery top bar facebook
• notifications facebook jquery top bar

Click on the image to view the demo, then download the file.

In this tutorial, we’ll using CSS :before and :after pseudo elements to create this effect but let us start off with the basic HTML first.

HTML Markup

<!DOCTYPE html>

<html>

<head>

<meta   charset='UTF-8'>

<title>(Better)   Round Out Tabs</title>

</head>

<body>

<ul  >

<li><a   href="#">First Tab</a></li>

<li><a   href="#">Second Tab</a></li>

<li ><a   href="#">Third Tab</a></li>

<li><a   href="#">Fourth Tab</a></li>

</ul>

</body>

</html>

We can now apply some CSS on our tabs to give it its distinctive look, plus those rounded corners.

CSS

.tabrow {

text-align: center;

list-style: none;

margin: 200px 0 20px;

padding: 0;

line-height: 24px;

height: 26px;

overflow: hidden;

font-size: 12px;

font-family: verdana;

position: relative;

}

.tabrow li {

border: 1px solid #AAA;

background: #D1D1D1;

background:   -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);

background:   -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);

background:   -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);

background:   -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);

background:   linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);

display: inline-block;

position: relative;

z-index: 0;

border-top-left-radius:   6px;

border-top-right-radius:   6px;

box-shadow: 0 3px 3px   rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;

text-shadow: 0 1px #FFF;

margin: 0 -5px;

padding: 0 20px;

}

.tabrow a {

color: #555;

text-decoration: none;

}

.tabrow li.selected {

background: #FFF;

color: #333;

z-index: 2;

border-bottom-color: #FFF;

}

.tabrow:before {

position: absolute;

content: " ";

width: 100%;

bottom: 0;

left: 0;

border-bottom: 1px solid   #AAA;

z-index: 1;

}

.tabrow li:before, .tabrow li:after {

border: 1px solid #AAA;

position: absolute;

bottom: -1px;

width: 5px;

height: 5px;

content: " ";

}

.tabrow li:before {

left: -6px;

border-bottom-right-radius:   6px;

border-width: 0 1px 1px 0;

box-shadow: 2px 2px 0   #D1D1D1;

}

.tabrow li:after {

right: -6px;

border-bottom-left-radius:   6px;

border-width: 0 0 1px 1px;

box-shadow: -2px 2px 0   #D1D1D1;

}

.tabrow li.selected:before {

box-shadow: 2px 2px 0 #FFF;

}

.tabrow li.selected:after {

box-shadow: -2px 2px 0   #FFF;

}

And there you have it. As far as browser compatibility is concerned, it works with all browsers except IE. According to those who’ve tried it, the curve does reflect on IE8 and IE9 since it supports the :before and :after pseudo elements but not border-radius, so be warned.

Incoming search terms for the article:

• nifty corners ul li first tab
• css tabs
• css tabs ul rounded corners
• css rounded corner
• css tabs list with curve corners
• css tabs with rounded corners
• css tab design
• tab form css rounded
• tab designs using html5
• rounded corners css

This first code flips each letter horizontally making them face towards the left while retaining their original positions and sequence.

CSS

.one   {-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

-o-transform:rotateY(180deg);

-ms-transform:rotateY(180deg);

transform:rotateY(180deg);

unicode-bidi:bidi-override;

direction:rtl;}

HTML

<span  >Test number one.</span>

The second code flips the letters’ direction, position, AND sequence. What used to be the first letter of the first word of the phrase is now the last, creating a mirror image of the original text.

CSS

.two   {-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

-o-transform:rotateY(180deg);

-ms-transform:rotateY(180deg);

transform:rotateY(180deg);}

HTML

<span  >Test number two.</span>

The third and last code simply flips the letter order but not their direction they face.

CSS

.three   {unicode-bidi:bidi-override;

direction:rtl;}

HTML

<span  >Test number three.</span>

Incoming search terms for the article:

• css reverse text
• css code to reverse a text
• reverse text with css
• reverse one character css
• reverse characters css
• reverse character direction css
• How to reverse text in css
• css reverse text in box
• css reverse text first
• css reverse phrase