Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

How does it work?

Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. But they have distinct benefits — beyond semantics — over the use of nested HTML elements.

To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning.

The pseudo-elements contain no true content and are absolutely positioned. This means that they can be stretched to sit over any area of the “parent” element without affecting its content. This can be done using any combination of values for the top, right, bottom, left, width, and height properties and is the key to their flexibility.

What effects can be achieved?

Using just one element you can create parallax effects, multiple background colours, multiple background images, clipped background images, image replacement, expandable boxes using images for borders, fluid faux columns, images existing outside the box, the appearance of multiple borders, and other popular effects that usually require images and/or the use of presentational HTML. It is also possible to include 2 extra presentational images as generated content.

The Multiple Backgrounds with CSS 2.1 and Multiple Borders with CSS 2.1 demo pages show how several popular examples of these effects can be achieved with this technique.

Most structural elements will contain child elements. Therefore, more often than not, you will be able to gain a further 2 pseudo-elements to use in the presentation by generating them from the first child (and even last-child) element of the parent element. In addition, you can use style changes on :hover to produce complex interaction effects.

Example code: multiple background images

Using this technique it is possible to reproduce multiple-background parallax effects like those found on the Silverback site using just one HTML element.

The element gets its own background image and any desired padding. By relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements. The positive z-index will allow for the correct z-axis positioning of the pseudo-elements.

#silverback {
   position:relative;
   z-index:1;
   min-width:200px;
   min-height:200px;
   padding:120px 200px 50px;
   background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}

Both pseudo-elements are absolutely positioned and pinned to each side of the element. The z-index value of -1 moves the pseudo-elements behind the content layer. This way the pseudo-elements sit on top of the element’s background and border but all the content is still selectable or clickable.

#silverback:before,
#silverback:after {
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   padding-top:100px;
}

Each pseudo-element then has a repeated background-image set. This is all that is needed to reproduce the parallax effect.

The content property lets you add an image as generated content. With two pseudo-elements you can add 2 further images to an element. They can be crudely positioned within the pseudo-element box by varying other properties such as text-align and padding.

#silverback:before {
   content:url(gorilla-1.png);
   padding-left:3%;
   text-align:left;
   background:transparent url(vines-mid.png) 300% 0 repeat-x;
}

#silverback:after {
   content:url(gorilla-2.png);
   padding-right:3%;
   text-align:right;
   background:transparent url(vines-front.png) 70% 0 repeat-x;
}

The finished product is part of the Multiple Backgrounds with CSS 2.1 demo.

Example code: fluid faux columns

Another application is creating equal height fluid columns without images or extra nested containers.

The HTML base is very simple. I’ve used specific classes on each child div rather than relying on CSS 2.1 selectors that IE6 does not support. If you don’t require IE6 support you don’t actually need the classes.

<div id="faux">
   <div class="main">[content]</div>
   <div class="supp1">[content]</div>
   <div class="supp2">[content]</div>
</div>

The percentage-width container is once again relatively positioned and a positive z-index is set. Applying overflow:hidden gets the element to wrap its floated children and will hide the overflowing pseudo-elements. The background colour will provide the colour for one of the columns.

#faux {
   position:relative;
   z-index:1;
   width:80%;
   margin:0 auto;
   overflow:hidden;
   background:#ffaf00;
}

By using relative positioning on the child div‘s you can also control the order of the columns independently of their source order.

#faux div {
   position:relative;
   float:left;
   width:30%;
}

#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}

The other two full-height columns are produced by creating, sizing, and positioning pseudo-elements with backgrounds. These backgrounds can be (repeating) images if the design requires.

#faux:before,
#faux:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   left:33.333%;
   width:100%;
   height:100%;
   background:#f9b6ff;
}

#faux:after {
   left:66.667%;
   background:#79daff;
}

The finished product is part of the Multiple Backgrounds with CSS 2.1 demo.

Example code: multiple borders

Multiple borders are produced in much the same way. Using them can avoid the need for images to produce simple effects.

An element must be relatively positioned and have sufficient padding to contain the width of the extra border you will be creating with pseudo-elements.

#borders {
   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}

The pseudo-elements are positioned at specific distances away from the edge of the element’s box, moved behind the content layer with the negative z-index, and given the border and background values you want.

#borders:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   border:5px solid #ffea00;
   background:#4aa929;
}

#borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:15px;
   left:15px;
   right:15px;
   bottom:15px;
   border:5px solid #00b4ff;
   background:#fff;
}

That’s all there is to it. The finished product is part of the Multiple Borders with CSS 2.1 demo.

Progressive enhancement and legacy browsers

IE6 and IE7 have no support for CSS 2.1 pseudo-elements and will ignore all :before and :after declarations. They get none of the enhancements but are left with the basic usable experience.

A warning about Firefox 3.0

Firefox 3.0 supports CSS 2.1 pseudo-elements but does not support their positioning. Due to this partial support some effects look pretty broken, while others are completely unaffected, and there is often no graceful fallback for Firefox 3.0 when using this technique. Sometimes an improved appearance can be achieved by adding display:block to the pseudo-element styles.

Before using pseudo-elements in a way that requires their positioning, consider the importance of Firefox 3.0 support and the percentage of your users currently using the browser.

Enhancing with CSS3

All the applications included in this article could be further enhanced to take advantage of present-day CSS3 implementations.

Using border-radius, rgba, and transforms, and CSS3 multiple background images in tandem with pseudo-elements can produce even more complex presentations that I hope to include in a future article. Currently there is no browser support for the use of CSS3 transitions or animations on pseudo-elements.

In the future: CSS3 pseudo-elements

The proposed extensions to pseudo-elements in the CSS3 Generated and Replaced Content Module include the addition of nested pseudo-elements (::before::before), multiple pseudo-elements (::after(2)), wrapping pseudo-elements (::outside), and the ability to insert pseudo-elements into later parts of the document (::alternate).

These changes would provide a near limitless number, and arrangement, of pseudo-elements for all sorts of complex effects and presentations using just one element.

After

<span class="fancy">< img src="dingo.jpg" /></span>

span,img{padding:0;margin:0;border:0;}

.fancy{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}

.fancy:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:1px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:" ";
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

There are only four divs required for this to work. The first is a container div that surrounds everything. Inside that are three more divs; a header, a body and a footer. That’s it, all the magic happens in the CSS.

html, body { margin:0; padding:0; height:100%; }

#container { min-height:100%; position:relative; }

#header { background:#ff0; padding:10px; }

#body { padding:10px; padding-bottom:60px;   /* Height of the footer */ }

#footer { position:absolute; bottom:0; width:100%; height:60px;   /* Height of the footer */
background:#6cf; }

And one simple CSS rule for IE 6 and IE 5.5:

#container { height:100%; }

via Get down! How to keep footers at the bottom of the page.

What Is So Cool About These Buttons?

• Pure CSS: no image or Javascript is used.
• The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
• Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
• It has three button states: normal, hover, and active.
• It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
• Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

Preview

The image below shows how the button will display in different browsers.

Button States

• normal state = gradient with border and shadow styles.
• hover = darker gradient
• active = gradient is reversed, 1px down, and darker font color as well.

General Styles For The Button

The following code is the general styles for the .button class. I use em value in the padding and border-radius property to make it scalable base on the font-size. To adjust the rounded corners and button size, simply change the border-radius, font-size and padding values. For example: I can make a smaller button by decreasing the font-size and padding values (see demo).

For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3.

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

Color Gradient Styles

The code below is the CSS styling for the orange button. The first background line is a fallback for the non-CSS3 browsers, the second line is for Webkit browsers, the third line is for Firefox, and the last line is a gradient filter that is only read by Internet Explorer.

For more details on CSS gradient, read my article Cross-Browser CSS Gradient.

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

How To Use My Buttons?

Lets say you like the blue button and want to use it on your page:

• First, copy the .button and .blue CSS (view demo source code).
• Then, add to the HTML element where you want the button to be (eg. <a href="#">Button</a>). The CSS classes can be applied to any element such as link, p, span, div, input, button, etc.

要激活该功能，打开你主题的functions.php文件，输入下面的代码:

add_theme_support( 'post-thumbnails' );

你也可以添加一个参数来指定在post还是page激活该功能:

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

默认是在两者里都激活的。激活后，在你的post或page编辑页面的侧边栏底部，就能看到该功能的设置模块了。

2.输出到主题

要在你的主题中显示出设置的图片，你需要在loop里面添加下面这个函数:

你可以给该函数传递一个参数值来调用图片的不同尺寸，

the_post_thumbnail();                  // 默认显示缩略图

the_post_thumbnail('thumbnail');       // 显示缩略图
the_post_thumbnail('medium');          // 显示中等尺寸
the_post_thumbnail('large');           // 显示大尺寸

the_post_thumbnail( array(100,100) );  // 自定义尺寸

3. 在loop外调用某篇文章的文章缩略图

如果你想在loop以外调用某些文章的缩略图，另一个函数为你准备:

和the_post_thumbnail()相比，它需要再传入一个参数来指定文章的ID:

get_the_post_thumbnail($id);

get_the_post_thumbnail($id, 'thumbnail');
get_the_post_thumbnail($id, 'medium');
get_the_post_thumbnail($id, 'large');

get_the_post_thumbnail($id, array(100,100) );

对于大多数wordpress用户来说，知道上面这些就已经足够了。如果你是一个主题开发者，想了解的更深入，可以查看justintadlock的这篇文章：

Everything you need to know about WordPress 2.9’s post image feature

里面还介绍了如何添加函数连接到过滤器动作来改变文章缩略图尺寸和缩略图的html代码输出。

via 如何使用WordPress 2.9内置文章缩略图功能Post Thumbnail | 帕兰映像.

This is all that is needed for the first step. Once this widgetizing code is placed in your functions.php file, proceed to Step 2. The remainder of this section is explanation.

This code checks to make sure that the current version of WordPress supports widgets, and then declares an array of values that will be used to create the widgetized area in your theme. Here are the different values:

* name – the name of the widgetized area as displayed in the WP Admin
* id – a unique identifier for your widgetized area
* description – description of the widgetized area
* before_widget – the markup generated before any user-added widgets
* after_widget – the markup generated after any user-added widgets
* before_title – the markup generated before the title of any user-added widgets
* after_title – the markup generated after the title of any user-added widgets

So, given these parameters, our widgetizing code would result in the following output, say, if the built-in Search widget were added to our widgetized area:

<div id="search-3" class="widget widget_search">
	<h4>Search</h4>
	<form role="search" method="get" id="searchform" action="http://localhost/283/" >
		<div>
			<label class="screen-reader-text" for="s">Search for:</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</div>
	</form>
</div>

Note the markup created for the opening

, which gets its attribute information based on the wild-card matching specified in our widgetizing array. To see this more clearly, examine the following side-by-side comparison of the sprintf directives and the resulting (X)HTML source code:

'before_widget' => '<div id="%1$s" class="widget %2$s">',
<div id="search-3" class="widget widget_search">

Hopefully the relationship is clear. This is a powerful way to ensure that all widgets have a similar class names and unique IDs, which are important for easy CSS styles.

Widgetize Your WordPress Theme: Step 2

Finally, add the following code to the location in your theme’s template file(s) where you would like the widgetized area to appear:

<div id="widgetized-area">

	<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('widgetized-area')) : else : ?>

	<div class="pre-widget">
		<p><strong>Widgetized Area</strong></p>
		<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
	</div>

	<?php endif; ?>

</div>

]]> http://www.my-folios.com/code/widgetize-your-wordpress-theme.html/feed 0 http://www.my-folios.com/code/highlight-search-terms-in-results.html http://www.my-folios.com/code/highlight-search-terms-in-results.html#comments Wed, 17 Feb 2010 09:48:26 +0000 Jay Kwong http://www.my-folios.com/code/?p=43 In an attempt to make your WordPress search even more user friendly, you can highlight the search terms in the results. We did this for one of our clients, so we thought it would be useful for other users. In this article we will show you how you can highlight search terms in the results in WordPress.

First open your search.php and look for the following code:

<?php the_title(); ?>

Replace the above code with:

<?php echo $title; ?>

Make sure that you paste this line above the title code:

<?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $title); ?>

Now open your CSS file and add the styling for the class search-excerpt, and it will highlight the term. Currently the code is making the search terms bold.

]]> http://www.my-folios.com/code/highlight-search-terms-in-results.html/feed 0 http://www.my-folios.com/code/inner-shadows-in-css3-%c2%ab-devthought.html http://www.my-folios.com/code/inner-shadows-in-css3-%c2%ab-devthought.html#comments Tue, 09 Feb 2010 06:48:15 +0000 Jay Kwong http://www.my-folios.com/code/?p=41 -webkit-box-shadow (in Webkit nightly) and -moz-box-shadow support inner shadows with the inset keyword. Both also support multiple shadow declarations separated by commas.

div.box {
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.20), rgba(0,0,0,0.12) 0px 0px 10px inset;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #fff;
padding: 6px;
width: 200px;
background: #fff;
}

via Inner shadows in CSS3 « Devthought.

]]> http://www.my-folios.com/code/inner-shadows-in-css3-%c2%ab-devthought.html/feed 0 http://www.my-folios.com/code/buttons-with-css3-and-rgba.html http://www.my-folios.com/code/buttons-with-css3-and-rgba.html#comments Fri, 22 Jan 2010 06:54:11 +0000 Jay Kwong http://www.my-folios.com/code/?p=37

.awesome{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

  /* Sizes ---------- */
 .small.awesome {
 font-size: 11px;
 }
.medium.awesome {
 font-size: 13px;
 }
.large.awesome {
font-size: 14px;
 padding: 8px 14px 9px;
}

 /* Colors ---------- */
 .blue.awesome {
 background-color: #2daebf;
}
 .red.awesome {
 background-color: #e33100;
 }
 .magenta.awesome {
 background-color: #a9014b;
 }
 .orange.awesome {
 background-color: #ff5c00;
 }
.yellow.awesome {
 background-color: #ffb515;
 }

via ZURB – Super Awesome Buttons with CSS3 and RGBA.

]]> http://www.my-folios.com/code/buttons-with-css3-and-rgba.html/feed 0