Inspect Element » tutorial

Ring a Bell with CSS Keyframe Animations

Tom Kenny — Tue, 26 Apr 2011 13:40:40 +0000

Time to have some more fun with a CSS animation as I’m going to show you how to realistically animate a ringing bell. Following on from the 3D lightbox animation tutorial I thought it would be good to get into a little more detail on how to create a realistic animation.

View Demo

The markup consists of only an image of the bell (from The Noun Project). The CSS (without the necessary vendor prefixes to save space here) does all the work:

img.bell {
	animation: ring 8s 1s ease-in-out infinite;
	transform-origin: 50% 4px;
}

The transform-origin will ensure the bell rotates from the top (50% from the left and 4px down from the top) as if the hook was connected to something.

@keyframes ring {
	0% { transform: rotate(0); }
	1% { transform: rotate(30deg); }
	3% { transform: rotate(-28deg); }
	5% { transform: rotate(34deg); }
	7% { transform: rotate(-32deg); }
	9% { transform: rotate(30deg); }
	11% { transform: rotate(-28deg); }
	13% { transform: rotate(26deg); }
	15% { transform: rotate(-24deg); }
	17% { transform: rotate(22deg); }
	19% { transform: rotate(-20deg); }
	21% { transform: rotate(18deg); }
	23% { transform: rotate(-16deg); }
	25% { transform: rotate(14deg); }
	27% { transform: rotate(-12deg); }
	29% { transform: rotate(10deg); }
	31% { transform: rotate(-8deg); }
	33% { transform: rotate(6deg); }
	35% { transform: rotate(-4deg); }
	37% { transform: rotate(2deg); }
	39% { transform: rotate(-1deg); }
	41% { transform: rotate(1deg); }
	43% { transform: rotate(0); }
	100% { transform: rotate(0); }
}

That may seem like a lot of code (especially when you add in the -webkit- and -moz- prefixes) but it’s all necessary in order to achieve a level of realism. Basically, the more keyframes you set, the more accurate you can get with the animation. As you can see in the demo the bell smoothly comes to a stop. That’s because we’re gradually reducing the amount it rotates to the left and right with each swing, just like a real bell would, although we do increase it at the beginning to indicate the bell is being rung in the first place.

The animation lasts 8 seconds but is only animating for 43% of that time as we don’t want it to create too much of a distraction if you imagine it on a page. If you do include it as part of a page, it would probably be better to limit it to a few, maybe 2 or 3, repeats rather than infinite as I’ve done here for the purpose of the demo.

To engineer the gap, set the rotation back to 0 at 43% and at 100%. This will ensure the bell remains still in its resting position for a period of time ready to be rung again when the animation loops round.

Don’t forget to include the vendor prefixes especially on the @keyframes property as @-webkit-keyframes and @-moz-keyframes. These are required currently for Chrome and Safari as well coming soon to FireFox. See the demo’s CSS file with all the prefix code.

Create a CSS3 Image Gallery with a 3D Lightbox Animation

Tom Kenny — Tue, 19 Apr 2011 13:20:13 +0000

For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.

Having been inspired to get ‘Hardboiled‘, I’ve started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS. I’ve taken Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.

View Demo

The :target Pseudo-Class

First, let’s look at how the lightbox actually appears without JavaScript and only CSS with the use of the :target pseudo-class. If you’re writing CSS, you’re already using pseudo-classes as you’ll be familiar with :hover, :visited and :active.

You can link directly to a place on a page by adding a page anchor (#) with the ID of an element to the end of the URL:

http://url.com/#info1

You probably already knew that but what you may not know that you can affect the style of the element that is linked to via the :target pseudo-class. The following code would only be seen if a user clicks on a link with the target ID in:

#info1:target { background-color: red; }

In the case of the demo, we’re using any list item with an ID that has been ‘targeted’ to display the lightbox li[id]:target. Pretty standard CSS is then used to display the lightbox on the page, even with a dark transparent overlay through the use of opacity.

The Animation

If we leave it at that, it’s pretty much the same as a standard lightbox or modal window so we’ll set it apart with a fun animation. Here is how we’ve created the animation with the help of keyframes (WebKit only for now):

@-webkit-keyframes lightbox {
	0% { -webkit-transform: scale(5) rotateY(-270deg); }
	100% { -webkit-transform: scale(1) rotateY(0deg); }
}

On it’s own, the code above won’t do anything so we need to reference it against the element(s) we want to animate.

li[id]:target div { -webkit-animation: lightbox 0.75s cubic-bezier(0,0,0,1); }

As you can see, the animation is called lightbox and that’s the first part of the animation property, followed by the duration and the timing function.

It’s very simple. We’re telling the div (the white box with the blue heading in the demo) to transform 5 times bigger with scale(5) and from a rotated position of -270 degress with rotateY(-270deg). Then when the animation ends after 0.75s we want it to reset to it’s actual size and rotation. The browser will create the animation in between (which is affected but the cubic-bezier timing function above).

Less Capable Browsers

The good thing about this is that browsers that don’t support CSS3 will fallback to an accessible version without the fancy animations thanks to the use of the page anchor and Modernizr.

We do this by testing to see if CSS transforms aren’t supported and then adding CSS using the .no-csstransforms class. Why are we testing for a lack of CSS transforms and not CSS animation? It’s mainly to do with :target pseudo-class support which we can’t test for with Modernizr. It isn’t supported by older browsers, specifically IE8 and below but it is supported in all browsers with support for CSS transforms (as far as I know).

I’ve taken that one step further by creating an equal to or less than IE8 condition comment and

We also want to replace the ‘x’ (the close button in the lightbox) with ‘Back to top’ text for lesser browsers to aid usability. We do that with a bit of jQuery and a test for no CSS transforms with Modernizr.

if (!Modernizr.csstransforms) {
	$(document).ready(function(){
		$(".close").text("Back to top");
	});
}

Issues

There are a couple of issues I need to point out:

Double scrollbar when the lightbox content exceeds the height of the screen resolution
Animation is possibly slow on older machines (needs more testing)
Loads all content, whereas JavaScript solutions online load content when requested
If a browser has JavaScript turned off and doesn’t support CSS transforms, no content will be displayed. This is a problem with using Modernizr as a JS solution for browser feature testing.

I recommend this should only be considered as a demonstration of CSS3 3D animations unless you don’t have much content in the lightbox, similar to the demo.

I’ll be looking to improve it all the time. In the meantime, let me know what you think and if you can offer any improvements or ideas please let me know in the comments.

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.