Inspect Element » Tutorials

Simulate Realism with CSS3

Tom Kenny — Tue, 16 Feb 2010 15:15:09 +0000

CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.

However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.

Polaroids – View Demo

Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. As you’ll see in the demo, viewed in the latest versions of Safari, Firefox or Chrome, you can add an extra layer of depth with the addition of drop-shadow and transitions.

img {
	border: 15px solid #fff;
	border-bottom: 65px solid #fff;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
}

img:hover {
	-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg) scale(1.05);
	-moz-transform: rotate(1deg) scale(1.05);
}

A subtle shadow gives the impression that is sitting on a flat surface and by scaling and increasing the size and positioning of the shadow on a hover state we can create the illusion that it has been raised slightly from the surface.

Buttons – View Demo

Why do buttons exist in web design? The web is an interactive medium and buttons are a form of interaction, they are easy to understand as a metaphor for real, physical buttons we use everyday on things like computers, mp3 players, televisions and any other electronic devices we use on a daily basis.

The key to making the buttons behave more like real physical buttons using CSS3 is using code such as shown below for the second button. To achieve a circle with CSS3, set a width and a height and define border-radius as half of those values.

button.two {
	width: 30px;
	height: 30px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	text-indent: -9999px;
	border: 1px solid #696969;
	background: #696969 url(power.png) no-repeat 6px 5px;
}

The active state uses CSS3′s gradient ability to create a gradient that goes from dark at the top to a lighter colour at the bottom. To further emphasise the depression of a button, a CSS transform is applied, scaling down the button slightly. To maintain the background image of the power button, include it in the background property and separate the gradient values with a comma.

button.two:active {
	-webkit-transform: scale(0.97);
	-moz-transform: scale(0.97);
	background: url(power.png) no-repeat 6px 5px, -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.13, #696969),
		color-stop(0.72, #2a2a2a)
	);
	background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(
		center bottom,
		#696969 13%,
		#2a2a2a 62%
	);
}

The recessed border also uses CSS3 gradient to get the full effect. The border class is applied to a div containing the button.

.border {
	margin: 0 auto;
	height: 42px;
	width: 42px;
	display: block;
	background-color: #fcfcfc;
	-webkit-border-radius: 21px;
	-moz-border-radius: 21px;
	border-radius: 21px;
	background: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.13, #fcfcfc),
	    color-stop(0.72, #c0c0c0)
	);
	background: -moz-linear-gradient(
	    center bottom,
	    #fcfcfc 13%,
	    #c0c0c0 62%
	);
	-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}

View the demo in the latest versions of Safari, Chrome or Firefox.

DVD Animation – View Demo

CSS3 has an animation module which is plenty of fun to play with especially as you’ll be able to do things with CSS that you weren’t able to do before.

a:hover img[alt*="Disc"] {
	-moz-transform: translate(50px,0) rotate(330deg);
	-webkit-transform: translate(50px,0) rotate(330deg);
	transform: translate(50px,0) rotate(330deg);
}

Here the animation is being used to animate the DVDs as as you hover over the link that encapsulates bot the cover and the disc.

img[alt*="Disc"] {
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

Anyone who follows the work of Andy Clarke will likely have seen the DVD animation of the homepage of For a Beautiful Web. The above code demonstrates how Andy implemented this effect. At this point I want to highlight what you can do when you see something interesting on the web. All you have to do is have a look at the source code to see exactly how it works and learn from it to see how you could use it in the future. Now I’m not saying copy someone’s work but adjust it to your or your client’s needs.

Zurb also have an excellent demonstration of a similar effect which the wrote for Smashing Magazine.

BONUS: 3D Book Animation – View Demo

This one is for WebKit based browsers only so fire up the latest version of Safari or Chrome to see it in action and is based on this example found on the Surfin’ Safari blog. I’ll let you hunt around for code to see how it works as discovery is half the fun of learning about CSS. If you have any questions let me know in the comments and either myself or one of our great readers will help you out.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Tom Kenny — Mon, 25 Jan 2010 21:12:14 +0000

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

View Demo | Download Files (.zip)

The HTML







    One Page Portfolio
    

    

    

    

    
    
    





     

    	

    		Web Design Portfolio

    		 
    			
    				Intro
    				Portfolio
    				About
    				Contact
    			
    		

    	

    

     

    	

    		Hand-coded HTML and CSS is what I do. It's what I'm good at so why not?

    		http://inspectelement.com">

    		Featured Project: Inspect Element

    	

    	 

    		My Portfolio

    		
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    		

    	

    	 

    		About Me

    		Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. In West Philadelphia born and raised on the playground my momma said most of my days chilling out, maxing and relaxing all cool and all shooting some b-ball outside of school when a couple of guys they were up to no good started making trouble in our neighbourhood I got in one little fight and my mom got scared, she said your moving in with your auntie and uncle in Bel-Air

    	

    	 

    		Contact Me

    		I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, forget it, yo home to Bel-Air! I pulled up to the house about seven or eight I yelled to the cabbie yo home, smell you later, looked at my kingdom I was finally there to sit on my throne as the prince of Bel-Air

    		 

    			Name
    			 

    			Email
    			example@domain.com" required tabindex="2" /> 

    			Your Message
    			 

    			 

    		 

    	

    	 

    		
    			http://twitter.com/tkenny">Follow me on Twitter
    			http://inspectelement.com/articles/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3">Back to the Tutorial on Inspect Element

Download the HTML here (Right-click and save as).

First thing first, let’s make sure the code validates with W3C’s experimental HTML5 validator.

Good news, it does! This is a simple example but good to know we’re on the right lines.

The HTML5 Goodness

As you can see from the code above there are new tags that you may not be familiar with. To make it even simpler here is the code stripped down to only the HTML5 tags.

Header

The first one you’ll notice is

and it does exactly what it implies. You can use this for the header of your page, typically containing the logo and the navigation.

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The header element as described in the HTML5 specs.

Nav

The

tag now gives us the ability to highlight the navigation of a site through the HTML. Usually contained within the header of a page but can also be applied to left or right sided navigation in sidebars.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

The nav element as described in the HTML5 specs

Section

In this example the

tag is being used to separate the different parts of the page. The introduction, my portfolio, about me and contact me areas are all sections that make up the page, all contained within a section tag.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

The section element as described in the HTML5 specs.

Footer

You’ll find the

tag at the end of the contact section of the portfolio example. It’s included there and not at the end of the document in this case because it contains content relevant to the contact section in the form of the Twitter link (ignoring the back to tutorial link). For more information read the following included in the HTML 5 spec overview:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

Footers don’t necessarily have to appear at the end of a section, though they usually do.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

The footer element is not sectioning content; it doesn’t introduce a new section.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

The footer element as described in the HTML5 specs.

The Form

While the form itself doesn’t seem to be radically different to previous methods, HTML5 does introduce a nice addition in the placeholder attribute. Basically this fills in a text field with sample text much like we’re used to doing with Javascript now.

example@domain.com" />

For more on HTML5 in forms make sure you check out Have a Field Day with HTML5 Forms on last year’s 24 ways.

Backwards Compatibility

All of this is great. We’re using the latest and greatest technology in web development but currently only a few browsers support HTML5 in any capacity. We now need to think about all versions of Internet Explorer which don’t include any support for HTML5 whatsoever. Fortunately for us, Remy Sharp has created a Javascript file that reverses IE’s inability to style elements it doesn’t recognise.

Just included the following code:

Now that all major browsers will recognise the styling let’s move onto the CSS.

The CSS3 Goodness

Most of the CSS won’t be new to you but there are a few CSS3 properties that we’ll have a look at including gradients, embeddable fonts and text shadow.

View the CSS here

Let’s begin by looking at how this page behaves visually in a browser that supports CSS3. View the demo in the latest versions of Safari, Chrome or Firefox to see the full effect. Or see the screenshots below:

@font-face

While this example uses @font-face on every instance of text, I wouldn’t recommend doing so on large websites. Also, using some fonts as body text may case text to become hard to read. Don’t get carried away. This theme uses Yanone Kaffeesatz at a large enough size to make it very readable and differ enough from the regular web-safe fonts.

@font-face { font-family: Keffeesatz; src: url(YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(YanoneKaffeesatz-Bold.otf) format("opentype") }

RGBa

With RGBa you can declare a colour and an opacity as a single property. Not only that but it can be applied to anything that uses colour. To demonstrate this, the image link and input borders have RGBa applied. You can see the subtle background texture show through, especially noticeable on the input elements in the form.

input[type="text"] { border: 5px solid rgba(122, 192, 0, 0.15); }

The first three values (122, 192, 0) are the red, green and blue values of the colour with the fourth (0.15) being the alpha value, or opacity.