CSS3 Animated Price Table

CSS3 Animated Price Table

css3 price table

Example of a price table.
View source code for more details.

View Demo

Example Form Calculate

Calculating order form example

Example of a order form with calculation. Also little bit of css3 styling in form.
View source code for more details.

View Demo

CSS page borders

CSS example Page border

/*------------------------------------*\
	PAGEBORDERS
\*------------------------------------*/

/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
	content:"";
	background:#acacac;
	position:fixed;
	display:block;
	z-index:5;
}

/* ...and position them! */
html:before{
	height:10px;
	left:0;
	right:0;
	top:0;
}
html:after{
	width:10px;
	top:0;
	right:0;
	bottom:0;
}
body:before{
	height:10px;
	right:0;
	bottom:0;
	left:0;
}
body:after{
	width:10px;
	top:0;
	bottom:0;
	left:0;
}


Drop cap

Set off the first letter of a chapter or paragraph.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:50px;
font-family:Verdana;
}

Style links depending on some rules also called attribute selectors

In CSS3 you can style links depending on some rules also called attribute selectors. This is convenient if you have files in PDF, Zip among other and you want to display a small icon near it. This snippet shows a small icons next to your links telling the user if it is an external link, an email, a pdf, a zip or whatever you would like.

/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
	content: url(icons/zip.png);
}

WordPress – Add CSS to a Single Post

Add the following immediately before the call to wp_head:

/*If the post has the 'css' custom field, load a stylesheet
	 *The stylesheet to load is based on the value of the 'css' field
	 */
	if ( get_post_meta($post->ID, 'css', true) ) {
		$style = get_post_meta($post->ID, 'css', true);
		$stylepath = get_bloginfo('template_url') . '/css/' . $style . '.css';
		echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"$stylepath\" />\n";
	}


For example, if you want to use a stylesheet called custom.css on your post, you’ll have to create a folder in your theme directory called css and put your stylesheet there (for me the path would be www.domainname.com/wp-content/themes/yourtheme/css). Then add a Custom Field to your post named css with the value custom.