CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.
However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.
Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. As you’ll see in the demo, viewed in the latest versions of Safari, Firefox or Chrome, you can add an extra layer of depth with the addition of drop-shadow and transitions.
Why do buttons exist in web design? The web is an interactive medium and buttons are a form of interaction, they are easy to understand as a metaphor for real, physical buttons we use everyday on things like computers, mp3 players, televisions and any other electronic devices we use on a daily basis.
The key to making the buttons behave more like real physical buttons using CSS3 is using code such as shown below for the second button. To achieve a circle with CSS3, set a width and a height and define border-radius as half of those values.
The active state uses CSS3′s gradient ability to create a gradient that goes from dark at the top to a lighter colour at the bottom. To further emphasise the depression of a button, a CSS transform is applied, scaling down the button slightly. To maintain the background image of the power button, include it in the background property and separate the gradient values with a comma.
The recessed border also uses CSS3 gradient to get the full effect. The border class is applied to a div containing the button.
CSS3 has an animation module which is plenty of fun to play with especially as you’ll be able to do things with CSS that you weren’t able to do before.
Zurb also have an excellent demonstration of a similar effect which the wrote for Smashing Magazine.
http://inspectelement.com
However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.
Polaroids – View Demo
Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. As you’ll see in the demo, viewed in the latest versions of Safari, Firefox or Chrome, you can add an extra layer of depth with the addition of drop-shadow and transitions.
img {
border: 15px solid #fff;
border-bottom: 65px solid #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
img:hover {
-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg) scale(1.05);
-moz-transform: rotate(1deg) scale(1.05);
}Buttons – View Demo
Why do buttons exist in web design? The web is an interactive medium and buttons are a form of interaction, they are easy to understand as a metaphor for real, physical buttons we use everyday on things like computers, mp3 players, televisions and any other electronic devices we use on a daily basis.
The key to making the buttons behave more like real physical buttons using CSS3 is using code such as shown below for the second button. To achieve a circle with CSS3, set a width and a height and define border-radius as half of those values.
button.two {
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-indent: -9999px;
border: 1px solid #696969;
background: #696969 url(power.png) no-repeat 6px 5px;
} The active state uses CSS3′s gradient ability to create a gradient that goes from dark at the top to a lighter colour at the bottom. To further emphasise the depression of a button, a CSS transform is applied, scaling down the button slightly. To maintain the background image of the power button, include it in the background property and separate the gradient values with a comma.
button.two:active {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
background: url(power.png) no-repeat 6px 5px, -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.13, #696969),
color-stop(0.72, #2a2a2a)
);
background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(
center bottom,
#696969 13%,
#2a2a2a 62%
);
} The recessed border also uses CSS3 gradient to get the full effect. The border class is applied to a div containing the button.
.border {
margin: 0 auto;
height: 42px;
width: 42px;
display: block;
background-color: #fcfcfc;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.13, #fcfcfc),
color-stop(0.72, #c0c0c0)
);
background: -moz-linear-gradient(
center bottom,
#fcfcfc 13%,
#c0c0c0 62%
);
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}DVD Animation – View Demo
CSS3 has an animation module which is plenty of fun to play with especially as you’ll be able to do things with CSS that you weren’t able to do before.
a:hover img[alt*="Disc"] {
-moz-transform: translate(50px,0) rotate(330deg);
-webkit-transform: translate(50px,0) rotate(330deg);
transform: translate(50px,0) rotate(330deg);
}img[alt*="Disc"] {
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}Zurb also have an excellent demonstration of a similar effect which the wrote for Smashing Magazine.
http://inspectelement.com
