A Few CSS Tricks & Tips

Since CSS3 has been unofficially released for developers & designers to play with, a number of very useful features have begun to surface. There is however a need to air on the side of caution whilst using any new CSS3 features to ensure they will work as intended in the browser of your choice. Internet explorer for instance has quite a low compatibility rating with most new features of CSS3 & HTML5. Make sure, if you are using any CSS3 features that you check that the compatibility of the features using this very handy website: http://caniuse.com/

• Transitions
• Box Sizing
• Nth Child

Transitions

CSS3 Transitions can be used to create an effect allowing property changes in CSS values, allowing the changes to take place with effects, such as a smoothing effect across a defined time period.

Hover over the grey box to see a very simple CSS transition…

[html]
<div id="tt-effects">
<h1>This is a Transition&nbsp;<i class="fa-spin fa fa-plane"></i></h1>
</div>
[/html]

Providing you’re using a CSS3 compatible browser, you should be able to see the box expanding, the text font-size increasing, with a spinning aeroplane revealed within the box.

Above you should be able to see the HTML markup, which is very simple. A div, containing a H1 tag, with a Font Awesome icon nested within it.

The syntax for CSS Transitions is as follows.

[css]
#tt-effects {
background:#e3e3e3;
border:1px solid #b2b2b2;
width:100px;
height:100px;
-webkit-transition:width 2s; /* For Safari 3.1 to 6.0 */
transition:width 2s;
padding:20px;
}
#tt-effects h1 {
display:block;
color:#666;
transition: all 2s ease-in-out;
font-size:0;
font-family:Arial, "Helvetica", sans-serif;
}
#tt-effects:hover {
width:440px;
}
#tt-effects:hover h1 {
font-size:42px;
}
[/css]

Given how simple the transition is, the accompanying CSS is also very simple. Basically, the transition property is applied to the element itself, not its hover state. We simply put the property which we want the transition to apply to, within the hover state selector of the elemennt. So the example above; the box width will expand to 440px on hover, and because we have set a transition within the selector for the box, the transition will kick in on hover. The transition is very simple set to “width” & “2s”. So the width will increase to 440px on hover, with a smooth transition effect across a 2 second timeframe.

The transition of the H1 tag is also set within the selector for the H1 tag itself, then on hover, the font size will increase to 42px… This will appear with a smooth transition again across a 2 second timeframe.

The spinning aeroplane is an icon from Font Awesome, which you should definitely check out if you haven’t already. Seriously. Check it out… Font Awesome combined with Bootstrap is a powerful combination which will make any front end developers job that little bit easier!…. Anyway, back to business, the aeroplane is set to spin using font awesome’s class “fa-spin”: animation:2s linear 0s normal none infinite spin;

CSS3’s transitions (& animations) support easing. The most common of these are ease-in, ease-in-out, ease & linear. You can even set your own using cubic-bezier().

• ease-in – This will start the animation slowly, and finish off at full speed.
• ease-out – This will start the animation at full speed, then finish slowly.
• ease-in-out – This will start slowly, speed up during the middle, then finish the animation slowly.
• ease – This is similar to ease-in-out, except it will start slightly faster than it will end.
• linear – This doesn’t use easing.
• cubic-bezier() – This isn’t used as often as the other effects, it can produce some specific, precise results. Call it a custom transition effect. Check out cubic-bezier.com for some inspiration…

To hopefully give you more of an idea of how these transitions work, hover over the box below to see them in action. Hover anywhere in the box to animate each different effect. Having each effect run at the same time should show you the difference between each effect. Each effect is running across a 1.5s duration.

[css]
#transition-box {
width:960px;
height:365px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background:#e4e4e4 url("https://designbypelling.co.uk/wp-gPIOjTIqR8FX/themes/pelling/images/hover.png") no-repeat scroll 720px 130px;
border:1px solid #666;
padding:10px;
}
.box {
float:left;
width:30%;
background:#323A42;
border:1px solid #f1f1f1;
height:40px;
color:#f1f1f1;
margin:5px 0 0 0;
border-radius:9px;
padding:5px;
font-family:Arial, "Helvetica", sans-serif;
clear:left;
text-align:center;
transition-duration:2s;
}
#transition-box:hover .box {
width:925px;
}
#default {
}
#linear {
-webkit-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-o-transition-timing-function:linear;
transition-timing-function:linear;
}
#ease-in {
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
#ease-out {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#ease-in-out {
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
#cubic-bezier {
-webkit-transition-timing-function: cubic-bezier(0,1,1,0);
-moz-transition-timing-function: cubic-bezier(0,1,1,0);
-o-transition-timing-function: cubic-bezier(0,1,1,0);
transition-timing-function: cubic-bezier(0,1,1,0);
}
.box p {
margin:0;
line-height:40px;
}
[/css]

Above you can see the CSS for the Transitions

[html]
<div id="transition-box">
<div class="box" id="default">
<p>Default <i class="fa fa-css3"></i></p>
</div>
<div class="box" id="linear">
<p>Linear <i class="fa fa-css3"></i></p>
</div>
<div class="box" id="ease-in">
<p>Ease-In <i class="fa fa-css3"></i></p>
</div>
<div class="box" id="ease-out">
<p>Ease-Out <i class="fa fa-css3"></i></p>
</div>
<div class="box" id="ease-in-out">
<p>Ease-In-Out <i class="fa fa-css3"></i></p>
</div>
<div class="box" id="cubic-bezier">
<p>Cubic-Bezier <i class="fa fa-css3"></i></p>
</div>
</div>
[/html]

Above you can see the Markup for the Transitions.

Box-Sizing

[css]
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[/css]

This snippet of code is basically selecting everything by using * the universal selector which applies styles to all HTML elements. Using this code, we’re applying the box-sizing property to all HTML elements. The default value for the box-sizing property is “content-box”, we are overriding it to “border-box”.