Web Design tutorial – Create an expanding search box with CSS3 Transitions

In week’s web design video blog we check out the CSS3 transition property and use it to create an expanding search field similar to Apple’s navigation bar and the WordPress 2011 theme. If you’re yet to use CSS3 transitions, essentially it’s a new effect property that allows an element to gradually change from one style to another. Whenever any property changes, then it will animate instead of changing directly. This can be due to a different set of properties set on a pseudo class such as hover, or a new class or properties set by JavaScript.

As with a lot of new CSS3 and HTML5 markup – you need to be aware of which browsers can support this effect. Unsurprisingly, since 2012 – Safari, Chrome, Firefox and Opera have all supported CSS3 Transitions, however support on Internet Explorer is almost none existent. Even IE9 doesn’t support CSS3 transitions; you’ll need to wait until IE10.

The CSS3 Transition Property

So let’s take a look at the CSS3 Transition property. It has 4 properties itself that can be individually specified for each rendering engine:

div
    {
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 2s;
        /* Firefox 4 */
        -moz-transition-property:width;
        -moz-transition-duration:1s;
        -moz-transition-timing-function:linear;
        -moz-transition-delay:2s;
        /* Safari and Chrome */
        -webkit-transition-property:width;
        -webkit-transition-duration:1s;
        -webkit-transition-timing-function:linear;
        -webkit-transition-delay:2s;
        /* Opera */
        -o-transition-property:width;
        -o-transition-duration:1s;
        -o-transition-timing-function:linear;
        -o-transition-delay:2s;
    }

or alternatively with the shorthand ‘transition property’.

div
    {
        transition: width 1s linear 2s;
        /* Firefox 4 */
        -moz-transition:width 1s linear 2s;
        /* Safari and Chrome */
        -webkit-transition:width 1s linear 2s;
        /* Opera */
        -o-transition:width 1s linear 2s;
    }

These 4 properties are firstly, property – i.e which CSS property the transition is to be applied to. Next is duration, the amount of time that the transition happens for, thirdly the timing function which is set to ‘ease’ as default – which is basically slow – fast – slow. And the final transition property is delay, allowing you to delay the animation in milliseconds.

The CSS3 Transitions code from the video

.searchfield {  
background-color: #fff; height:26px; border:0 !important; font-size:1.3em; color:#666; margin:0 auto; width: 240px;
	
	/* CSS3 Transition */
	transition: width 600ms ease 0, background 600ms ease 0; 
	-webkit-transition: width 600ms ease 0, background 600ms ease 0; 
	-moz-transition: width 600ms ease 0, background 600ms ease 0; 
	-o-transition: width 600ms ease 0, background 600ms ease 0; 
	
	/* CSS3 Inner Shadow */
	box-shadow: inner 0 1px 1px #444;
	-moz-box-shadow: inset 0 1px 1px #444;
	-webkit-box-shadow: inset 0 1px 1px #444;
	-o-box-shadow: inner 0 1px 1px #444;
	
	/* CSS3 Border Radius */
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
} 

.searchfield:focus{ background-color: #e1f0f3; width: 338px; }