What CSS3 Can Do For You: Streamlining Buttons and Imagery Transitions
For the web design world, advancements don’t come quick. It takes years of hard work to accomplish new overhauls such as HTML code and CSS levels. When new advancements are made, it makes us feel all giddy inside, and the anticipation kills us.
So what do we do? We figure out ways to start rolling out new techniques so we don’t have to wait. CSS3 is the third level of CSS to be created, and isn’t compatible with all browsers or officially launched quite yet. With that being said, there are some great techniques you can start using today to get yourself familiar with.
? Browser Compatibility
Because CSS3 is so new, not all browsers have made the upgrade. As a result the following browsers are CSS3 compatible ?
Internet Explorer 9 will also be compatible when released. Safari and Chrome seem to work best with CSS3 for the moment. When using CSS3 make sure you are testing your layouts with all three browsers to ensure the best layout for all three bowsers.
HTML5 is also a very much anticipated development in the web design world. CSS3 is being designed to work best with this code, and you can see what these two can really don on Apple’s website, although you have to use Safari to view. With all that being said let’s get started with what CSS3 can really do.
The above example is from the web monkey, and demonstrates how to create a rounded corner button using CSS3. The last two lines are what should catch your eye. Adding the border-radius specs into the code is the key to creating the rounded corner look.
Creating multiple buttons at one time is a great feature CSS3 brings. Instead of creating each image individually, you can now create scalable components at once. Below is a screenshot of how ZURB creates multiple (and different colored) buttons.
padding: 8px 14px 9px;
}/* Colors ———- */
This technique cuts out, “nearly half the CSS it would have taken with hex colors. We’d have three times the CSS per color—one color for background, one for border, and one for text-shadow,” reports ZURB.
? Sliding Door Technique
Before this technique, using multiple images and a lot of time in photoshop was required. Now you can use CSS3 to use one image to navigate through your menu bar. To achieve a look like this (provided from LOONDESIGN) you will only need to have on image, not three.
“The concept of the sliding door is to use a background image for the buttons in a navigation menu. I am using a span within a link in the list to hold a part of the image. the link itself will hold another part of it. Which means, the important part will be the background-image position.
This post goes on to explain exactly how the writer attained the look above.
Similar to its counterpart RGB, RGBA adds an alpha-blending feature to the color scheme. RGBA makes creating buttons much easier, and cuts out a long drawn out process of creating multiple images and colored backgrounds. Safari supports the gradient feature for CSS3, but all other browsers haven’t caught up yet. To make sure your site is still able to be read on any other browser, it would be wise to still use an image for the gradient background.
RGBA will allow programmers to “fill areas with transparent color.” An example from CSS-Tricks is below.
If you would like to animate your photo gallery and have multiple images slide from one picture to the next, using
/* Animation for the :target image. Slides the image in. */ will help you. This command tells the browser (works best in Chrome and Safari) to slide the images from one to the next. The rest of the code will deal with timing of the slides etc. To see this effect in motion, click here.
These techniques are just a few of MANY that CSS3 is capable of doing. In the next series of this article we will go over how to create animation and 3D effects using CSS3.