With all of the hoopla surrounding HTML5, designers often forget another big step forward in browser-based delivery: CSS3. The appearance layer of the HTML5 development stack offers some new tricks that are visually interesting and easy to code. The downside? The browsers still haven’t caught up with the code – and different browsers often provide different results with CSS3 techniques.
To get started with CSS3 here are three techniques that you can adapt quickly and use in your browser-based presentations.
Technique one: rounded corners with CSS3
Rounded corners allow you to set a radius to each corner on what was – before CSS3 – a square or rectangular object. Let’s start with some simple – and typical – HTML5 code:
<!DOCTYPE html> <html> <head> <title>Rounded Corners</title> </head> <body> <div id="box1"> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> </div> <div id ="box 2"> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> </div> </body> </html>
If we take a look at this in the browser it won’t be very interesting (Figure 1). The content has no style at all, because we haven’t added any CSS code yet. The display is based on the browser’s default style sheet.
Figure 1: Unstyled HTML code
Now we’re going to add some CSS to make the boxes stand out a bit more. We’ll adjust the font, the font size, and the background color of the divisions. Right before the closing head tag (</head>), add the following code:
<style>
#box1, #box2
{
border: 1px solid black;
font-family: Arial, Verdana, sans-serif;
font-size: .85em;
background-color: rgb(215,215,215);
}
</style>
The divs now look a little more interesting, but aren’t quite there yet (Figure 2).
Figure 2: Logical divisions with styling added
Now we’ll employ some CSS3 to round the corners of the logical divisions. Right below the background-color entry in the CSS we’re going to add the border radius code. Enter the following:
-moz-border-radius: 15px; border-radius: 15px;
This is rather strange-looking CSS code! The -moz preceded CSS is designed to communicate specifically with Mozilla-based browsers. As I mentioned earlier, the browsers are still not 100 percent consistent when it comes to interpreting CSS3, and this is where we start to see some of those issues exposed (Figure 3).
Figure 3: Divs styled with border radius
Technique two: gradients with CSS3
Gradients are a gradual transition between colors – and they are all over Web-based materials and eLearning designs. Up until now, creating them with HTML and CSS alone has not been possible. With a few lines of CSS3 code, however, you can create smooth gradients to help make your designs current and engaging.
Let’s start with a logical division:
<!DOCTYPE html> <html> <head> <title>Gradient</title> </head> <body> <div id="box"> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> </div> </body> </html>
Again, we’ll add the CSS code to the head of the document – just after the closing title tag and just before the closing head tag. Again, browser incompatibilities complicate the code.
#box{
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
You may already be familiar with the background-image CSS style. It’s used on a number of elements to display a graphic image in the background. However, with CSS3 we’re using this style in a brand-new way. You’ll notice that we used the background-image style four times. In the first line we’re targeting WebKit browsers. The second line addresses Mozilla browsers, such as Firefox. The third and fourth entries target Microsoft Internet Explorer and Opera respectively.
Once you have the code correct, you will see a strong black to blue gradient in the div (Figure 4).
Figure 4: Gradient displayed in the div
Looking at the background-image styles, it’s fairly easy to determine how the code applies the gradient patterns. The very first argument in the parentheses is “top,” which means the gradient starts from the top. The second and third arguments are hex colors, indicating the starting and ending color for the gradient.
Technique three: CSS3 columns
Creating newspaper-like columns has previously been a laborious and difficult process. New features in CSS3 allow the browser to display and balance columns automatically. Since this example requires a lot of dummy text, I’m providing the starter file as a download. The starter file has all of the HTML code you will need – we’ll just add the necessary CSS3 code to get going. Figure 5 shows what the content looks like without the CSS3 code.
Figure 5: Content before column code added
In between the provided opening and closing style tags write the following CSS3 code:
-moz-column-count: 3; -Webkit-column-count: 3; -moz-column-gap: 1em; -Webkit-column-gap: 1em;
When you test in your browser you should see three distinct columns (Figure 6). As you can see from the code, we are targeting Mozilla and WebKit browsers. The column-count style determines how many columns will be displayed, and the column-gap style determines how wide the gap between columns should be.
Figure 6: Content displayed in columns in Firefox
In this short tutorial we have just scratched the surface of the power of CSS3. With this newer Web technology we have the ability to make more powerful, more interesting layouts for our Web-based (and mobile-based) learning materials!