Web Development optimize

CSS3 technology replaces JavaScript functionality

Ryan Boudreaux demonstrates how new CSS3 code can replace JavaScript functionality in these examples.

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.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments
lastchip
lastchip

I love reading about this stuff, but at the moment, I'm struggling to see a practical application for much of it. Until 95%+ of the browsers that people are using can render these examples, (and in essence, that means IE7 onwards, Firefox, and Chrome as an absolute minimum), what's the point? I accept totally, it's fascinating from a technical perspective, but I don't foresee me using it in the near future. It's bad enough getting perfectly legitimate code to work properly in IE, without adding any more fuel to the fire. Certainly, it would be commercial suicide to tell my clients, "oh, by the way, your new site will only work properly in Chrome and Safari". For all that, I still enjoy reading this stuff, so please keep it coming.

bobojdogg
bobojdogg

@lastchip - no need to wait. It looks like you haven't checked out "Modernizr" yet. It's a rather simple yet groundbreaking and novel concept. It is a tiny JS library that does a series of very simple tests to determine what the browser is capable of. You simply modify your CSS with a short series of nicely degrading fall-backs. You program it to look nice in IE7, then you add what is the equivalent of "If the browser also supports the following bells-and-whistles, make it look this way instead." It's awesome and I am using it on a site that still supports IE6 yet has all of these gradients/rounded corners/etc for newer browsers.