Rotating Words With CSS Animations – CSS3 Keyframes Animation Example

In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll be “exchanging” certain words of that sentence using CSS animations.
Please note: the result of this tutorial will only work as intended in browsers that support CSS animations.
So let’s start!

In the following, we’ll be going through demo.

rotating-words-css-animations

THE HTML

We’ll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words:

<section class="rw-wrapper">
	<h2 class="rw-sentence">
		<span>Real poetry is like</span>
		<br />
		<span>creating beautiful butterflies</span>
		<br />
		<span>with a silent touch of</span>
		<div class="rw-words rw-words-1">
			<span>spice</span>
			<span>colors</span>
			<span>happiness</span>
			<span>wonder</span>
			<span>sugar</span>
			<span>happiness</span>
		</div>
	</h2>
</section>

Now, ignoring the garbage placeholder text, we want each span of the rw-word to appear at a time. For that we’ll be using CSS animations. We’ll create one animation for each division and each span will run it, just with different delays.
So, let’s look at the CSS.

THE CSS3

First, we will style the main wrapper and center it on the page:

.rw-wrapper{
	width: 80%;
	position: relative;
	margin: 110px auto 0 auto;
	font-family: 'Bree Serif';
	padding: 10px;
	height: 400px;
	overflow: hidden;
}

We’ll add some text shadow to all the elements in the heading:

.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

And add some specific text styling to the spans:

.rw-sentence span{
	color: #444;
	white-space: nowrap;
	font-size: 200%;
	font-weight: normal;
}

The divisions will be displayed as inline elements, that will allow us to “insert” them into the sentence without breaking the flow:

.rw-words{
	display: inline;
	text-indent: 10px;
}

Each span inside of a rw-words div will be positioned absolutely and we’ll hide any overflow:

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #888;
	-webkit-transform-origin: 10% 75%;
	-moz-transform-origin: 10% 75%;
	-ms-transform-origin: 10% 75%;
	-o-transform-origin: 10% 75%;
	transform-origin: 10% 75%;
}

Now, we’ll run two animations. As mentioned previously, we’ll run the same animation for all the spans in one div, just with different delays:

.rw-words-1 span{
	animation: rotateWord 16s linear infinite 0s;
}
.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
	animation-delay: 3s; 
	color: #6b889d;
}
.rw-words span:nth-child(3) {
	animation-delay: 6s; 
	color: #6b739d;	
}
.rw-words span:nth-child(4) {
	animation-delay: 9s; 
	color: #7a6b9d;
}
.rw-words span:nth-child(5) {
	animation-delay: 12s; 
	color: #8d6b9d;
}
.rw-words span:nth-child(6) {
	animation-delay: 15s; 
	color: #9b6b9d;
}

Our animations will run one cycle, meaning that each span will be shown once for three seconds, hence the delay value. The whole animation will run 6 (number of images) * 3 (appearance time) = 18 seconds.
We will need to set the right percentage for the opacity value (or whatever makes the span appear). Dividing 6 by 18 gives us 0.333… which would be 33% for our keyframe step. Everything that we want to happen to the span needs to happen before that. So, after tweaking and seeing what fits best, we come up with the following animation (Fade in and “fall”) for the first words:

@keyframes rotateWord {
    0% { opacity: 0; }
    5% { opacity: 1; }
    17% { opacity: 1; transform: rotate(0deg); }
	19% { opacity: 1; transform: rotate(98deg); }
	21% { opacity: 1; transform: rotate(86deg); }
	23% { opacity: 1; transform: translateY(85px) rotate(83deg); }
	25% { opacity: 0; transform: translateY(170px) rotate(80deg); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}

We’ll fade in the span and we’ll also animate its height.
The animation for the words in the second div will fade in and animate their width. We added a bit to the keyframe step percentages here, because we want these words to appear just a tiny bit later than the ones of the first word:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

css3-animations-rotating-words

And that’s it folks! There are many possibilities for the animations, you can check out the demo and see what can be applied!
I hope you enjoyed this tutorial and find it inspiring!
view demo

 

Posted by: Dhiraj kumar

Advertisements

Top 10 Reasons to Start Using HTML5 Right Now…

So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you get done reading this article.

html5-reasons

There are lots of articles touting the use of HTML5 and praising the benefits of it, yes this is another one of those. With all these articles, with Apple pushing it, with Adobe building new dev products around it, and with so many web sites devoted to it, I still talk to fellow designers and developers who haven’t or won’t adopt it for a variety of reasons. I think the main problem is, it still seems like a mysterious creature to many. To many it feels more like the jet pack or the flying car — an awesome idea that is fun to think about but still not practical in its use. Wrong, the reality is that it is extremely practical right now! It’s not the latest Mercedes concept car being towed around form car show to car show, it’s a reality and it’s not going anywhere.

In order to further demystify HTML5 and help these knuckle dragging designers and developers to jump on the bandwagon I’ve put together a top ten list of reasons why we should all be using HTML5 right now. For those that currently use HTML5 this list may not be anything new or ground breaking, but hopefully it will inspire you to share the benefits of HTML5 with others in the community. We’ll do this Letterman countdown style (minus the celebrity presenter) and start with number ten – accessibility.

10 – ACCESSIBILITY

HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them.

ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. This has been well overlooked and widely under-used mostly due to the fact that it wasn’t valid, however, HTML5 will validate these attributes. Also, HTML5 will have built in roles that can’t be over-ridden making assigning roles a no brainer. For a more in depth discussion on HTML5 and ARIA please visit the WAI.

9 – VIDEO AND AUDIO SUPPORT

Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly. Your media tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and audio tags basically treat them as images; <video src=”url”/>. But what about all those parameters like height, width and autoplay? No worries my good man, just define those attributes in the tag just like any other HTML element: <video src=”url” width=”640px” height=”380px” autoplay/>.

It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly… but this code isn’t nearly as gnarly and messy as the <object> and tags:

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
</video>

Some resources worth checking out:

8 – DOCTYPE

doctype html

<!DOCTYPE html>

Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes. You can simply and easily type it out and be happy. The really great thing about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6.

7 – CLEANER CODE

If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content. Consider this typical and simple header code with navigation:

<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
 <h1>Header Text</h1>
 <nav>
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </nav>
</header>

With HTML5 you can finally cure your “divitis” and “classitis” by using semantic and HTML headers to describe your content. Previously you would generally just use div’s for every block of content than drop an id or class on it to describe its content but with the new <section>, <article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized and happier.

Some resources worth checking out:

6 – SMARTER STORAGE

One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Because it’s essentially a client side data base you don’t have to worry about the user deleting cookies and it is been adopted by all the popular browsers.

Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins. Being able to store data in the user’s browser allows you to easily create those app features like: storing user information, the ability to cache data, and the ability to load the user’s previous application state. If you are interested in getting started with local storage, check out Christian Heilmann’s great 24 Ways article from last year —Wrapping Things Nicely with HTML5 Local Storage.

Some more resources worth checking out:

5 – BETTER INTERACTIONS

Awe, we all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than the previous rich internet application platforms like Flash.

Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:

  • Drag and Drop (DnD)
  • Offline storage database
  • Browser history management
  • document editing
  • Timed media playback

For way more info on these APIs and more native interactive features of HTML5 visit HTML5Doctor.

Some resources worth checking out:

4 – GAME DEVELOPMENT

Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games before, you’ll love building HTML5 games.

Script-Tutorials has recently offered a four part series of lessons focused on HTML5 game development, head on over and check out some of the sick stuff they have created:

Some more resources worth checking out:

3 – LEGACY/CROSS BROWSER SUPPORT

modern browsers support

Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn’t mean they can use all the new HTML5 tags and goodies. Fortunately, HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Some resources worth checking out:

2 – MOBILE, MOBILE, MOBILE

Call it a hunch, but I think mobile technology is becoming more popular these days. I know, that is a pretty crazy assumption and some of your are probably thinking — mobile is just a fad… right. Mobile devices are taking over the world. The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.

Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile:

  • Viewport: allows you to define viewport widths and zoom settings
  • Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode
  • Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device

For more info on how to mobilize your site via HTML5, check out “Mobifying” Your HTML5 Site.

Some resources worth checking out:

1 – IT’S THE FUTURE, GET WITH IT!

The number one reason why you should start using HTML5 today is this: it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary, it’s not anything you really need to figure out or relearn — if you’re developing XHTML strict right now you are already developing in HTML5 so why not take full advantage of it’s current capability?

You really don’t have any excuses not to adopt HTML5 and begin your new love affair with it. Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, all the other benefits and fun features I haven’t even really jumped into yet, but that is the great thing about it, you can just start using it right now and not even change the way you design. So, start using it right now, whether you are just simplifying and making your markup more semantic OR you are gonna build some sick new mobile game that will take over the world — who knows, maybe you can start selling stuffed animal versions of your gaming characters too.

GREAT HTML5 RESOURCES

http://html5doctor.com
http://html5rocks.com
http://html5weekly.com
http://www.remysharp.com
http://www.script-tutorials.com

Posted by: Dhiraj kumar

Random 3D Explosions, 3D clouds – Effects with CSS 3D and jQuery

Introduction

This tutorial will try to guide you through the steps to create a 3D-like, explosions in sky or billboard-based clouds. There are a few advanced topics, mainly how 3D transformations via CSS properties work. If you want to find more information, this is a nice place to begin.

If you’re in a hurry, just check the final result.

css-3d-explosive-clouds

The tutorial is divided into sections, each with a different step to understand and follow the process, with HTML, CSS and Javascript blocks. Each step is based on the previous one, and has a link to test the code. The code in the tutorial is a simplified version of the demos, but the main differences are documented on every section.

HTML

First, we need two div elements: viewport and world. All the rest of the elements will be dynamically created.

Viewport covers the whole screen and acts as the camera plane. Since in CSS 3D Transforms there is no camera per se, think of it as a static sheet of glass through which you see a world that changes orientation relative to you. We’ll position all our world objects (or scene) inside it, and that’s what will be transformed around.

World is a div that we are going to use to anchor all our 3D elements. Transforming (rotating, translating or scaling) world will transform all our elements. For brevity and from here on, I’m using non-prefixed CSS properties. Use the vendor prefix (-webkit, -moz, -o, -ms, etc.) where appropriate.

This is all the markup we’ll need:

<div id="viewport">
    <div id="world"></div>
</div>

CSS

These next are our two CSS definitions. It’s very important to center the div that contains our scene (world in our case) in the viewport, or the scene will be rendered with an offset! Remember that you are still rotating an element that is positioned inside the document, exactly like any other 2D element.

#viewport {
	-webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; 
	position: absolute; 
	left: 0; 
	top: 0; 
	right: 0; 
	bottom: 0; 
	overflow: hidden;
	background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.28, rgb(69,132,180)),
			color-stop(0.64, rgb(31,71,120))
	);
}

#world {
	position: absolute; 
	left: 50%; 
	top: 50%; 
	margin-left: -256px; 
	margin-top: -256px; 
	height: 512px; 
	width: 512px; 
	-webkit-transform-style: preserve-3d; 
	-moz-transform-style: preserve-3d; 
	-o-transform-style: preserve-3d; 
	pointer-events: none;
}

CSS For Adding Clouds Base

Now we start adding real 3D content. We add some new div which are positioned in the space, relatively to world. It’s esentially adding several absolute-positioned div as children of world, but using translate in 3 dimensions instead of left and top. They are centered in the middle of world by default. The width and height don’t really matter, since these new elements are containers for the actual cloud layers. For commodity, it’s better to center them (by setting margin-left and margin-top to negative half of width and height).

.cloudBase {
		position: absolute; 
		left: 256px; 
		top: 256px; 
		width: 20px; 
		height: 20px; 
		margin-left: -10px; 
		margin-top: -10px
	}

CSS for Clouds Layer

Now things start getting interesting. We add several absolute-positioned .cloudLayer div elements to each .cloudBase. These will hold our cloud textures.

.cloudLayer {
		position: absolute; 
		left: 50%; 
		top: 50%; 
		width: 256px; 
		height: 256px; 
		margin-left: -128px; 
		margin-top: -128px; 
		-webkit-transition: opacity .5s ease-out; 
		-moz-transition: opacity .5s ease-out; 
		-o-transition: opacity .5s ease-out;
	}

jQuery (JavaScript)

We add generate() and createCloud() functions to populate world. Note that random_{var} are not real variables but placeholder names for the real code, which should return a random number between the specified range.

var layers = [],
	objects = [],
	textures = [],

	world = document.getElementById( 'world' ),
	viewport = document.getElementById( 'viewport' ),

	d = 0,
	p = 400,
	worldXAngle = 0,
	worldYAngle = 0,
	computedWeights = [];

	viewport.style.webkitPerspective = p;
	viewport.style.MozPerspective = p;
	viewport.style.oPerspective = p;
	textures = [
		{ name: 'white cloud', 	file: 'cloud.png'	, opacity: 1, weight: 0 },
		{ name: 'dark cloud', 	file: 'darkCloud.png'	, opacity: 1, weight: 0 },
		{ name: 'smoke cloud', 	file: 'smoke.png'	, opacity: 1, weight: 0 },
		{ name: 'explosion', 	file: 'explosion.png'	, opacity: 1, weight: 0 },
		{ name: 'explosion 2', 	file: 'explosion2.png'	, opacity: 1, weight: 0 },
		{ name: 'box', 		file: 'box.png'		, opacity: 1, weight: 0 }
	];

	function setTextureUsage( id, mode ) {
		var modes = [ 'None', 'Few', 'Normal', 'Lot' ];
		var weights = { 'None': 0, 'Few': .3, 'Normal': .7, 'Lot': 1 };
		for( var j = 0; j < modes.length; j++ ) {
			var el = document.getElementById( 'btn' + modes[ j ] + id );
			el.className = el.className.replace( ' active', '' );
			if( modes[ j ] == mode ) {
				el.className += ' active';
				textures[ id ].weight = weights[ mode ];
			}
		}
	}
	setTextureUsage( 0, 'Few' );
	setTextureUsage( 1, 'Few' );
	setTextureUsage( 2, 'Normal' );
	setTextureUsage( 3, 'Lot' );
	setTextureUsage( 4, 'Lot' );

	generate();

	function createCloud() {

		var div = document.createElement( 'div'  );
		div.className = 'cloudBase';
		var x = 256 - ( Math.random() * 512 );
		var y = 256 - ( Math.random() * 512 );
		var z = 256 - ( Math.random() * 512 );
		var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px )';
		div.style.webkitTransform = t;
		div.style.MozTransform = t;
		div.style.oTransform = t;
		world.appendChild( div );

		for( var j = 0; j < 5 + Math.round( Math.random() * 10 ); j++ ) {
			var cloud = document.createElement( 'img' );
			cloud.style.opacity = 0;
			var r = Math.random();
			var src = 'troll.png';
			for( var k = 0; k < computedWeights.length; k++ ) { 
				if( r >= computedWeights[ k ].min && r <= computedWeights[ k ].max ) { 					
( function( img ) { img.addEventListener( 'load', function() {
 						img.style.opacity = .8;
					} ) } )( cloud );
 					src = computedWeights[ k ].src; 
}} 
cloud.setAttribute( 'src', src ); 
cloud.className = 'cloudLayer'; 		 			
var x = 256 - ( Math.random() * 512 ); 
var y = 256 - ( Math.random() * 512 ); 
var z = 100 - ( Math.random() * 200 ); 
var a = Math.random() * 360; 
var s = .25 + Math.random(); 
x *= .2; y *= .2; 
cloud.data = {x: x, y: y, z: z, a: a, s: s, speed: .1 * Math.random()}; 
var t = 'translateX( ' + x + 'px ) translateY( ' + y + 'px ) translateZ( ' + z + 'px ) rotateZ( ' + a + 'deg ) scale( ' + s + ' )'; 
cloud.style.webkitTransform = t; 
cloud.style.MozTransform = t; 			
cloud.style.oTransform = t; 			
div.appendChild( cloud ); 			
layers.push( cloud ); 		} 		 		
return div; 	 	
function generate() { 		
objects = []; 		
if ( world.hasChildNodes() ) { 			
while ( world.childNodes.length >= 1 ) {
				world.removeChild( world.firstChild );       
			} 
		}
		computedWeights = [];
		var total = 0;
		for( var j = 0; j < textures.length; j++ ) { 			
if( textures[ j ].weight > 0 ) {
				total += textures[ j ].weight;
			}
		}
		var accum = 0;
		for( var j = 0; j < textures.length; j++ ) { 			
if( textures[ j ].weight > 0 ) {
				var w = textures[ j ].weight / total;
				computedWeights.push( {
					src: textures[ j ].file,
					min: accum,
					max: accum + w
				} );
				accum += w;
			}
		}
		for( var j = 0; j < 5; j++ ) {
			objects.push( createCloud() );
		}
	}

Result

For the final effect, we fill cloudLayer div for an img with a cloud texture. The textures should be PNG with alpha channel to get the effect right.

css-3d-explosive-clouds

Conclusion

Of course, you can use any texture or set of textures you want: smoke puffs, plasma clouds, green leaves, flying toasters… Just change the background-image that a specific kind of cloud layer uses. Mixing different textures in different proportions gives interesting results.

Adding elements in random order is fine, but you can also create ordered structures, like trees, duck-shaped clouds or complex explosions. Try following a 3D curve and create solid trails of clouds. Create a multiplayer game to guess the shape of a 3D cloud. The possibilities are endless!

I hope it’s been an interesting tutorial and not too hard to follow.

view demo

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Posted by: Dhiraj kumar

Cool Animated Fire Effects with CSS3 and jQuery

This effect has been created with some jQuery for setting different CSS3 text-shadow’s in a div. You can check the demo code to see how it’s done. Basically, the Javascript function creates 3 text-shadows (white, yellow and red) with coprime “cycle durations” so the effect looks more random even though it’s totally deterministic.

css3-jquery-animated-fire-effect

Each shadow moves in the Y axis with a linear function and in the X axis with a cosine function. Pretty simple, but effective.

The CSS

#onfire{
      height:auto;
      padding-top:3em;
      font-size: 42px;
      font-weight: bold;
      text-align: center;
      color:brown;
}

The jQuery

<script type="text/javascript">
var step = 1;
function nextShadow(){
	$('#onfire span').each(function(){
	    y = parseFloat($(this).attr("y_pos"));
	    y += step + Math.random()*3;
	    $(this).attr("y_pos", y);
	    shaking = Math.random();
	    shadow1 = "0px 0px "+(y%5)+"px white";
	    shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red";
	    shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993";
	    shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow";
	    $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3);
	});
}
$(function(){
    $('#onfire span').each(function(){$(this).attr("y_pos","0");});
   setInterval(nextShadow, 50); 
});
</script>

view demo

Update:

I’ve added some randomisation to the algorithm, as well as an individual animation to each of the letters (which, as a drawback, makes the effect run less smooth). I’ve also added a fourth shadow in dark yellow. You can freely use the code by keeping the mention to this site on it.

Thanks for reading and looking forward to read your thoughts!

Posted by: Dhiraj kumar

HTML5 Logo Design Using CSS3

css3-html5-logoAs you probably found out, some time ago, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers.

So, I suppose that’s a good thing, that HTML5 got some branding, sounds very interesting!

While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me).

What about the logo? It’s A Bird… It’s A Plane…

No, it’s the new HTML5 logo and in this article I’ll design it using only CSS!

HTML5-logo

Concept

Getting back to our work, I thought about the ingredients I’d need for this angular orange shield:

CSS borders shapes

I used borders in order to create the shield icon.

:before and :after pseudo-elements

Using this type of selectors it’s helpful when you want to achieve a minimal HTML markup.

CSS3 opacity and transform

Even if the article’s name says : “HTML5 Logo made with CSS3”, this isn’t mainly about CSS3, but, opacity and transform properties were very useful for this.

Custom font

The method I’ll use to display the 5 number is to include the Geo font via Google Font API.

I know it’s not identical, but, at the time I wrote this article, I found it quite similar. Instead, I’d appreciate if you could suggest me a better font to use for the number.

For a perfect result, I guess I could have used CSS3 skew transformation and a lot of empty divs to create the “5” number …

HTML5

<div id="wrapper">
    <span>5</span>

    <div class="inner"></div>
    <div class="inner left"></div>
    <div class="inner left cover"></div>    
</div>

CSS3

#wrapper {
        position: relative;
        width: 340px;
        margin: 10px auto 30px auto;
    }

    #wrapper span {
        font: normal 475px/305px 'Geo', serif;
        width: 340px;
        text-align: center;
        position: absolute;
        top: 0;
        z-index: 9999;
        color: white;
    }    

    #wrapper:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #e34c26;
        width: 280px;
    }

    #wrapper:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #e34c26;
        width: 0;
        margin-left: 30px;
    }

    /**/

    .inner {
    position: absolute;
    top: 0;

    -moz-transform: scale(0.85);
    -webkit-transform: scale(0.85);
    -o-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);	
    }

    .inner:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #f06529;
        width: 280px;
    }

    .inner:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #f06529;
        width: 0;
        margin-left: 30px;

        position: relative;
        top: -1px; /* Fix spacing */
    }

    /**/

    .inner.left {
        width: 170px; /* half from the 340px total width */
        overflow: hidden;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);		
        transform: scale(1);		
    }

    .inner.left:before {
        border-top-color: #e34c26;
    }

    .inner.left:after {
        border-top-color: #e34c26;
    }

    /**/

    .inner.left.cover {
        z-index: 10000;
        opacity: 0.1;
    }

Custom Font From Google Font API

<link href='http://fonts.googleapis.com/css?family=Geo' rel='stylesheet' type='text/css'>

My initial result:

HTML5-logo

I know it’s not perfect, especially the 5 number, but I hope you will still like it!

Updated result

I finally made it, I updated the initial HTML5 logo. Instead the custom font, empty divs were used in order to replicate the logo.

Now you have it! Minimal HTML markup, CSS3 transforms and pseudo-elements:-

HTML5

<div id="wrapper">        
    <div id="five">
        <div class="top"></div>
        <div class="left-top"></div>
        <div class="middle"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left-bottom"></div>      
    </div>

    <div class="inner"></div>
    <div class="inner left"></div>

    <div class="inner left cover"></div>    
</div>

CSS

h1 {
        font: bold 90px 'arial black';
        margin: 20px 0 0 0;
        text-align: center;
    }

    p {
        text-align: center;
    }

    /**/

    #wrapper {
        position: relative;
        width: 340px;
        margin: 10px auto 30px auto;
    }

    /**/

    #five {
        position: absolute; 
        z-index: 1;
        top: 0;
    }

    #five div,  #five div:after {
        position: absolute;
        background: #fff;
    }    

    #five .left-top {
        width: 40px;
        height: 130px;
        top: 72px;
        left: 70px;
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);
		-ms-transform: skew(5deg);
		transform: skew(5deg);		
    }

    #five .top {
        width: 90px;
        height: 40px;        
        top: 72px;
        left: 80px;
    }

    #five .top:after {
        content: '';        
        left: 85px;
        top: 0;
        height: 40px;        
        width: 110px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
		-ms-transform: skew(-5deg);		
		transform: skew(-5deg);
    }

    #five .middle {
        width: 96px;
        height: 40px;
        top: 162px;
        left: 75px;
    }

    #five .middle:after {    
        content: '';        
        top: 0;
        left: 96px;
        width: 80px;
        height: 40px;        
    }

    #five .right {
        left: 225px;
        top: 162px;
        height: 125px;        
        width: 40px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
		-ms-transform: skew(-5deg);	
		transform: skew(-5deg);			
    }

    #five .bottom {	
        width: 90px;
        height: 40px;
        top: 260px;
        left: 87px;
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        -o-transform: rotate(14deg);  
		-ms-transform: rotate(14deg);		
		transform: rotate(14deg);		
    }

    #five .bottom:after {
        content: '';        
        left: 73px;
        top: -19px;
        height: 40px;        
        width: 94px;       
        -webkit-transform: rotate(-28deg);
        -moz-transform: rotate(-28deg);
        -o-transform: rotate(-28deg);
		-ms-transform: rotate(-28deg);	
		transform: rotate(-28deg);		
    }

    #five .left-bottom {	
        width: 40px;
        height: 65px;
        top: 222px;
        left: 80px;
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);    
		-ms-transform: skew(5deg);	
		transform: skew(5deg);
    }

     /**/   

    #wrapper:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #e34c26;
        width: 280px;
    }

    #wrapper:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #e34c26;
        width: 0;
        margin-left: 30px;
    }

    /**/

    .inner {
        position: absolute;
        top: 0;

        -moz-transform: scale(0.85);
        -webkit-transform: scale(0.85);
        -o-transform: scale(0.85);
		-ms-transform: scale(0.85);	
		transform: scale(0.85);		
    }

    .inner:before {
        content: '';
        display: block;
        /*340 total width */
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 345px solid #f06529;
        width: 280px;
    }

    .inner:after {
        content: '';
        display: block;
        /*280 total width */        
        border-left: 140px solid transparent;
        border-right: 140px solid transparent;
        border-top: 40px solid #f06529;
        width: 0;
        margin-left: 30px;

        position: relative;
        top: -1px; /* Fix spacing */
    }

    /**/

    .inner.left {
        width: 170px; /* half from the 340px total width */
        overflow: hidden;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
    }

    .inner.left:before {
        border-top-color: #e34c26;
    }

    .inner.left:after {
        border-top-color: #e34c26;
    }

    /**/

    .inner.left.cover {
        z-index: 10000;
        opacity: 0.1;
    }

HTML5-logo

Browser support

Latest versions of:

  • Mozilla
  • Chrome
  • Safari
  • Opera
  • IE9

view demo

 

Posted by: Dhiraj kumar

HTML5 canvas awesomeness – games roundup

HTML5 is being developed as the next major revision of HTML, the core markup language of the World Wide Web. Besides new elements like headersectionfooter, etc., the HTML5 brings you the canvas element.

The canvas is a rectangular area within you can use Javascript to draw graphics or other visual images on a web page. Although HTML5 is not a W3C recommendation yet (because of cross browsers issues), people already started to play with it, and when I say play, I mean it.

Today I’ll share with you some awesome HTML5 games demos that show the HTML5 canvas potential.

Agent 008 Ball

8ball

Z-Type

RGB Invaders

Pacman

Spy Chase

Biolab Disaster

Wolfenstein 3D

Fred Jones in Adventureland

Asteroids

Crystal Galaxy

Same Game

Final words

A common misconception is that HTML 5 can provide animation within web pages, which is totallyuntrue. Either JavaScript or CSS3 (or both) is necessary for animating HTML elements.

Posted by: Dhiraj kumar

An Awesome CSS3 Animated Dropdown Menu

It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.  This is something I wished to do for a while and I finally made it. I just added support for smartphones / mobile devices and fixed the navigation for iPad and iPhone also.

css3-animated-dropdown-menu-preview

Here’s a quick preview for the CSS3 animated dropdown menu that we’re going to create today:

css3-menu-animation

The HTML

The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:

<ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
                <a href="#">Categories</a>
                <ul>
                        <li><a href="#">CSS</a></li>
                        <li><a href="#">Graphic design</a></li>
                        <li><a href="#">Development tools</a></li>
                        <li><a href="#">Web design</a></li>
                </ul>
        </li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
</ul>

The CSS

I revised and improved the styles in order to create this unique CSS3 animated dropdown menu. So, below you can find the commented pieces of styles:

Mini reset

Reset the default ul styles.

#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
}

Main level

The #menu is basically the main ul for this menu. CSS3 things like gradientsshadows and rounded corners help us to create the below:

css3-menu-wrapper

#menu {
        width: 960px;
        margin: 60px auto;
        border: 1px solid #222;
        background-color: #111;
        background-image: linear-gradient(#444, #111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777;
}

Clear floats

Here is Nicolas Gallagher‘s clearing method I’ve been using lately:

#menu:before,
#menu:after {
        content: "";

        display: table;
}

#menu:after {
        clear: both;
}

#menu {
        zoom:1;
}

List elements

css3-menu-elements

Please notice the #menu li:hover > a  selector. This is perhaps the most important CSS trick for this CSS3 dropdown menu.

So, this is how this works: Select an “a” element that is child of a “li” ; the “li” element must be a descendant of the “#menu”. Read more here.

#menu li {
        float: left;
        border-right: 1px solid #222;
        box-shadow: 1px 0 0 #444;
        position: relative;
}

#menu a {
        float: left;
        padding: 12px 30px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
        color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
        color: #fafafa;
}

Submenus

With CSS3 transitons we can animate changes to CSS properties like margin or opacity. This is very cool and I’ve used this for animating the CSS3 sub-menus. The result is great if you ask me:

css3-menu-animation

#menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 1;
        background: #444;
        background: linear-gradient(#444, #111);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        border-radius: 3px;
        transition: all .2s ease-in-out;
}

#menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}

#menu ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
        box-shadow: none;
}

#menu ul a {
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
}

#menu ul a:hover {
        background-color: #0186ba;
        background-image: linear-gradient(#04acec, #0186ba);
}

First and last list elements styles

css3-dropdown-first-last-items

#menu ul li:first-child > a {
        border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
        content: '';
        position: absolute;
        left: 40px;
        top: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
        left: -6px;
        top: 50%;
        margin-top: -6px;
        border-left: 0;
        border-bottom: 6px solid transparent;
        border-top: 6px solid transparent;
        border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
        border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
        border-right-color: #0299d3;
        border-bottom-color: transparent;
}

#menu ul li:last-child > a {
        border-radius: 0 0 3px 3px;
}

The jQuery

As you already get used to, IE6 gets some extra attention:

$(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
        $('li').has('ul').mouseover(function(){
                $(this).children('ul').css('visibility','visible');
                }).mouseout(function(){
                $(this).children('ul').css('visibility','hidden');
                })
  }
});

While the :hover pseudo-class does not work for other elements than anchor, we just need to add this small jQuery snippet to fix it. It’s pretty self-explanatory.

Update: Mobile navigation support

css3-mobile-dropdown

This is something I wished to do for a while and I finally made it. I just added support for mobile devices and fixed the navigation for iPad.

You know how much I love CSS only solutions, but this time we’ll be using some jQuery to enhance this menu. To view the result, you can narrow your browser window or browse it with your smartphone.

The viewport meta tag

To maintain everything at the correct scale, the first thing added is the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Small HTML update

You need to wrap the above HTML structure using something like: <nav id="menu-wrap">. This will be our relative holder for the mobile navigation.

The jQuery add

After page loads, we’ll add the #menu-trigger element which does exactly what you think: will trigger the mobile menu when it will be clicked. Further, in the CSS, you’ll see that this element is displayed using CSS3 media queries.

Another thing here is the iPad device detection. As you can see below, we’ll remove the fancy transition effect and stick to toggling display: none/block. This way, the functionality will be maintained also on the iPad.

/* Mobile */
$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
$("#menu-trigger").on("click", function(){
        $("#menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#menu ul').addClass('no-transition');

The mobile CSS

Here, the CSS3 media queries do the trick. We’ll add CSS rules to override the initial styles:

#menu-trigger { /* Hide it initially */
        display: none;
}

@media screen and (max-width: 600px) {

        #menu-wrap {
                position: relative;
        }

        #menu-wrap * {
                box-sizing: border-box;
        }

        #menu-trigger {
                display: block; /* Show it now */
                height: 40px;
                line-height: 40px;
                cursor: pointer;
                padding: 0 0 0 35px;
                border: 1px solid #222;
                color: #fafafa;
                font-weight: bold;
                background-color: #111;
                /* Multiple backgrounds here, the first is base64 encoded */
                background: url(data:image/png;base64,iVBOR...) no-repeat 10px center, linear-gradient(#444, #111);
                border-radius: 6px;
                box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        }

        #menu {
                margin: 0; padding: 10px;
                position: absolute;
                top: 40px;
                width: 100%;
                z-index: 1;
                display: none;
                box-shadow: none;
        }

        #menu:after {
                content: '';
                position: absolute;
                left: 25px;
                top: -8px;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid #444;
        }       

        #menu ul {
                position: static;
                visibility: visible;
                opacity: 1;
                margin: 0;
                background: none;
                box-shadow: none;
        }

        #menu ul ul {
                margin: 0 0 0 20px !important;
                box-shadow: none;
        }

        #menu li {
                position: static;
                display: block;
                float: none;
                border: 0;
                margin: 5px;
                box-shadow: none;
        }

        #menu ul li{
                margin-left: 20px;
                box-shadow: none;
        }

        #menu a{
                display: block;
                float: none;
                padding: 0;
                color: #999;
        }

        #menu a:hover{
                color: #fafafa;
        }       

        #menu ul a{
                padding: 0;
                width: auto;
        }

        #menu ul a:hover{
                background: none;
        }

        #menu ul li:first-child a:after,
        #menu ul ul li:first-child a:after {
                border: 0;
        }               

}

@media screen and (min-width: 600px) {
        #menu {
                display: block !important;
        }
}       

/* iPad */
.no-transition {
        transition: none;
        opacity: 1;
        visibility: visible;
        display: none;
}

#menu li:hover > .no-transition {
        display: block;
}

view demo

Your turn

I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!

Posted by: Dhiraj kumar