It is a known fact that JavaScript allows us web developers to create some amazing interactions with web user interfaces, and now with some thought, ingenuity, and knowledge, the same types of effects can be created with the tools and technology of CSS3.
This post will highlight several CSS3 techniques and tutorials that push the envelope and create similar effects that in the past were relegated to just JavaScript only functionality. The examples are organized into three sections, Image and Photo Galleries, Text and Typography, and finally Navigation and Drop-Down Menus. Each example will highlight the CSS3 technology, provide a screen capture of the demonstrated usage, and supply a snippet of the CSS3 code that helps to make it all happen. Many of these examples are quite useful while others are just making a statement for the importance of CSS3 and its place in the future for web development.
Image and photo galleries
Polaroid Photo Gallery by Chris Spooner on Line25 utilizes CSS3 -webkit and -moz prefixes with transform, rotate, box shadow, and z-index properties to create this imaginative photo gallery and the tutorial provides the clues behind the code. The demonstration is available for viewing in Firefox, Safari, and Chrome.
This is a snippet of the CSS3 code that highlights the use of transform to create part of the Polaroid-like gallery:
ul.gallery li a {
position: relative;
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
-moz-box-shadow: 0px 2px 15px #333;
}
ul.gallery li a.pic-1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
Circle Slideshow by Stu Nicholls on CSS Play displays a set of images in a carousel fashion; a click of the button rotates the images counter-clockwise with the top-most image displayed in the center. Utilizing CSS3 -moz, -ms, -o, and -webkit prefixes with transitions, stacked positions with focus, and active properties, it works using an overlay of links and sibling selectors to control the size, position, and opacity of each image. The author states that this feature is effective in IE7, IE8, IE9, IE10, Firefox, Opera, Safari and Chrome.
This snippet of code highlights the use of CSS3 transitions to create part of the circle slideshow:
.cssplayStack {position:relative; width:750px; height:700px; margin:0 auto;}
.cssplayStack a {display:block; outline:0; position: absolute; left:351px; top:500px; width:48px; height: 48px; background: #fff url(rounders/up.png); z-index:25;
-moz-transition: 0s 1.5s;
-ms-transition: 0s 1.5s;
-o-transition: 0s 1.5s;
-webkit-transition: 0s 1.5s;
transition: 0s 1.5s;
}
CSS3 Image Slider is a perfect example of what has been the domain of JavaScript code, yet is now available in CSS3. This straightforward tutorial uses CSS3 -o, -moz, and -webkit prefixes for transitions in this slider effect. The HTML markup consists of two <div> containers, one for images and the other for the slider effect, with a hover.
This CSS3 code snippet from the CSS3 Image Slider highlights the use of transitions to create the slider effect:
#images img {
width: 400px;
height: 250px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
Making an Image Gallery with CSS3 utilizes CSS3 -moz and -o prefixes for transition property, transition duration, text shadow, and transform to create two variants in this tutorial for the CSS3 image gallery. The second variant is displayed in the screen capture in Figure D.
This snippet of CSS3 code shows how the anchor image is defined with transition and user select as applied to the gallery effect:
a img{
display:block;
width:100%;
height:100%;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:2s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:2s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:2s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:2s;
position:absolute;
z-index:1;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
Text and typography
Letterpress Effect, another from Chris Spooner at Line25, this example utilizes the CSS3 text-shadow property to create this text effect without the use of any image replacement techniques and with recent support for text-transform the effect is rendered directly in browsers such as Safari, Chrome, and Firefox (3.1+).
The snippet of CSS3 code below makes all the difference:
h2 {
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
In this Design Shack tutorial seven examples of CSS3 projects are provided, including this impressive “stitched” sewn-on illusion effect which utilizes CSS3 outline, outline-offset, and box-shadow.
The CSS3 code snippet below shows the styling properties applied:
#container {
/*stitching*/
outline: 1px dashed #98abb9;
outline-offset: -5px;
background-color: #556068;
height: 200px;
width: 400px;
margin: 100px auto;
/*shadow*/
-webkit-box-shadow: 2px 2px 2px #000;
-moz-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}
Text Rotation is a great tutorial by Jonathan Snook in which he utilizes the CSS3 transform and rotation properties to create the example using day, month, and year. Jonathan also provides an IE filter for rotating any element that has layout defined.
This is the snippet of CSS3 code that sets the styling for the date and month:
body {
font-family: Arial, Helvetica, sans-serif;
}
.example-date {
background-color:#987;
float:right;
position:relative;
padding:45px 5px 0px;
margin-left:10px;
}
.example-date .example-month {
text-transform: uppercase;
font-size:25px;
}
.example-date .example-day {
font-size:45px;
line-height:45px;
position:absolute; left:5px; top:0px;
}
.example-date .example-year {
display:block;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
Navigation and drop-down menus
CSS3 Dropdown Menu from Web Designer Wall demonstrates the use of CSS3 in this tutorial, and highlights the use of CSS3 border-radius, box-shadow, linear-gradient, and gradient.
A snippet of the CSS3 code demonstrates the styling applied to the level 2 list, nav ul:
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
Animated Navigation Menu by Web designer’s Desk utilizes border-radius, box-shadow, linear-gradient and webkit-gradient for background image, text-shadow, animation-name, and animation-duration.
A snippet of the CSS3 code below highlights the menu demo ul styling:
#menu-demo1 ul {
width:500px;
height:50px;
background-color:rgb(48,161,171);
overflow:hidden;
/*CSS3 Border radius*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
/*CSS3 Box Shadow*/
-moz-box-shadow:1px 2px 4px #666;
-webkit-box-shadow:1px 2px 4px #666;
box-shadow:1px 2px 4px #666;
/*CSS3 Gradient Property for menu*/
background-image:-moz-linear-gradient(rgb(48,161,171), rgb(56,192,207));
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(48,161,171)), to(rgb(56,192,207)));
}
These are just a few examples of textbook CSS3 technology utilization, demonstrating that functionality previously relegated to JavaScript can now be achieved with CSS.