Home arrow Style Sheets arrow Styling HTML Elements with rgba and transform CSS3 Properties
STYLE SHEETS

Styling HTML Elements with rgba and transform CSS3 Properties


In this fifth part of a six part series, we learn how to style HTML elements using the "rgba" and "transform" CSS3 properties.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
April 26, 2011
TABLE OF CONTENTS:
  1. · Styling HTML Elements with rgba and transform CSS3 Properties
  2. · Using the rgba CSS3 Property
  3. · Rotating HTML elements: working with the “transform” CSS3 property

print this article
SEARCH DEVARTICLES

Styling HTML Elements with rgba and transform CSS3 Properties
(Page 1 of 3 )

Building modern web sites that take advantage of the most engaging features included with CSS3 and HTML5 can be quite a challenging task, due to the poor support that some browsers currently offer for the new specifications. Fortunately, the release of some convenient JavaScript libraries has made web designers’ lives a bit easier, as they allow us to deal with these browser incompatibilities in a more straightforward fashion. 

Among these JavaScript packages, there’s one in particular that deserves a look. Modernizr (http://www.modernizr.com/), is a lightweight library that lets you do conditional CSS3/HTML5 coding, without having to go through any manual, annoying browser sniffing processes.

Of course, marketing the capabilities that Modernizr provides right out of the box would be pretty pointless if I didn’t complement the process with a decent amount of functional code samples. In line with this concept, in previous chapters of this series I developed a few, which showed how to use the library in conjunction with the “text-shadow”, “box-shadow”, “background” and “border-radius” CSS3 properties. In all the cases, the conditional use of the properties in question were reduced to defining a set of styles that worked side by side with the CSS classes that Modernizr appended (on the fly to the DOM). You can view these parts of the series below if you missed them:

Needless to say, the library permits us to use a few other popular CSS3 properties, asides from the ones mentioned above. Taking this into account, in this penultimate episode of the series I’ll be demonstrating how to do conditional styling with the “rgba” and “transform” properties through some simple examples. Re

Taking the first step: building a basic web page

To start demonstrating how to use the “rgba” CCS3 property with Modernizr, the first thing that I’m going to do is create a simple web page, which will include some typical heading elements. This example page is quite similar to others created in previous tutorials of the series, and its structure looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Modernizr with the 'rgba' CSS3 property</title>
<script src="modernizr-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
    <h1>Using Modernizr with the 'rgba' CSS3 property</h1>
    <h2>This is a sample heading element</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <h2>This is a sample heading element</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <h2>This is a sample heading element</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

This simple structure comes in handy for illustrating how to use the “rgba” CSS3 property conditionally. The question that comes up now is: how can this be done?

Considering that Modernizr will dynamically create two different CSS classes, called “rbga” and “no-rgba”, based on the support that the browser provides for the pertaining property, it’d be really easy to use these classes for spicing up the look of the H2 elements defined in the previous web page. We'll be doing just that in the following section.
 


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials