Behind the Scenes: A CSS3 page in the making
In today’s post we’ll be creating a little page with some graphics. The purpose of this little session is to create a web site which takes advantage of some of the new features in HTML5 and CSS3. Lots have happened to web technology the last years, and my little toe tells me more is in the making. Let us make a little page and style it with some of the cool new stuff as well as adding some elements to make it more human friendly. This text is written with an emphasis on users who know some web-design, but who are not experts. Regardless of your skill competency I am interested to hear what you think of the demonstration, and also how your practices are different from mine. I think peer-review provides an excellent foundation for learning and improvement, so please, criticise my approach (constructively).
To do this little project we’ll need a text editor and a browser to preview the result while we are working. Since we’re not going to apply some server magic in this project we won’t need to install a server, but we need somewhere to write our stuff and somewhere to display it. To display the project we need a web browser. I guess you already have one (and if you are the average Joe visiting my page you are using Chrome on Windows), but you need to make sure it’s up to date. For a long time i preferred Firefox, but lately I have spent more time working with browser using the webkit-based browsers Google Chrome and Apple Safari. I will exclusively be using Chrome while working on this project so I recommend you to use the same. I will, however, also include the moz prefix support where CSS3 support is limited to vendor specific implementation.
Text editors are available in all shapes and colours. What you don’t need is a word processor, you will need a program that writes plain text to a file. If you are working on the Mac I will recommend TextMate or the free version TextWrangler. Lately, I have tried out an Integrated Development Enviroment built on Eclipse named Aptana Studio. This was also very good and comes with more advance features, but is not as lightweight. If you are working on Windows I recommend Notepad+.
The Final Result
We need some idea of how our web-page should look like. Before we start to prototype we need to establish some really fundamental concepts of what we’ll need. If we look at the new HTML5 syntax as an indicator of popular practices we can see that HTML5 includes some new elements named header, footer, nav and article. Let us use them to structure a basic HTML document. A rather conventional structure which makes the design coherent at larger screen sizes is to wrap the content of a page within an element, and to do this we can use the div element. Newer practices takes advantage of screen real-estate through media queries, but for this little project we are not going to do so, instead we make a wrapper with the width of 1000 pixels. This is going to render as a “page inside the browser window” on most modern computers. We wil also be placing two columns for the main content area one with the content and another with a local menu. A global menu we place in the header element. For the footer we are also creating two columns: one with some information about the page and one with links. To get a better idea you can take a sneak peak at the final result here: projects 206.
To create the documents we need I like to first go into the root folder of my web projects using the terminal and create a new folder with mkdir, then I go into the folder and create the following files index.html, style.css and script.js with the touch command. If it’s a bigger project I would use a more advance structure, but for our little mockup this would be more than enough.
We can leave the style.css and script.js files empty for now and type or copy the following into the index.html:
[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1 id="main_title">Christmas</h1>
<nav id="top_menu">
<ul>
<li><a href="#">Literature</a></li>
<li><a href="#">Tradition</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Songs</a></li>
</ul>
</nav>
</header>
<div id="main">
<nav id="left_menu">
<ul>
<li><a href="#">A Christmas Carol</a></li>
<li><a href="#">Three nuts to Cinderella</a></li>
<li><a href="#">A Christmas Story</a></li>
<li><a href="#">Nightmare before Christmas</a></li>
</ul>
</nav>
<article>
<h2>A christmas story</h2>
<p>Some text</p>
</article>
</div><!– End of main –>
<footer>
<div id="footer_about">
<p>This is some footer text</p>
</div><!– End of footer_about –>
<div id="footer_links">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!– End of footer_links –>
<p id="footer_bottom">Legal information and a link to my <a href="http://www.lovholm.net">blog</a></p>
</footer>
</div> <!– End of wrapper –>
</body>
</html>
[/sourcecode]
The HTML markup above differs a bit from the HTML in the final version, but only in the sense that the “about” text in the footer and the main text is changed with shorter versions. The rest of the markup is the same. As you can see this is pretty conventional stuff. The header element contains links to the css and javascript file we created earlier so we can take advantage of these and at the same time keep them separate from the content. The body-elements consists of one child element, the wrapper, which further is divided into three elements: header, main and footer. The first and the last of these take advantage of the HTML5 semantic markup for their function within a page, the main element is a div-tag with an ID of “main”. All the main sections contain a link list and these are located within unordered lists. For convenience I use HTML-comments after closing a div-tags to make nesting easier. If you copy this HTML or the HTML of the final version into a document and open this in the browser the result will however be without styling. To keep content and presentation separated is a good practice: it makes it easier to update each of them in the future, re-use them or provide separate versions to accomodate different user scenarios. In another post we are going to make our little page dynamic, and then this rule of thumb will prove useful.
The text used in the finished version is an excerpt from the beginning of Charles Dickens famous book A Christmas Carol. I copied it from the Gutenberg Project, a service that provides loads of books where the copyright is no longer valid. Please support this project, it is a really good resource for gaining example texts not to mention the gigantic cultural value it makes available for free.
The Style
Here is the CCS modifying the HTML above. The css is the content of the style.css file:
[sourcecode language=”css”]
body {
background: url(‘bg_thick_red.png’);
background-repeat: repeat-both;
}
#wrapper {
margin: 20px auto 20px;
width:1000px;
background-color: #FFF;
background-color: rgba(255,255,255,.92);
box-shadow:2px 2px 15px #000;
border-radius:4px;
}
header {
padding:5px;
background-image: linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -o-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -moz-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -webkit-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -ms-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgba(244,250,240,.3)),
color-stop(0.52, rgba(102,168,204,.3)),
color-stop(0.76, rgba(92,131,209,.3))
);
}
header h1{
text-align:center;
color: #888;
text-shadow: 0 1px 0 #FFF;
font-size:3em;
text-transform:uppercase;
font-family: helvetica, sans-serif;
}
header nav {
text-align:center;
}
header nav ul {
list-style: none;
}
header nav ul li {
display:inline;
}
header nav ul li a{
background-color: green ;
text-align:center;
padding:5px 20px 5px;
margin:0 2px 0;
text-decoration:none;
color:white;
font-size:1.5em;
border-radius: 4px;
}
#main {
margin: 0;
padding: 0;
}
#main nav {
float:left;
width:215px;
margin: 20px 5px 0 20px;
background-color: #FFF;
background-color: rgba(255,255,255,0.2);
border-radius:4px;
}
#main nav ul {
list-style:none;
margin: 0;
padding: 0;
}
#main nav ul li a{
display: inline-block;
font-size: 1.2em;
background-color: #DDD;
border-radius:4px;
margin: 5px 0 10px 0;
padding: 5px;
width:100%;
text-decoration:none;
color: green;
}
#main article {
background-color:#FFF;
border-radius:4px;
float:right;
width:680px;
padding:10px;
margin:15px;
}
footer {
clear: both;
background-color: #D4C4AD;
padding:10px;
border-top: 3px solid #000;
font-size:0.9em;
}
#footer_about {
width:450px;
float:left;
}
#footer_links {
width:450px;
float:right;
}
#footer_links ul {
list-style:none;
margin: 0;
padding: 0;
background-image: url(‘post_service.png’);
background-repeat:no-repeat;
background-position:right top;
height:130px;
padding-top:15px;
}
#footer_bottom {
border-top: 1px solid #333;
padding-top:4px;
clear:both;
text-align:center;
font-family:monospace;
}
nav ul li a:hover{
padding-top:10px;
padding-bottom:10px;
box-shadow: 0 0 30px #FEE100;
}
nav ul li a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
[/sourcecode]
This is where the magic happens. It’s amazing how much some lines of CSS can change how the HTML is styled within the browser. As you may see, I have tried to keep the CSS in somewhat same structure as HTML in the sense of the place in the document. I’ve added some global rules at the bottom that applies to all links within a nav-element list. If you been working with CSS before you probably recognise the techniques chosen. I will now comment on some of the choices I made while authoring this stylesheet.
For this project I thought it could be cool with some stripes in the background, this really emphasises the transparency in the alpha layering supported by the new rgba and hsla tags. To get stripes as a background I chose to repeat the basic structure of the background using the background-repeat property. I crated the image used at Stripegenerator. For colours I prefer to use Adobe Kuler.
The new CSS3 features I have used includes: gradients, border-radius, transition, shadows and the new colour tags. CSS3 is not yet a fully implemented standard and many of the functions are only available through vendor prefixes (such as -moz- or -webkit-) but why wait for the future? Most of the CSS3 modules are working and not likely to go through major changes, other things are still in blueprints. The stuff I’m been using here seems to be widely adapted and let alone the gradients are all using simliar syntax across browsers. An important argument for adapting and using new standards you are also playing an active role in defining how these can be used and their popularity, so you can in fact be a part of defining your own future.
Gradients
The gradients as you can see are here located within the background image. The syntax diverge between webkit-browsers (e.g Safari and Chrome) and non-webkit-browsers. The most commonly used syntax includes the type of gradient in the title, while webkit takes it as an argument. Webkit does also needs clearly defined start and stop position while other syntax just need the defined start location. In the code here I have used the rgba elements (which we will return to later) and colour stops. When these are defined will they work as absolute stops which the browser interpolates between. The percentage defines where the stops will be. I am only applying gradients to the header, but if I chose a higher element the gradients would be equally distributed. For this example I have also changed the version without a vendor-prefix to the bottom, this may be a good idea as the browsers will drop prefixes as the function becomes a standard, the browsers adapts the rule last defined and will skip the rules without the prefixes for the specific browser. The syntax can be a little hard to type with many parentesis and commas so to save time and worries I can recommend you to use a CSS3 gradient generator.
[sourcecode language=”css”]
background-image: -o-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -moz-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -webkit-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -ms-linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.04, rgba(244,250,240,.3)),
color-stop(0.52, rgba(102,168,204,.3)),
color-stop(0.76, rgba(92,131,209,.3))
);
background-image: linear-gradient(bottom, rgba(244,250,240,.3) 4%, rgba(102,168,204,.8) 52%, rgba(92,131,209,.8) 76%);
[/sourcecode]
The vendor prefixes are o for Opera, moz for mozilla which Firefox is the most known in the family, webkit is used by webkit browsers which have gained popularity trough Chrome and Safari. The built-in browser on iOS and Android devices are also built on the webkit engine. Ms is short for Microsoft and is the vendor prefix for the widely used Internet Explorer browser. IE is supposedly getting better in newer versions so let hope that users upgrade.
New Colour Tags
Traditionally colours have been expressed with three or six hexadecimal numbers or name constants. Opacity has been available since CSS2 through the opacity function, but it is all brought together in the rgb, hsl, rgba and hsla tags. The two first takes three values and the two latter four. The RGB colours (Red, Green, Blue) constitutes the additive colour model, while the HSL (Hue, Saturation, Lightness ) makes up the colour wheel variables. To use of the models call either of the rules with the appropriate number of argument such as:
[sourcecode language=”css”]
background-color: #FFF;
background-color: rgba(255,255,255,.92);
[/sourcecode]
In the excerpt above the first background-color tag is sent the three hexadecimals as a concatenation of the six hexadecimal version #FFFFFF. This can also be expressed as rbg(255, 255, 255) and if you’re into maths you may see why. The first two ‘F’s correspond to 255 and the same goes for the subsequent. The range between 0 and 255 corresponds to what can be distinguished in a byte. The HSL version has another range. Since it is based on the colour wheel the first argument corresponds to the degree or the circular point on the wheel; the accepted range leads from this and is somewhere between 0 and 360. The second and third arguments are stated in percentage (and the syntax is a number between 0 and 100 followed by the percentage sign). If you choose to add some transparency you add an a to hsl or rgb so it becomes hsla and rgba. In addition you will need to add a fourth argument which takes a number between 0 and 1 where 0 is totally transparent.
Border-radius
Boxes in the web browsers may seem a bit hard from time to time, so to make them more visually friendly you can round the angles using the border-radius rule. This is easy to use either if you want to create a subtle visual effect or going wild with round boxes. I like to add this feature to buttons in order to make them more click friendly but I also think it looks good on boxes. In the little code above I have used a 4 pixel border radius on buttons and also on the wrapper.
[sourcecode language=”css”]
border-radius: 4px;
[/sourcecode]
Shadows
You have probably noticed the heavily use of shadows in various graphical user interface the last years. Shadows make a subtle three dimensional feel on the screen, adding depth and give visual cues of what information should stand out. There are two shadows I have applied to this little page: box and text shadows. In the header h1 element I add a text shadow to make the text a bit more crispy:
[sourcecode language=”css”]
text-shadow: 0 1px 0 #FFF;
[/sourcecode]
In this example I keep the x-axis of the light source straight on the text, but I move the y-axis one pixel down. I do not want to blur the shadow, and I set its colour to white.
I use the box shadow function in more sections. Perhaps the most apparent shadow is the one applied to the wrapper, but also on the link elements are shadows used for an effect. When the user hover an anchor tag in the nav section is a subtle box shadow applied. Here are the two examples in the CSS markup:
[sourcecode language=”css”]
box-shadow:2px 2px 15px #000;
box-shadow: 0 0 30px #FEE100;
[/sourcecode]
The first line is the box-shadow from the wrapper element, and the second is from the light effect I try to emulate applied to the buttons when the user is hovering them. The idea is for the light to look like the radiation around a light source hidden by the button. These two implementations of the same function are just a little example on all the effects which can be accomplished using the new shadow functions.
Animation
The last piece of code I want to comment upon is the animation. This is a new element providing visual effects without having to apply Javascript.
[sourcecode language=”css”]
nav ul li a {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
[/sourcecode]
For all the a tags used in a unordered list within a nav section (pretty much all navigational links) I apply a transition element. This is used to interpolate an animation when the visual state of the element is changed. The code excerpt above is quite long due to the vendor-prefixes, but one line will, in the future, be enough. The syntax as you can see is three arguments: the first is a selector for what should be included in this rule. I choose to include all. In a case where you a using CSS transformations you can here choose which of the transformations it should apply to, which is great in case you plan to make something advance. The second and third argument is the timing and interpolation approach. I choose a rather short time 0.2 seconds from the animation starts until it is finished, I also choose an ease-in-out interpolation. A short demonstration of the various interpolation approaches can be found here.
I hope this post has been useful and perhaps provided you with some new knowledge or ideas. Please tell if anything is unclear or if you would have chosen another approach. At a later point I hope to take this page, or a similar one, and apply some Javascript magic and a little back-end providing some text or data. Well, until next time.