CSS3 Animated Price Table
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.
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);
}
Various CSS3 Buttons
CSS3 Animation Example
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.
CSS3 Hover Image
Order Table
