A good user interface (UI) is like a vehicle. You don’t even think about it when it works correctly, but when it doesn’t, it’s a nightmare. CSS effects should make your UI smooth and effortless.
In fact, here are three subtle effects you can do with CSS to improve the UI of your website:
1. Transition Button Hovers
This one line of CSS makes a world of difference in the impression of a UI. It takes the starkness out of a hover state, adding smoothness and polish to the general impression.
.btn {
color: #333;
background: #666;
transition: all .35s ease-out;}
.btn:hover {color: #444;
background: #999;}
2. Shake Error Messages on Forms
Have you ever tried to track down a field you missed in a long form? Even if there’s an error message, it’s easy to miss – that is, unless it moves and catches your eye. It’s easy to add a few lines of CSS to give an error message a short, little shake to help your users identify what they missed.
form .error {
animation: shakeError 75ms 5 ease-in alternate;
}
@keyframes shakeError {0% {
margin-left: 10px;
}
100% {
margin-left: 0;
}
}
3. Fade In & Slide Up
These two effects combined on an element make a nice entrance. Keep in mind you don’t want to slow download time by lengthy transitions, so use them sparingly on one or two elements you want to highlight above the fold and keep the transition relatively short. In the example below that fades in as it slides up, the margin controls the amount of slide and the opacity controls the fade.
.highlight {
animation: fadeIn .75s ease-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
padding-bottom: 10px;}
100% {
opacity: 1;
padding-bottom: 0;}
}
Have fun experimenting with these effects!
