Animated Buttons with CSS3

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. View demo Download source The icons used in some of the examples are by webiconset.com and the symbol font is by Just Be Nice We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are. Please note that the animations/transitions will only work in browsers that support those CSS3 properties. In order not to bloat the tutorial, I will not be using any CSS vendor prefixes. Example 1 In this example we will create a big button with several details in it. Markup The structure is pretty straightforward: the icon will be an image and the other elements will be spans: In the style we will make sure that the right transitions are set on the element that we want to animate on hover. Example 2 Example 3 Example 4 Example 5

Splash and Coming Soon Page Effects with CSS3 CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We'll experiment with animation sequences and how to bring some life to some simple elements. View demo Download source CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. The cute shoe photos that we are using in the first demo are by lovely Amira Almajid and you can find the set here. Please note that the animations will only work in modern browsers that support them. In order not to bloat the tutorial, I’ve omitted the CSS vendor prefixes but you’ll find them in the downloadable files. Example 1 Please note, that I added a longer delay for this example to give some time to load the images. The first example will have a couple of elements that we’ll animate. The Markup Ok, now the exciting part: the CSS! The CSS Let’s style the headline: Example 2

Fix Inserted HTML5 Content with HTML5 innerShiv When working with HTML5 today, many of you know that you'll need to include the "HTML5 shiv" to ensure that CSS will recognize and be able to style those elements in browsers that aren't yet hip to HTML5. Credit for that to Remy Sharp, Jon Neal, John Resig and anybody else who contributed to that idea. Also for the benefit of those non-hip browsers, it's best to reset many of the HTML5 elements to block-level as they should be: Now we're all set to use and style HTML5 elements. But wait! What happens if we dynamically add HTML5 to the page via JavaScript. var s = document.createElement('div'); s.innerHTML = "<section>Hi! Or in jQuery: $("body").append("<section>Hi! Hip browsers do fine, but Internet Explorer will once again not recognize the new element and not apply CSS to it. Joe Bartlett has written a great work-around to the problem called HTML5 innerShiv and I thought more people should be aware of it. Using it Please note that this script does not require jQuery. 1. 2. Quick demo. Share On