You can create something as simple as the example below or as complex as displaying radial gradient circles positioned throughout your DIV. You can even create color stops similar to what is used within Photoshop anywhere you wish. The possibilities are endless.

The Code:

background-image:
     -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#999));
background-image:
     -moz-linear-gradient(100% 100% 90deg, #999, #eee);
an even shorter way for Mozilla:
background-image:
     -moz-linear-gradient(bottom, #999, #eee);

Online vcards are becoming more and more widespread.

This is a template that will help you set up a professional vcard site.

Download Files Demo

jquery effect with google font directory in h1 tag.

google font code:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

h1 { font-family: 'Reenie Beanie', arial, serif; }

Watch page source in demo for code.

Demo

CSS example of multiborder.

		#box {
			background: #f4f4f4;
			border: 1px solid #0000FF;
			width: 400px;
			height: 400px;
			margin: 60px auto;
			position: relative;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		#box:before {
			border: 1px solid white;
			content: '';
			width: 396px;
			height: 396px;
			position: absolute;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		#box:after {
			content: '';
			position: absolute;
			width: 396px;
			height: 396px;
			border: 1px solid #ff0000;
			left: 1px; top: 1px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}

Demo

Download PDF File

Example table:

Download Files Demo

Download Files Demo

Add code to function.php

function download($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => ''
	), $atts));
	return '<a href="'.$url.'" class="download">'.$content.'</a>';
}
add_shortcode('download', 'download');

add code to style.css

.download {display: inline-block;color:#fff;font-weight:bold;font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
}
.download:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
}

usage:

[download url="http://www.google.com"]Download Google Chrome[/download]

Edit the function.php file.

function half($atts, $content = null) {
	return '<div class="half">'.$content.'</div>';
}
function half_last($atts, $content = null) {
	return '<div class="half-last">'.$content.'</div><br style="clear:both" />';
}
add_shortcode('half', 'half');
add_shortcode('half_last', 'half_last');

Edit the the style.css file:

.half, .half-last {float:left;width:47%;margin:10px 0;margin-right:6%;}
.half-last {margin-right:0}

Usage:

[half]Mauris ut lectus erat. In condimentum, turpis ...[/half]
[half_last]Mauris ut lectus erat. In condimentum, turpis ...[/half_last]

edit function.php

function guest_check_shortcode( $atts, $content = null ) {
	 if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
		return $content;
	return '';
}
add_shortcode( 'guest', 'guest_check_shortcode' );
function member_check_shortcode( $atts, $content = null ) {
	 if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
		return $content;
	return '';
}
add_shortcode( 'member', 'member_check_shortcode' );

Usage:

Curabitur risus turpis, tincidunt nec porta non; tempor vitae erat.
[guest]This content is only visible to members, subscribe here to get access to all our awesome tips or log in here if you are already a member[/guest]
[member]Your awesome tip and member-only content comes here[/member]
 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.