View demo Download source

Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.

The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app.

The markup of a button is really simple. We just add specific shared classes:

<button class="btn btn-6 btn-6d">Button</button>

The common styles for all the buttons are some resets defined in .btn and we use the specific numbered classes for the different sets of styles. That numbered class are the shared styles for the sets. Each button has an additional specific class then. When using an icon, we add the icon-class which will use the pseudo element :before to add the character from the icon font.

An example for a specific button style is the following:

/* Button 6d */
.btn-6d {
	border: 2px dashed #226fbe;
}

.btn-6d:hover {
	background: transparent;
	color: #226fbe;
}

Which will of course depend on what we define as a common style in .btn and .btn-6.

This class structure is used for demo purposes. Using a single style, the properties should of course be merged into a single class.

I hope you enjoy the styles and find them inspiring!

View demo Download source

View demo Download source

Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements. For the icons we are using an icon font (Eco Ico by Matthew Skiles, created with the IcoMoon app) which we add using the :before pseudo-class.

The markup only uses an anchor for the icon and we wrap a set into a container so that we can create a variety of effects:

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
	<a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
	<a href="#" class="hi-icon hi-icon-screen">Desktop</a>
	<a href="#" class="hi-icon hi-icon-earth">Partners</a>
	<a href="#" class="hi-icon hi-icon-support">Support</a>
	<a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

An example for a hover effect is the simple rotation of the pseudo-element for the icon:

.hi-icon-effect-6 .hi-icon {
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
	transition: background 0.2s, color 0.2s;	
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
	animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}

Note that a dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 (effect 4)

I hope you enjoy the effects and find them inspiring!

View demo Download source

View demo Download source

Today we are going to experiment with animations and transitions on pseudo-elements (:before and :after) and we are going to discover their potential. We will talk a bit about animating pseudo-elements and look at four examples that use some special techniques to achieve a variety of effects.

Let’s first have a look at the advantages and disadvantages that come along with using animations and transitions together with pseudo-elements.

Advantages

• Simplification and optimization of HTML markup
• Taking advantage of CSS3 capacities
• Contributing to design

Disadvantages

• Only supported by modern browsers like Firefox, IE10 and recently Chrome (see this updated support table for more info)
• Does not work in mobile browsers yet
• Pseudo-elements cannot be identified by ID
• Pseudo-elements don’t appear in the DOM.
• Pseudo-elements can’t be animated with JavaScript

It is clear that there are more disadvantages than advantages, but I think that we should be excited about the future and give it a try!

The following four examples were created for this specific topic. It is clear that there are other ways for reaching the same visual effects, but for the sake of this experiment, we’ll of course use pseudo-elements so be aware that it only works in browsers that support their animations and transitions.

Please note:

• In this tutorial we will omit vendor prefixes, but you will find them in the download files.
• For both examples we will primarily use the box-shadow property and EM units.

A very interesting fact: pseudo-elements inherit the properties from their parent. In the case of the animations all the transformations affect them directly. This can come in handy if we want to maximize the support. Check out Use CSS transitions for pseudo-elements right now by Roman Komarov for more on that matter.

Let’s start!

Example 1

First, we’re going to do a fun thing: an animation of a drop of water falling into a rounded container (based on the Codrops logo)

The Markup

<div class="drop"></div>

We only have one element, although it could have another container that helps the change of scale.

The CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}

.drop {
	background: rgba(255, 255, 245, 1);
	border: 4px solid rgba(255, 245, 235, 1);
	border-radius: 100%;
	box-shadow: inset -0.1em 0 2em 0.5em rgba(255, 255, 255, 0.5), 
	            inset -0.1em 0 0.5em 0 rgba(0, 0, 0, 0.8);
	position: relative;
	margin: 0 auto;
	width: 15em; 
	height: 15em;
	overflow: hidden;
}

.drop:before,
.drop:after {
	content:"";
	display:block;
	position:absolute;
}

/* Drop */

.drop:before {
	background: rgba(167, 217, 234, 1);
	border-radius: 100%;
	
	/* Drop start */
	
	box-shadow: 0 0 0 0.1em rgba(167, 217, 234, 0.8), 
	            0 0 0 0.15em rgba(167, 217, 234, 0.8), 
	            0 0 0 0.2em rgba(167, 227, 234, 0.8), 
	            0 0 0 0.25em rgba(167, 227, 234, 0.8), 
	            0 0 0 0.3em rgba(167, 227, 234, 0.8), 
	            0 0 0 0.35em rgba(167, 227, 234, 0.8), 
	            0 0 0 0.4em rgba(167, 227, 234, 0.8), 
	            0 0 0 0.45em rgba(167, 227, 234, 0.8), 
	            0 0 0 0.5em rgba(167, 227, 234, 0.8);
	top: 0%; left: 50%;
	
	/* The "width" and "height" of the division must be smaller than the "box-shadow" total size. So we can control different variant sizes. */
	
	width: 0.2em; 
	height: 0.2em;
	animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}

/* Surface */

.drop:after {
	background: rgb(52, 152, 219);
	background: linear-gradient(rgba(52, 255, 255, 1) 0%, rgba(52, 152, 219, 1) 10%, rgba(152, 252, 219, 1) 100%);
	border-radius: 100% 0 50% 0;
	left: 0; 
	bottom: 0;
	width: inherit; 
	height: 3em;
	opacity: 0.7;
	animation: surface 3s linear infinite;
}

/* Drop animation */

@keyframes fall  {

	/* Drop form */

	5%, 15%  {
		box-shadow: 0 -1.4em 0 0.1em rgba(167, 217, 234, 1), 
		            0 -0.8em 0 0.15em rgba(167, 217, 234, 1), 
		            0 -0.3em 0 0.2em rgba(167, 217, 234, 1), 
		            0 -0.1em 0 0.25em rgba(167, 217, 234, 1), 
		            0 0 0 0.3em rgba(167, 217, 234, 1), 
		            0 0.2em 0 0.35em rgba(167, 217, 234, 1), 
		            0 0.4em 0 0.4em rgba(167, 217, 234, 1), 
		            0 0.6em 0 0.45em rgba(167, 217, 234, 1), 
		            0 0.8em 0 0.5em rgba(167, 217, 234, 1);
	}
	
	/* Drop fall */
	
	16%  {
		top: 80%;
	}
	
	/* Contact surface */
	
	18%  {
		top: 80%;
		box-shadow: 1em -8em 0 0.2em rgba(177, 227, 234, 1), 
		            -2.2em -3.8em 0 0.1em rgba(177, 227, 234, 1), 
		            3em -2.85em 0 0.3em rgba(177, 227, 234, 1), 
		            -3.5em -4em 0 0.2em rgba(177, 227, 234, 1), 
		            0 0 0 0.3em rgba(177, 227, 234, 1), 
		            2em -2em 0 0.2em rgba(177, 227, 234, 1), 
		            -0.3em -3em 0 0.2em rgba(177, 227, 234, 1), 
		            0.5em -5em 0 0.35em rgba(177, 227, 234, 1), 
		            -3em -1em 0 0.3em rgba(177, 227, 234, 1);
	}
	
	/* Dispersion */
	
	30%  {
		top: 90%;
		box-shadow: 1.5em 0 0 0.2em rgba(252, 252, 255, 0.1), 
		            -2em 0 0 0.15em rgba(252, 252, 255, 0.1), 
		            3em 0 0 0.2em rgba(252, 252, 255, 0.1), 
		            -2em 0 0 0.25em rgba(252, 252, 255, 0.1), 
		            0 0 0 0.2em rgba(252, 252, 255, 0.1), 
		            2.35em 0 0 0.3em rgba(252, 252, 255, 0.1), 
		            -0.5em 0 0 0.2em rgba(252, 252, 255, 0.1), 
		            1em 0 0 0.3em rgba(252, 252, 255, 0.1), 
		            -4em 0 0 0.4em rgba(252, 252, 255, 0.1);
	}
	
	/* Hidden */
	
	40%, 100%  {
		top: 95%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1.8em 0.5em 0 0.2em rgba(255, 255, 255, 0), 
		            -3em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
		            4em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
		            -3.5em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
		            0 0 0 0.3em rgba(255, 255, 215, 0), 
		            2.45em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
		            -0.8em 0.5em 0 0.2em rgba(255, 255, 255, 0), 
		            1.5em 0.5em 0 0.3em rgba(255, 255, 255, 0), 
		            -4.5em 0.5em 0 0.2em rgba(255, 255, 255, 0);
	}
}

/* Animation of water surface */

@keyframes surface  {
	50%  {
		border-radius: 0 75% 0 75%;
		opacity: 0.5;
		height: 3.5em;
	}
}

Here are two tips for obtaining more naturalistic animations:

• Watch and analyze references like images, videos, etc.
• Experiment with different speeds for transitioning CSS properties and for keyframes.

More about animating characters, but definitely fun and worth exploring is the “The Animator’s Survival Kit” by Richard Williams.

Let’s go back to our subject. In this last example the :before pseudo-class has the same width like the father. In order not to have unexpected problems of overflowing we will use the “inherit” value.

Example 2

In this example we will create a hover effect by using a transition.

The Markup

<div class="circle">
	<h1>codrops</h1>
</div>

Here we just have a container and a heading to separate the text from the rest.

The CSS

.circle {
	background: rgb(255,255,255);
	border-radius: 100%;
	cursor: pointer;
	position: relative;
	margin: 0 auto;
	width: 15em; 
	height: 15em;
	overflow: hidden;
	transform: translateZ(0);
}

.circle h1 {
	color: rgba(189, 185, 199,0);
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	font-size: 1.6em;
	line-height: 8.2em;
	text-align: center;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	user-select: none;
	transition: color 0.8s ease-in-out;
}

.circle:before,
.circle:after {
	border-radius: 100%;
	content:"";
	position: absolute;
	top: 0; 
	left: 0;
	width: inherit; 
	height: inherit;			
	box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), 
	            inset 0 10.6em 0 rgba(30, 140, 209, 0.2), 
	            inset -10.6em 0 0 rgba(30, 140, 209, 0.2), 
	            inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
	transition: box-shadow 0.75s;
}

/* We rotate the :after pseudo-element to get the edge from the corner, we could also just do that with box-shadows. */

.circle:after  {
	transform: rotate(45deg);
}

/* There is no problem using "pseudo-class + pseudo-element" :) */

.circle:hover:before,
.circle:hover:after  {
	box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), 
	            inset 0 0.86em 0 rgba(252, 150, 0, 0.5), 
	            inset -0.86em 0 0 rgba(0, 255, 0, 0.5),	
	            inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}

.circle:hover > h1  {
	color: rgba(185, 185, 185,1);
}

You have to use only one color at a time, to avoid an unwanted mixing of colors by overlapping when triggering the hover.

Example 3

How could we dare to leave out the indispensable spinner loading animation!
The idea here is to merge colors through the rotation. It’s very simple!

The Markup

<div class="loading"></div>

We’ll just use one single element for the markup.

The CSS

.loading  {
	background: rgba(0, 50, 250, 0);
	position: relative;
	margin: 5em auto 0 auto;
	width: 3em; 
	height: 3em;
	animation-name:rotate;
}

.loading,
.loading:before,
.loading:after  {
	border-radius: 100%;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

.loading:before,
.loading:after  {
	content: "";
	position: absolute;
	top: 0; 
	left: 0;
	width: inherit; 
	height: inherit;
}

.loading:before  {
	background: rgba(200, 250, 100, 0);
	animation-name: ring;
}

.loading:after  {
	background: rgba(250, 0, 200, 0);
	animation-name: ring2;
}

@keyframes rotate  {
	0%  {
		transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
		box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
					inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
					inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
					inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
	}
	
	/* hidden */
	
	85%, 100%  {
	
	/* 360deg * 10 */
	
		transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
		box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
					inset 0 0 0 rgba(252, 150, 0, 0), 
					inset 0 0 0 rgba(0, 255, 0, 0), 
					inset 0 0 0 rgba(0, 150, 255, 0);
	}
}

@keyframes ring  {
	0%  {
		transform: scaleX(0.1) scaleY(0.5);
		box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
					inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
					inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
					inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
	}
	
	/* hidden */
	
	75%, 100%  {
		transform: scaleX(2) scaleY(2.1);
		box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
					inset 0 0 0 rgba(252, 150, 0, 0), 
					inset 0 0 0 rgba(0, 255, 0, 0), 
					inset 0 0 0 rgba(0, 150, 255, 0);
	}
}

@keyframes ring2  {
	0%  {
		transform: scaleX(0.5) scaleY(0.1);
		box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
					inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
					inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
					inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
	}
	
	/* hidden */
	
	65%, 100%  {
		transform: scaleX(2) scaleY(2.1);
		box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
					inset 0 0 0 rgba(252, 150, 0, 0), 
					inset 0 0 0 rgba(0, 255, 0, 0), 
					inset 0 0 0 rgba(0, 150, 255, 0);
	}
}

This is a great example of experimenting with timings and speeds to get a really smooth animation.

Example 4

This is the most crazy and extravagant example from all: a little one-eyed flying creature!
We are going to use both, animations and transitions.

The Markup

<div class="pojoro">●</div>

We will use one element for the creature’s eye.

The CSS

.pojoro  {
	background: rgba( 255, 255, 255, 1);
	background: radial-gradient(ellipse at center, rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
	border-radius: 100%;
	
	/* box-shadow: secondary color, body, eyelash */
	
	box-shadow: 0 0 0 0.2em rgb(146,89,149), 
				0 0 0.1em 0.55em rgb(176,89,179), 
				inset 0 0.2em 0 0 rgb(136,79,139);
	
	/* ojo (eye) */
	
	color: rgba( 40, 40, 40, 0.8);
	line-height: 1.1em;
	padding-left: 0.18em;
	-webkit-font-smoothing: antialiased;
	user-select: none;
	
	/* usability, position and transition */
	
	cursor: pointer;
	position: relative;
	margin: 5em auto 0 auto;
	width: 1em; height: 1em;
	transform-origin: center;
	transition: all 0.8s ease-in-out;
	
	/* Separate the animations to have a better control over the eye and the body */
	
	animation: eye 2.2s ease-in-out infinite, body 1.15s 1.8s linear infinite; 
} 

/* Elevate and distort the creature. */

.pojoro:hover  {
	transform: scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
}

/* wings */

.pojoro:before,
.pojoro:after  {
	background: rgba(0,0,0,0);
	border-radius: 100%;
	content: "";
	
	/* display:none, hide wings */
	
	display: none;
	position: absolute;
	width: 1em; height: 0.1em;
	-webkit-filter: blur(1px);
	transition: all 0.2s;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.pojoro:before  {
	top: 25%; left: 1.45em;
	margin-left: -1em;
	transform-origin: left;
	transform: rotate(-60deg);
	animation-name: wings;
}

.pojoro:after  {
	top: 25%; left: -2.2em;
	margin-left: 1em;
	transform-origin: right;
	transform: rotate(60deg);
	animation-name: wings2;
}

.pojoro:hover:before,
.pojoro:hover:after  {
	background: rgba(100,100,100,0.8);
	
	/* display:block, we allow the wings to appear and the animation starts */
	
	display: block;
	margin-left: 0em;
	width: 2em; height: 0.3em;
}

@keyframes eye  {

	/* Eye movement */
	
	5%, 10%  {
		line-height: 1.2em;
		padding-left: 0em;
	}
	15%, 20%  {
		line-height: 1.15em;
		padding-left: 0.4em;
	}
	
	/* Eyelash movement */
	
	25%  {
		box-shadow: 0 0 0 0.2em rgb(146,89,149), 
					0 0 0.1em 0.55em rgb(166,89,169), 
					inset 0 1em 0 0 rgb(136,79,139);
	}
	23%, 27%  {
		box-shadow: 0 0 0 0.2em rgb(146,89,149), 
					0 0 0.1em 0.55em rgb(166,89,169), 
					inset 0 0.2em 0 0 rgb(136,79,139);
	}
}

@keyframes body  {
	50%  {
		width: 1.4em; height: 1.4em;
	} 
}

@keyframes wings  {
	50%  {
		transform: rotate(65deg);
	}
}

@keyframes wings2  {
	50%  {
		transform: rotate(-65deg);
	}
}

On hover we activate the wings animations and the body stars to elevate.
And that was the last example!

In conclusion, pseudo-element are a great thing and combining them with animations and transitions allow for the creation of some fun effects without using too much markup or images. Wider browser support is hopefully coming soon; until then we can play with it and discover fun and interesting techniques.

What do you think about it?

I hope that this will be useful for you and serve as an inspiration.

References

• Use CSS transitions for pseudo-elements right now Roman Komarov.
• Transitions and Animations on CSS Generated Content support table by Chris Coyier.
• Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) on Stackoverflow

View demo Download source

View demo Download source

There is something really interesting about Natural Language UIs and after visiting awesome Escape Flight, we wanted to play around with NL forms and custom form elements. The idea is to turn a classic form into one that uses natural language to obtain information from the user. For that we’ll construct a sentence where some words and parts are select elements and text inputs. We’ll then transform the select elements so that we can customize them.

Natural language forms are quite suitable for some UI cases, not for all, of course. They have a couple of limitations but they can also be more engaging for users if used in the right place and in the right way. Anyway, we wanted to give this concept a try and we’ll show you how we did it.

The Markup

The HTML will be composed of a form with a sentence and some select and text input elements:

<form id="nl-form" class="nl-form">
	I feel like eating 
	<select>
		<option value="1" selected>any food</option>
		<option value="2">Indian</option>
		<option value="3">French</option>
		<option value="4">Japanese</option>
		<option value="2">Italian</option>
	</select>
	<br />in a
	<select>
		<option value="1" selected>standard</option>
		<option value="2">fancy</option>
		<option value="3">hip</option>
		<option value="4">traditional</option>
		<option value="2">fine</option>
	</select>
	restaurant
	<select>
		<option value="1" selected>anytime</option>
	 	<option value="1">at 7 p.m.</option>
	 	<option value="2">at 8 p.m.</option>
	 	<option value="3">at 9 p.m.</option>
	</select>
	in <input type="text" value="" placeholder="any city" data-subline="For example: <em>Los Angeles</em> or <em>New York</em>"/>
	<div class="nl-submit-wrap">
		<button class="nl-submit" type="submit">Find a restaurant</button>
	</div>
	<div class="nl-overlay"></div>
</form>

We want to transform the select elements to a custom drop-down list, like this:

<div class="nl-field nl-dd">
	<a class="nl-field-toggle">any food</a>
	<ul>
		<li class="nl-dd-checked">any food</li>
		<li>Indian</li>
		<li>French</li>
		<li>Japanese</li>
		<li>Italian</li>
	</ul>
</div>

The toggle is the visual part in the sentence. We’ll hide the list and when we click on the toggle we want the list to appear with a nice transition. Once we click on one of the list items, we’ll replace the toggle value with the newly selected one.

The text input will also be transformed into a similar element:

<div class="nl-field nl-ti-text">
	<a class="nl-field-toggle">any city</a>
	<ul>
		<li class="nl-ti-input">
			<input type="text" value="" placeholder="any city" />
			<button class="nl-field-go">Go</button>
		</li>
		<li class="nl-ti-example">For example: <em>Los Angeles</em> or <em>New York</em></li>
	</ul>
</div>

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files. Some proprietary browser rules will be listed, though.

Let’s first add some icons (checkmark and arrow):

@font-face {
	font-family: 'nlicons';
	src:url('../fonts/nlicons/nlicons.eot');
	src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/nlicons/nlicons.woff') format('woff'),
		url('../fonts/nlicons/nlicons.ttf') format('truetype'),
		url('../fonts/nlicons/nlicons.svg#nlicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

The form will have some general styles:

/* general style for the form */
.nl-form {
	width: 100%;
	margin: 0.3em auto 0 auto;
	font-size: 4em;
	line-height: 1.5;
}

Let’s remove the default styling for all the lists:

.nl-form ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

And we’ll also normalize the form elements and make them look like everything else:

.nl-form input,
.nl-form select,
.nl-form button {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: inline-block;
	padding: 0;
	margin: 0;
}

We don’t want any outline on a focussed element:

.nl-form input:focus {
	outline: none;
}

Now, let’s take care of the custom field element. Remember, this is the custom class that we give to the transformed drop-down list and the text input element:

.nl-field {
	display: inline-block;
	position: relative;
}

Using inline-block will keep the element in the flow of our sentence.

When we click on the toggle, we want the whole thing to open. For that we also need to set a high z-index to the custom field:

.nl-field.nl-field-open {
	z-index: 10000;
}

The toggle itself, which is the visible part in the sentence, will have the following style:

.nl-field-toggle,
.nl-form input,
.nl-form select  {
	line-height: inherit;
	display: inline-block;
	color: #b14943;
	cursor: pointer;
	border-bottom: 1px dashed #b14943;
}

The same style we’ll apply to the default form elements if JS is disabled.

The unordered list will be hidden and positioned absolutely. We will use the visibility transition trick to be able to transition the opacity properly. The trick is about setting a delay for the visibility transition by default (when it disappears) and no delay when the .nl-field-open class is applied to its parent (when it appears):

/* drop-down list / text element */
.nl-field ul {
	position: absolute;
	visibility: hidden;
	background: #76C3BD;
	left: -0.5em;
	top: 50%;
	font-size: 80%;
	opacity: 0;
	transform: translateY(-40%) scale(0.9);
	transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s;
}

.nl-field.nl-field-open ul {
	visibility: visible;
	opacity: 1;
	transform: translateY(-50%) scale(1);
	transition: visibility 0s 0s, opacity 0.3s, transform 0.3s;
}

The style for the list elements and specifically for the ones of the drop-down are the following:

.nl-field ul li {
	color: #fff;
	position: relative;
}

.nl-dd ul li {
	padding: 0 1.5em 0 0.5em;
	cursor: pointer;
	white-space: nowrap;
}

.nl-dd ul li.nl-dd-checked {
	color: #478982;
}

.no-touch .nl-dd ul li:hover {
	background: rgba(0,0,0,0.05);
}

.no-touch .nl-dd ul li:hover:active {
	color: #478982;
}

Let’s define the icons for some of our elements:

/* icons for some elements */
.nl-dd ul li.nl-dd-checked:before,
.nl-submit:before,
.nl-field-go:before {
	font-family: 'nlicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.nl-dd ul li.nl-dd-checked:before {
	content: "\e000";
	position: absolute;
	right: 1em;
	font-size: 50%;
	line-height: 3;
}

The text input replacement field will have a minimum width:

.nl-ti-text ul {
	min-width: 8em;
}

The text input field, which we are still using but wrapped in our overlay field structure, will have the following style:

.nl-ti-text ul li.nl-ti-input input {
	width: 100%;
	padding: 0.2em 2em 0.2em 0.5em;
	border-bottom: none;
	color: #fff;
}

The arrow button will be positioned absolutely and we’ll out it on the right side:

.nl-form .nl-field-go {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	cursor: pointer;
	background: rgba(0,0,0,0.1);
	width: 1.8em;
	text-align: center;
	color: transparent;
}

The icon itself will have the following style:

.nl-field-go:before {
	content: "\e001";
	font-size: 75%;
	color: #fff;
	width: 100%;
	line-height: 2.5;
	display: block;
}

Let’s change the placeholder text colors to fit into the color scheme:

/* custom placeholder color */
input::-webkit-input-placeholder {
	color: rgba(255,255,255,0.8);
}

input:active::-webkit-input-placeholder ,
input:focus::-webkit-input-placeholder {
	color: rgba(255,255,255,0.2);
}

input::-moz-placeholder {
	color: rgba(255,255,255,0.8);
}

input:active::-moz-placeholder,
input:focus::-moz-placeholder {
	color: rgba(255,255,255,0.2);
}

input:-ms-input-placeholder {  
	color: rgba(255,255,255,0.8);
}

input:active::-ms-input-placeholder ,
input:focus::-ms-input-placeholder {
	color: rgba(255,255,255,0.2);
}

The description text item will have a smaller font size:

/* example field below text input */
.nl-ti-text ul li.nl-ti-example {
	font-size: 40%;
	font-style: italic;
	font-weight: 400;
	padding: 0.4em 1em;
	color: rgba(0,0,0,0.2);
	border-top: 1px dashed rgba(255,255,255,0.7);
}

.nl-ti-text ul li.nl-ti-example em {
	color: #fff
}

Let’s style the submit button and the icon:

.nl-submit-wrap {
	margin-top: 0.4em;
}

.nl-form .nl-submit {
	line-height: 3;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	background: #76C3BD;
	color: #fff;
	padding: 0 1em 0 0;
	font-size: 40%;
	font-weight: bold;
	letter-spacing: 3px;
}

.nl-submit:before {
	content: "\e001";
	color: #fff;
	float: left;
	padding: 0 0.7em;
	margin: 0 0.8em 0 0;
	background: #69B1A9;
}

.no-touch .nl-form .nl-submit:hover,
.no-touch .nl-form .nl-submit:active {
	background: #69B1A9;
}

.no-touch .nl-form .nl-submit:hover:before {
	background: #58a199;
}

The overlay will be a fixed element and we’ll show it when one of the field elements are opened using the general sibling selector:

.nl-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	z-index: 9999;
	visibility: hidden;
	transition: visibility 0s 0.3s, opacity 0.3s;
}

.nl-field.nl-field-open ~ .nl-overlay {
	opacity: 1;
	visibility: visible;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	transition-delay: 0s;
}

Last, but not least, let’s add some media queries for adjusting the size on smaller devices:

@media screen and (max-width: 45em) {
	.nl-form {
		font-size: 3em;
	}
}

@media screen and (max-width: 25em) {
	.nl-form {
		font-size: 2em;
	}
}

And that’s all the style. Now, let’s have a look at the JavaScript.

The JavaScript

Let’s start by defining the object representing the form element:

function NLForm( el ) {	
	// the form element
	this.el = el;
	// the overlay
	this.overlay = this.el.querySelector( '.nl-overlay' );
	// array with all the possible custom fields
	this.fields = [];
	// counter for each custom field
	this.fldOpen = -1;
	this._init();
}

We will start by creating some custom structure by replacing all the select and input elements inside the form. We will define a object that represents each one of these custom fields – NLField.

NLForm.prototype = {
	_init : function() {
		var self = this;
		Array.prototype.slice.call( this.el.querySelectorAll( 'select' ) ).forEach( function( el, i ) {
			self.fldOpen++;
			self.fields.push( new NLField( self, el, 'dropdown', self.fldOpen ) );
		} );
		Array.prototype.slice.call( this.el.querySelectorAll( 'input' ) ).forEach( function( el, i ) {
			self.fldOpen++;
			self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
		} );
	},
	...
}

function NLField( form, el, type, idx ) {
	this.form = form;
	// the original HTML element
	this.elOriginal = el;
	this.pos = idx;
	this.type = type;
	this._create();
	this._initEvents();
}
NLField.prototype = {
	_create : function() {
		if( this.type === 'dropdown' ) {
			this._createDropDown();	
		}
		else if( this.type === 'input' ) {
			this._createInput();	
		}
	},
	...
}

The structure will be different depending if it’s a select box or an input field.

NLField.prototype = {
	...
	_createDropDown : function() {
		var self = this;
		this.fld = document.createElement( 'div' );
		this.fld.className = 'nl-field nl-dd';
		this.toggle = document.createElement( 'a' );
		this.toggle.innerHTML = this.elOriginal.options[ this.elOriginal.selectedIndex ].innerHTML;
		this.toggle.className = 'nl-field-toggle';
		this.optionsList = document.createElement( 'ul' );
		var ihtml = '';
		Array.prototype.slice.call( this.elOriginal.querySelectorAll( 'option' ) ).forEach( function( el, i ) {
			ihtml += self.elOriginal.selectedIndex === i ? '
' + el.innerHTML + '
' : '
' + el.innerHTML + '
';
			// selected index value
			if( self.elOriginal.selectedIndex === i ) {
				self.selectedIdx = i;
			}
		} );
		this.optionsList.innerHTML = ihtml;
		this.fld.appendChild( this.toggle );
		this.fld.appendChild( this.optionsList );
		this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
		this.elOriginal.style.display = 'none';
	},
	_createInput : function() {
		var self = this;
		this.fld = document.createElement( 'div' );
		this.fld.className = 'nl-field nl-ti-text';
		this.toggle = document.createElement( 'a' );
		this.toggle.innerHTML = this.elOriginal.placeholder;
		this.toggle.className = 'nl-field-toggle';
		this.optionsList = document.createElement( 'ul' );
		this.getinput = document.createElement( 'input' );
		this.getinput.setAttribute( 'type', 'text' );
		this.getinput.placeholder = this.elOriginal.placeholder;
		this.getinputWrapper = document.createElement( 'li' );
		this.getinputWrapper.className = 'nl-ti-input';
		this.inputsubmit = document.createElement( 'button' );
		this.inputsubmit.className = 'nl-field-go';
		this.inputsubmit.innerHTML = 'Go';
		this.getinputWrapper.appendChild( this.getinput );
		this.getinputWrapper.appendChild( this.inputsubmit );
		this.example = document.createElement( 'li' );
		this.example.className = 'nl-ti-example';
		this.example.innerHTML = this.elOriginal.getAttribute( 'data-subline' );
		this.optionsList.appendChild( this.getinputWrapper );
		this.optionsList.appendChild( this.example );
		this.fld.appendChild( this.toggle );
		this.fld.appendChild( this.optionsList );
		this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
		this.elOriginal.style.display = 'none';
	},
	...
}

Finally we will bind some events to the custom fields. For the dropdown we want to update the form field with the value chosen from the list of options, and for the input the User will type the desired value and either press enter, the submit button or simply click the overlay to update the form value.

NLField.prototype = {
	...
	_initEvents : function() {
		var self = this;
		this.toggle.addEventListener( 'click', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
		this.toggle.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );

		if( this.type === 'dropdown' ) {
			var opts = Array.prototype.slice.call( this.optionsList.querySelectorAll( 'li' ) );
			opts.forEach( function( el, i ) {
				el.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
				el.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
			} );
		}
		else if( this.type === 'input' ) {
			this.getinput.addEventListener( 'keydown', function( ev ) {
				if ( ev.keyCode == 13 ) {
					self.close();
				}
			} );
			this.inputsubmit.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close(); } );
			this.inputsubmit.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close(); } );
		}

	},
	_open : function() {
		if( this.open ) {
			return false;
		}
		this.open = true;
		this.form.fldOpen = this.pos;
		var self = this;
		this.fld.className += ' nl-field-open';
	},
	close : function( opt, idx ) {
		if( !this.open ) {
			return false;
		}
		this.open = false;
		this.form.fldOpen = -1;
		this.fld.className = this.fld.className.replace(/\b nl-field-open\b/,'');

		if( this.type === 'dropdown' ) {
			if( opt ) {
				// remove class nl-dd-checked from previous option
				var selectedopt = this.optionsList.children[ this.selectedIdx ];
				selectedopt.className = '';

				opt.className = 'nl-dd-checked';
				this.toggle.innerHTML = opt.innerHTML;

				// update selected index value
				this.selectedIdx = idx;
				// update original select element´s value
				this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;
			}
		}
		else if( this.type === 'input' ) {
			this.getinput.blur();
			this.toggle.innerHTML = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.placeholder;
			this.elOriginal.value = this.getinput.value;
		}
	}
	...
}

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

View demo Download source

Today we want to share an experimental “morphing” slideshow with you. The idea is to transition between different devices that show a screenshot of a responsive website or app by applying a “device class”. By using the same elements and pseudo-elements for all the devices, we can create an interesting morph effect. We will control the classes and the switching of the image with some JavaScript. We’ve also added an option for autoplaying the slideshow and for rotating some of the devices.

There are four devices which we will use to display different screenshots of responsive designs. Two of them, the tablet and the smartphone, can also be rotated. What we do is to interchange the classes depending on the device and since the device has transitions defined, we’ll see a morphing effect. Note that we also animate pseudo-elements here which might not be supported in all browsers (especially mobile browsers).

The rotation on the last two devices happens by adding another class which will rotate the device 90 degrees.

The images are changed by adding the new picture and fading out the previous one. This also creates a morphing effect where the image gets stretched or squeezed to accomodate the new size.

The better technology to choose for this kind of effect is undoubtedly SVG, but for practicality reasons we started this experiment with CSS and JS.

We hope you like and enjoy it and get inspired!

View demo Download source

View demo Download source

Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize.

Preparing the icon font

Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool. Icon fonts behave like any font, so you can easily change the color, adapt the size and it won’t get pixelized. Perfect for retina devices without having to use multiple assets for different screen resolutions.

The first thing we need to do is to create the icons for the menu. I use Illustrator, but any vector graphics editor like, for example Inkscape, will do. We need to create each icon and export them as a SVG file. To make sure the icon will work properly in every browser, we have to convert all lines into full objects, and merge all the objects into one big shape for each icon. Once all have been exported into nice SVG files, we can import them all into the IcoMoon App tool:

We can also enhance our font with icons from the big library that IcoMoon offers. Once we have all the icons we need, we click on the “Font” button at the bottom of the page to enter the detailed settings. On this page we can choose the encoding settings for the font, and also choose if we want to assign some letters for each icon, or prefer to use the Private Use Area of the font to make sure screen readers won’t be able to output them. I recommend using the default settings that work pretty well.

When we click on “Download” we get a ZIP file with 4 font formats (SVG, EOT, TTF and WOFF), the CSS styling and a demo page.

The first thing to do to be able to use the icons is to copy and paste the CSS IcoMoon provides to the top of our CSS file and make sure we also copy the font folder. There’s also a little “hack” to make the fonts look nicer on Chrome Windows you might want to check it out.

The HTML of the menu

Here is what the HTML for our navigation looks like:

<nav  id="menu" class="nav">	
	<ul>
		<li>
			<a  href="#" title="">
				<span  class="icon"> <i aria-hidden="true"  class="icon-home"></i></span><span>Home</span>
			</a>
		</li>
		<li>		
			<a href="#" title=""><span class="icon"> <i aria-hidden="true" class="icon-services"></i></span><span>Services</span></a>	
		</li>	
		<li>
			<a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-portfolio"></i></span><span>Portfolio</span></a>
		</li>
		<li>
			<a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-blog"></i></span><span>Blog</span></a>	
		</li>
		<li>
			<a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-team"></i></span><span>The  team</span></a>	
		</li>
		<li>
			<a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-contact"></i></span><span>Contact</span></a>
		</li>
	</ul>
</nav>

To use the icon font, we simply use the class “icon-iconname” inside an i element (a span will work as well). Also note that we added a no-js class to the body that will be changed to js with Modernizr. The idea is to be able to leave the menu open if the user has JavaScript disabled. We’ll also use Modernizr to detect touch support.

The CSS & JavaScript

Note that I won’t prefix the CSS3 properties here but you will find the prefixed version in the files.

The global CSS that gets applied to all screen sizes looks as follows:

/* Global CSS that are applied for all screen sizes */

.nav ul {
	max-width: 1240px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.5em;
	font-weight: 300;
}

.nav li span {
	display: block;
}

.nav a {
	display: block;
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	transition: color .5s, background .5s, height .5s;
}

.nav i{
	/* Make the font smoother for Chrome */
	transform: translate3d(0, 0, 0);
}

/* Remove the blue Webkit background when element is tapped */

a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

We want a first little transition on the whole navigation that lowers the opacity of all the items, except the one that is being hovered. This is the code for that:

/* Hover effect for the whole navigation to make the hovered item stand out */

.no-touch .nav ul:hover a {
	color: rgba(249, 249, 249, .5);
}

.no-touch .nav ul:hover a:hover {
	color: rgba(249, 249, 249, 0.99);
}

Then we want to add some nice background colors to all of the items. The code below uses a nth-child technique to select the list items. This way, you can add as many list items as you want, the color code will repeat itself.

.nav li:nth-child(6n+1) {
	background: rgb(208, 101, 3);
}

.nav li:nth-child(6n+2) {
	background: rgb(233, 147, 26);
}

.nav li:nth-child(6n+3) {
	background: rgb(22, 145, 190);
}

.nav li:nth-child(6n+4) {
	background: rgb(22, 107, 162);
}

.nav li:nth-child(6n+5) {
	background: rgb(27, 54, 71);
}

.nav li:nth-child(6n+6) {
	background: rgb(21, 40, 54);
}

Using a min-width media query, we can target screens that are bigger than 800px (50em, with a body font size of 15px) to transform our list into a nice horizontal navigation:

@media (min-width: 50em) {

	/* Transforms the list into a horizontal navigation */
	.nav li {
		float: left;
		width: 16.66666666666667%;
		text-align: center;
		transition: border .5s;
	}

	.nav a {
		display: block;
		width: auto;
	}

We continue with the nth-child selecting technique, to add a 4px border with different colors to each of our menu items. We apply it on hover, but also on focus and active to make it work on touch devices and on keyboard access.

	/* hover, focused and active effects that add a little colored border to the different items */

	.no-touch .nav li:nth-child(6n+1) a:hover,
	.no-touch .nav li:nth-child(6n+1) a:active,
	.no-touch .nav li:nth-child(6n+1) a:focus {
		border-bottom: 4px solid rgb(174, 78, 1);
	}

	.no-touch .nav li:nth-child(6n+2) a:hover,
	.no-touch .nav li:nth-child(6n+2) a:active,
	.no-touch .nav li:nth-child(6n+2) a:focus {
		border-bottom: 4px solid rgb(191, 117, 20);
	}

	.no-touch .nav li:nth-child(6n+3) a:hover,
	.no-touch .nav li:nth-child(6n+3) a:active,
	.no-touch .nav li:nth-child(6n+3) a:focus {
		border-bottom: 4px solid rgb(12, 110, 149);
	}

	.no-touch .nav li:nth-child(6n+4) a:hover,
	.no-touch .nav li:nth-child(6n+4) a:active,
	.no-touch .nav li:nth-child(6n+4) a:focus {
		border-bottom: 4px solid rgb(10, 75, 117);
	}

	.no-touch .nav li:nth-child(6n+5) a:hover,
	.no-touch .nav li:nth-child(6n+5) a:active,
	.no-touch .nav li:nth-child(6n+5) a:focus {
		border-bottom: 4px solid rgb(16, 34, 44);
	}

	.no-touch .nav li:nth-child(6n+6) a:hover,
	.no-touch .nav li:nth-child(6n+6) a:active,
	.no-touch .nav li:nth-child(6n+6) a:focus {
		border-bottom: 4px solid rgb(9, 18, 25);
	}

Then we place the icons and the text:

	/* Placing the icon */
	
	.icon {
		padding-top: 1.4em;
	}

	.icon + span {
		margin-top: 2.1em;
		transition: margin .5s;
	}

We animate the height of the elements when they are hovered:

	/* Animating the height of the element*/
	.nav a {
		height: 9em;
	}

	.no-touch .nav a:hover ,
	.no-touch .nav a:active ,
	.no-touch .nav a:focus {
		height: 10em;
	}	

	/* Making the text follow the height animation */
	.no-touch .nav a:hover .icon + span {
		margin-top: 3.2em;
		transition: margin .5s;
	}

Then we position the icons and prepare them for the CSS transition:

	/* Positioning the icons and preparing for the animation*/
	.nav i {
		position: relative;
		display: inline-block;
		margin: 0 auto;
		padding: 0.4em;
		border-radius: 50%;
		font-size: 1.8em;
		box-shadow: 0 0 0 0.8em transparent;
		background: rgba(255,255,255,0.1);
		transform: translate3d(0, 0, 0);
		transition: box-shadow .6s ease-in-out;
	}	

To give the visuel effect we want, we transition a box shadow and change its size from 0.8em to 0, and its color from transparent to some color with a high opacity. This is also where we close our first media-query.

	
	/* Animate the box-shadow to create the effect */
	.no-touch .nav a:hover i,
	.no-touch .nav a:active i,
	.no-touch .nav a:focus i {		
		box-shadow: 0 0 0px 0px rgba(255,255,255,0.2);
		transition: box-shadow .4s ease-in-out;
	}
		
}

We set a second media query to make some little adjustments for screens between 800 and 980px:

@media (min-width: 50em) and (max-width: 61.250em) {

	/* Size and font adjustments to make it fit better */
	.nav ul {
		font-size: 1.2em;
	}

}

Now that we have finished the “desktop” version (with BIG quotation mark since more and more tablets now have 1024px and larger screens), we take care of the “global” CSS for screens that are smaller than 800px which equals to 49.938em here, using a max-width media query.

/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {		
	
	/* Instead of adding a border, we transition the background color */
	.no-touch .nav ul li:nth-child(6n+1) a:hover,
	.no-touch .nav ul li:nth-child(6n+1) a:active,
	.no-touch .nav ul li:nth-child(6n+1) a:focus {
		background: rgb(227, 119, 20);
	}

	.no-touch .nav li:nth-child(6n+2) a:hover,
	.no-touch .nav li:nth-child(6n+2) a:active,
	.no-touch .nav li:nth-child(6n+2) a:focus {
		background: rgb(245, 160, 41);
	}

	.no-touch .nav li:nth-child(6n+3) a:hover,
	.no-touch .nav li:nth-child(6n+3) a:active,
	.no-touch .nav li:nth-child(6n+3) a:focus {
		background: rgb(44, 168, 219);
	}

	.no-touch .nav li:nth-child(6n+4) a:hover,
	.no-touch .nav li:nth-child(6n+4) a:active,
	.no-touch .nav li:nth-child(6n+4) a:focus {
		background: rgb(31, 120, 176);
	}

	.no-touch .nav li:nth-child(6n+5) a:hover,
	.no-touch .nav li:nth-child(6n+5) a:active,
	.no-touch .nav li:nth-child(6n+5) a:focus {
		background: rgb(39, 70, 90);
	}

	.no-touch .nav li:nth-child(6n+6) a:hover,
	.no-touch .nav li:nth-child(6n+6) a:active,
	.no-touch .nav li:nth-child(6n+6) a:focus {
		background: rgb(32, 54, 68);
	}

	.nav ul li {
		transition: background 0.5s;
	}	

}

For screen size between 520px (32.5em) and 799px (49.938em), we want to display our menu into a 2 columns and 3 rows layout. We add some padding to make the elements easy to “tap”, and display the icons on the left and the text on the right.

/* CSS for a 2x3 columns version */

@media (min-width: 32.5em) and (max-width: 49.938em) {
	
	/* Creating the 2 column layout using floating elements once again */
	.nav li {
		display: block;
		float: left;
		width: 50%;
	}
	
	/* Adding some padding to make the elements look nicer*/
	.nav a {
		padding: 0.8em;		
	}

	/* Displaying the icons on the left, and the text on the right side using inline-block */
	.nav li span, 
	.nav li span.icon {
		display: inline-block;
	}

	.nav li span.icon {
		width: 50%;
	}

	.nav li .icon + span {
		font-size: 1em;
	}

	.icon + span {
		position: relative;
		top: -0.2em;
	}

The animation for big screen is too complex to fit into smaller screens, so we adapt it to make it simpler and more discreet and simply animate the border. This is where we close our media query.

	
	/* Adapting the icons to animate the size and border of the rounded background in a more discreet way */
	.nav li i {
		display: inline-block;
		padding: 8% 9%;
		border: 4px solid transparent;
		border-radius: 50%;
		font-size: 1.5em;
		background: rgba(255,255,255,0.1);
		transition: border .5s;
	}

	/* Transition effect on the border color */
	.no-touch .nav li:hover i,
	.no-touch .nav li:active i,
	.no-touch .nav li:focus i {
		border: 4px solid rgba(255,255,255,0.1);
	}

}

Again, for smaller screens we adapt the font-size and width.

	/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {
	
	.nav li span.icon {
		width: 50%;
	}

	.nav li .icon + span {
		font-size: 0.9em;
	}
}

For very small screens, we hide the navigation and display a “menu” button the user can click if he wants to display the navigation. To do this, we rely on some lines of JavaScript:

	
//  The function to change the class
var changeClass = function (r,className1,className2) {
	var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
	if( regex.test(r.className) ) {
		r.className = r.className.replace(regex,' '+className2+' ');
    }
    else{
		r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
    }
    return r.className;
};	

//  Creating our button for smaller screens
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

//  Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {
	changeClass(this, 'navtoogle active', 'navtoogle');
}

In order to have a cleaner HTML, I chose to create the “menu” button and insert it in the DOM using JavaScript. The function changeClass helps us to toggle the class between active and no class when the users clicks on the button.

Now that we have all we need for the small screen version, we can style it with CSS. The following code styles the menu button:

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
	display: none;	
	width: 100%;
	padding: 0.5em 0.5em 0.8em;
	font-family: 'Lato',Calibri,Arial,sans-serif;
	font-weight: normal;
	text-align: left;
	color: rgb(7, 16, 15);
	font-size: 1.2em;
	background: none;	
	border: none;
	border-bottom: 4px solid rgb(221, 221, 221);
	cursor: pointer;
}

.icon-menu {
	position: relative;
	top: 3px;
	line-height: 0;
	font-size: 1.6em;
}

By default, the menu button is hidden. We want to display it for screens smaller than 519px (32.438em):

@media (max-width: 32.438em) {

	/* Unhiding the styled menu link */
	.nav .navtoogle{
		margin: 0;
		display: block;
	}

We animate the height of the navigation when the button is clicked. To close the navigation, we give it a 0em height, to open it, we give it a 30em max-height. If JavaScript is not enabled, we don’t have any button, so we use the no-js class to always display the navigation.

	/* Animating the height of the navigation when the button is clicked */
	
	/* If JavaScript is disabled, the menu stays open */
	.no-js .nav ul {
		max-height: 30em;
		overflow: hidden;
	}

When JavaScript is enabled we hide the menu by default, and display it when the users clicks on the button which then gets the active class:

	/* When JavaScript is enabled, we hide the menu */
	.js .nav ul {
		max-height: 0em;
		overflow: hidden;
	}
	
	/* Displaying the menu when the user has clicked on the button */
	.js .nav .active + ul {		
		max-height: 30em;
		overflow: hidden;
		transition: max-height .4s;
	}

We adapt the layout for smaller screens, presenting the navigation in a list of items with the icon on the left and the text on the right side:

	/* Adapting the layout of the menu for smaller screens: icon on the left and text on the right */
	
	.nav li span {
		display: inline-block;
		height: 100%;
	}

	.nav a {
		padding: 0.5em;		
	}
	
	.icon + span {
		margin-left: 1em;
		font-size: 0.8em;
	}

We also add a 8px border on the left of each item with a nice color

	
	/* Adding a left border of 8 px with a different color for each menu item*/
	.nav li:nth-child(6n+1) {
		border-left: 8px solid rgb(174, 78, 1);
	}

	.nav li:nth-child(6n+2) {
		border-left: 8px solid rgb(191, 117, 20);
	}

	.nav li:nth-child(6n+3) {
		border-left: 8px solid rgb(13, 111, 150);
	}

	.nav li:nth-child(6n+4) {
		border-left: 8px solid rgb(10, 75, 117);
	}

	.nav li:nth-child(6n+5) {
		border-left: 8px solid rgb(16, 34, 44);
	}

	.nav li:nth-child(6n+6) {
		border-left: 8px solid rgb(9, 18, 25);
	}

The navigation looks nice when testing its small version on desktop. But on mobile devices the items might be hard to tap. Using Modernizr we can detect the touch capability of the device. If the device has touch capabilities, a touch class is added to the body. We can use this class to enhance the experience on touch devices and make the navigation items a little bit bigger so that the user can tap them more easily. And here we close our last media query.

	/* make the nav bigger on touch screens */
	.touch .nav a {
		padding: 0.8em;
	}
}

And that’s it, we’ve build a nice, touch-friendly and retina-ready navigation that works fine on desktop, tablet and mobile devices. Hope you liked it!

Image Credits: Featured image created with Minimal Apple Product Templates from WeGraphics.net

View demo Download source

View demo Download source

Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.

Please note that this is just for showcasing some interesting effects and for inspiration. It is not a slider or anything like that. We’ll just apply some classes to make the page transition visible, not for navigating.

The CSS animations are divided into different sets, depending on what they do.

For showcasing the page transitions, we’ve used the following structure:

<div id="pt-main" class="pt-perspective">
	<div class="pt-page pt-page-1">
		<h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
	</div>
	<div class="pt-page pt-page-2"><!-- ... --></div>
	<!-- ... -->
</div>

The perspective container is relative and we add a perspective of 1200px to it. The following styles are needed for all animations to work:

.pt-perspective {
	position: relative;
	width: 100%;
	height: 100%;
	perspective: 1200px;
	transform-style: preserve-3d;
}

.pt-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	overflow: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

.pt-page-current,
.no-js .pt-page {
	visibility: visible;
}

.no-js body {
	overflow: auto;
}

.pt-page-ontop {
	z-index: 999;
}

The .pt-page-ontop is used for some of the page transitions where we need one of the pages to stay on top of the other one.

An example for animation classes and keyframe animations are the following ones that scale the pages in different directions and fade them in or out:

/* scale and fade */

.pt-page-scaleDown {
	animation: scaleDown .7s ease both;
}

.pt-page-scaleUp {
	animation: scaleUp .7s ease both;
}

.pt-page-scaleUpDown {
	animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
	animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
	animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
	animation: scaleUpCenter .4s ease-out both;
}

/************ keyframes ************/

/* scale and fade */

@keyframes scaleDown {
	to { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUp {
	from { opacity: 0; transform: scale(.8); }
}

@keyframes scaleUpDown {
	from { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownUp {
	to { opacity: 0; transform: scale(1.2); }
}

@keyframes scaleDownCenter {
	to { opacity: 0; transform: scale(.7); }
}

@keyframes scaleUpCenter {
	from { opacity: 0; transform: scale(.7); }
}

For the purpose of this demonstration we apply the respective animation classes to the current page and the incoming one. For example:

//...

case 17:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromRight pt-page-ontop';
	break;
case 18:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromLeft pt-page-ontop';
	break;
case 19:
	outClass = 'pt-page-scaleDown';
	inClass = 'pt-page-moveFromBottom pt-page-ontop';
	break;

// ...

Check out the demo where you can simply iterate through the whole set of page transitions using the first button. You can also choose a specific effect from the drop-down menu.

I hope you enjoy this and get inspired to build some exciting things!

View demo Download source

View demo Download source

When writing articles, blog posts, tutorials, magazine entries or anything else, you will often want to include some images, charts, photographs, or even videos and code snippets to illustrate your content.

That being said, you will most likely want to attach some kind of caption to these elements, and perhaps number them so your readers can keep track of your thoughts.

And that’s exactly what we are going to do in today’s tutorial: combining the usage of the <figure> element with CSS counters to make your inserted elements (especially images) sexy as hell!

The figure element

The <figure> element is intended to be used along with the <figcaption> element to mark up images, illustrations, photos, diagrams and code snippets among other things. Here is what the spec says about this element:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Here is the basic markup for a figure:

<figure>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>

Here are a few notes regarding the figure element:

• The <figcaption> element is optional
• You can only have one <figcaption> element in a <figure> element
• You can embed as many other elements as you want in a <figure> element
• When dealing with an image, you can leave the alt attribute empty if you include a <figcaption> to prevent screen readers from reading twice the same content

For more information about the <figure> element, I recommend you this great article from HTML5Doctor. There is also this entry at Mozilla Developer Network and of course the official specification.

Examples

For example, if you want to show a snippet of code, you can do it this way with the <figure> element:

<figure>
	<code>body { background: white; }</code>
	<figcaption>Some illustrated code with figure<figcaption>
</figure>

Basically, instead of adding your images this way:

<img src="cute-kitty.jpg" alt="This is a cute kitty!" />

… you can do something like this:

<figure>
	<img src="cute-kitty.jpg" alt="" />
	<figcaption>This is a cute kitty!<figcaption>
<figure>

Browser support

The <figure> is part of the “new” HTML5 elements, which are not understood by a range of old browsers including Internet Explorer 8. Since you don’t want to make your layout explode because of this tutorial, I’d recommend you include a polyfill to support these elements.

The most known and used polyfill for HTML is html5shiv which you can embed directly from the Google CDN by adding this line into your files:

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

Note, how we use IE-specific conditional comments to prevent other browsers and IE versions greater than 8 from loading this script.

If you wish to know the story behind the html5shiv polyfill, please read this wonderful blog post from Paul Irish.

CSS Counters

CSS Counters have to be one of the most unknown CSS properties in the whole range of properties there is. It makes automatic numbering possible exclusively through CSS, without the help of neither HTML nor JavaScript.

This module relies on two properties and one value:

• counter-reset which is used to initialize and reset one or several counters
• counter-increment which is used to increment one or several counters
• counter() is a valid value for ::before and ::after pseudo-elements, accepting a counter name as parameter in order to display its value

Pretty straight forward, isn’t it? Basically, you initialize a counter with the name you want to the value you want (mostly 0) and you tell a given selector to increment this counter at each occurrence. This counter can then be displayed using CSS generated content and the style and location can be specified with the :before and :after pseudo-elements.

The most basic implementation of a CSS counter has to be this one:

/* 1. We initialize the counter */
body {
	counter-reset: myAwesomeCounter;
}

/* 2. We tell each occurrence of this element to increment the counter */
.myAwesomeElement {
	counter-increment: myAwesomeCounter;
}

/* 3. We display the value of the counter before the element */
.myAwesomeElement:before {
	content: counter(myAwesomeCounter);
}

Note: I lied when I said “2 properties and 1 value”, there is also a counters() value which is almost never used. Please refer to this entry at MDN for more information about it.

Example

Back to our case, shall we? We want to number our images so that they are prefixed by “Fig. 1 – …”, “Fig. 2 – …” and so on, right? Let’s do it simply.

.article {
	counter-reset: figures;
}

.figure {
	counter-increment: figures;
}

.figure figcaption:before {
	content: 'Fig. ' counter(figures) ' - ';
}

Those 3 lines of CSS are enough to number our figures automagically. Isn’t that awesome?

Wrapping everything

The basics

Now that we know how to use both the <figure> element and CSS Counters, it is time to make what we wanted to do: embellish our blog posts.

But before jumping into the code, wouldn’t it be cool if we could easily make floated or centered figures, just by adding a simple class? Sure, it would be. Let’s do this!

We will start by giving our figures some decent styles. Nothing too fancy, something simple and elegant enough to make a kind of frame to your images.

.figure {
	padding: 0.9em;
	border: 3px solid #f5bca8;
	background: #fff;
	margin: 0 auto 1em;
}

In order to horizontally center images and prevent them from breaking out of their container (the <figure> element), we need to add some rules to them (could as well be <video> or something else).

.figure img {
	margin: 0 auto;
	display: block;
	max-width: 100%;
}

Now the caption! We make it stand out a bit, change the typography and center it horizontally. But frankly the styling is up to you. Just remember a caption should be removed without too much hassle, so don’t write a wall of text.

.figure figcaption {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.8em;
	padding: .5em;
	text-align: center;
	color: #fff;
	background: #f5bca8;
}

Numbering

Great, we still haven’t implemented the counter to number our figures. As we’ve seen in the previous section, it is very easy to do.

.article {
	counter-reset: figures;
}

.figure figcaption {
	counter-increment: figures;
}

.figure figcaption:before {
	content: 'Fig. ' counter(figures) ' - ';
}

If you don’t necessarily want to number your images, you can limit this to a given class on the parent element. Perhaps you’ll give your wrapper a .numbered-figures class so that it enables image numbering. Easy enough:

.numbered-figures 							{ counter-reset: figures; }
.numbered-figures .figure figcaption 		{ counter-increment: figures; }
.numbered-figures .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }

Variations

We have the basics for our system, but we still haven’t set up a way to have floated figures across the page. We will then make two classes:

.figure-left {
	float: left;
	margin: 0 1em .5em 0;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

.figure-right {
	float: right;
	margin: 0 0 .5em 1em;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

For those of you who do not know min-content, it is a valid value for width, min-width, max-width, height, min-height and max-height among other properties include flexbox and grid layout.

In our case, we want the figure element to be as small as possible; basically, we want it to wrap around the image. Because <figure> is a block-level element, it stretches to the width of its parent (100%). We could set it to float: left or display: inline-block to make it collapse to the widest piece of content but if the caption happens to be wider than the image we have a problem.

We could hard code the width to the figure element depending on the image, but it is inflexible and non-responsive. That’s why we introduce the min-content value. To put it simple, it tells the <figure> element to reduce its width so that the image fits inside it perfectly even if the caption has to wrap.

This value is supported by Firefox 3+ with the -moz- prefix and Chrome 18+ with the -webkit- prefix. The unprefixed version is currently not supported by any browser but might be in the future so we leave it.

Non-supportive browsers behave as expected: no width is set, the floated <figure> element wraps around the widest element, either the image or the caption.

Note: there are other values similar to min-content like max-content, fit-content and available. Please refer to this entry at MDN or the working draft of CSS Intrinsic & Extrinsic Sizing Module Level 3for further information about these.

Last but not least, we need to change/remove the max-width value on images for floated figures. Either you want images to have their own size, and you need to set max-width to none, or you want to set a maximum width (which I recommend) and you define whatever you want:

.figure-right img,
.figure-left img {
	max-width: 300px; /* Adjust to suit your needs */
}

Small screens

To make sure floated figures don’t behave oddly on small screens, we need to override a couple of styles to make them full-width and horizontally centered. If you’re building your site using a mobile first approach, you’ll do it the other way but it doesn’t matter really.

@media (max-width: 767px) {
	.figure-left,
	.figure-right {
		float: none;
		margin: 0 0 1em 0;
		width: 100%;
	}

	.figure img {
		max-width: 100%;
	}
}

Usage

Using this is easy as a pie. Either you want an horizontally centered figure in which case you simply have to use the .figure class. Or — most likely — you want to float the figure either on the left or on the right in which case you have to use both the .figure class and a variation class (e.g .figure-left).

<figure class='figure'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>


<figure class='figure figure-left'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>


<figure class='figure figure-right'>
	<img src="path/to/your/image.jpg" alt="" />
	<figcaption>Here is the legend for your image<figcaption>
</figure>

Final words

That’s pretty much it guys, the only thing left to do is to implement this on your site. Please have a look at the associated demo to see what it looks like or see it live on my own site.

Thanks for reading and happy coding!

View demo Download source

View demo Download source

Today I want to show you how to create a fun little typography effect with CSS animations and text shadows. Maybe you know those eerie opening sequences of movie trailers where some text is being faded in on a dark background. After seeing Introducting Briefs (which is not a terror movie trailer but a preview for an interesting app) I got inspired for recreating the effect using CSS.

The idea is to blur text and make it appear with a rotation while animating the space between the letters. This can be achieved in a variety of ways using properties like the new CSS filters, animating padding or margin and more. Here we’ll simply use text shadows and letter-spacing to achieve the desired effect. Since we will need to control each letter, we’ll use Dave Rupert’s Lettering.js to wrap the words and letters into multiple spans.

So, let’s do it.

The idea is to have a couple of sentences fade in with the aforementioned effect, so we’ll want to wrap every appearing bit into an h2:

<div class="os-phrases">
	<h2>Sometimes it's better</h2>
	<h2>to hide</h2>
	<h2>in order to</h2>
	<h2>survive evil</h2>
	<h2>Thanatos</h2>
	<h2>This fall</h2>
	<h2>Prepare</h2>
	<h2>Refresh to replay</h2>
</div>

Remember, this is just a experimental effect; let’s not be too strict with markup best practices :)

Now that we have the pieces of the sentences in place, let’s apply lettering to wrap every word and letter into a span. We will actually need a letter to be wrapped into two spans because we want to use perspective on each single letter. So let’s go nuts and do this:

$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();

This will created the following insane structure:

<div class="os-phrases" id="os-phrases">
	<h2>
		<span class="word1">
			<span class="char1">
				<span class="char1">
				  S
				</span>
			</span>
			<span class="char2">
				<span class="char1">
				  o
				</span>
			</span>
			<span class="char3">
				<span class="char1">
				  m
				</span>
			</span>
			<!-- ... -->
		</span> <!-- /word1 -->
		<!-- ... -->
	</h2>
	<h2>
		<!-- ... -->
	</h2>
	<!-- ... -->
</div>

We don’t really have to go that nuts but we want to be persnickety when it comes to the slight rotation: we want it to be in perspective. Rotating it without perspective will not differ too much but we want the real deal. If we are already using lettering.js we might as well go all the way.

Now that we’ve created a span wrapping hell, let’s make use of this mess and style the nested letters :)

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

Our heading will be placed blatantly on the screen, absolutely, occupying all space:

.os-phrases h2 {
	font-family: 'Dosis', 'Lato', sans-serif;
	font-size: 70px;
	font-weight: 200;
	height: 100%;
	width: 100%;
	overflow: hidden;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 14px;
	text-align: center;
}

We want our sentences not to wrap but we want them to be centered across the screen, vertically and horizontally. How do we do that? Yes, right, we’ll abuse flexbox for that:

.os-phrases h2,
.os-phrases h2 > span {
	height: 100%;
	/* Centering with flexbox */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

Note that the default value for flex-wrap is nowrap which is exactly what we want, so no need to add it here.
This will center our sentence parts nicely.

Let’s add some space between words:

.os-phrases h2 > span {
	margin: 0 15px;
}

The first wrapper for a letter will have perspective:

.os-phrases h2 > span > span {
	display: inline-block;
	perspective: 1000px;
	transform-origin: 50% 50%;
}

The letters itself will be transparent and we’ll run an animation on them. The animation will take 5.2 seconds.

.os-phrases h2 > span > span > span {
	display: inline-block;
	color: hsla(0,0%,0%,0);
	transform-style: preserve-3d;
	transform: translate3d(0,0,0);
	animation: OpeningSequence 5.2s linear forwards;
}

Before we get into the animation, let’s already define the delays for the sentence parts. The 5th sentence part, the one that has our imaginary movie title “Thanatos”, will be a special one and we’ll make it take longer and appear a bit later. The 6th and 7th will follow each other more quickly.

.os-phrases h2:nth-child(2) > span > span > span {
	animation-delay: 5s;
}

.os-phrases h2:nth-child(3) > span > span > span {
	animation-delay: 10s;
}

.os-phrases h2:nth-child(4) > span > span > span {
	animation-delay: 15s;
}

.os-phrases h2:nth-child(5) > span > span > span {
	font-size: 150px;
	animation-delay: 21s;
	animation-duration: 8s;
}

.os-phrases h2:nth-child(6) > span > span > span {
	animation-delay: 30s;
}

.os-phrases h2:nth-child(7) > span > span > span {
	animation-delay: 34s;
}

And the last one? We’ll give that one a special animation, but let’s take a look at the main one first.

In this animation we first want the text-shadow to make the letters look very blurry. The letter spacing will be very large and the letters will be rotated on the Y-axis, so that we only see it as a slice. The opacity is 0.2.

Half-way through the animation, we’ll sharpen up the letters and reduce the letter spacing to 14px, increase opacity and rotate them to 0 so that we are looking right at them.

In the last step, we’ll fade the letters out and scale them up a bit, making them slightly blurry again:

@keyframes OpeningSequence {
	0% {
		text-shadow: 0 0 50px #fff;
		letter-spacing: 80px;
		opacity: 0.2;
		transform: rotateY(-90deg);
	}
	50% {
		text-shadow: 0 0 1px #fff;
		letter-spacing: 14px;
		opacity: 0.8;
		transform: rotateY(0deg);
	}
	85% {
		text-shadow: 0 0 1px #fff;
		opacity: 0.8;
		transform: rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow: 0 0 10px #fff;
		opacity: 0;
		transform: translateZ(130px);
		pointer-events: none;
	}
}

Our last sentence part will have another animation, one that will simply fade it in and leave it standing there:

.os-phrases h2:nth-child(8) > span > span > span {
	font-size: 30px;
	animation: FadeIn 4s linear 40s forwards;
}

@keyframes FadeIn { 
	0% {
		opacity: 0;
		text-shadow: 0 0 50px #fff;
	}
	100% {
		opacity: 0.8;
		text-shadow: 0 0 1px #fff;
	}
}

Last, but not least, we’ll add some emphasis on specific words by making them bold:

/* Bold words */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
	font-weight: 600;
}

And that’s it! I hope this was fun and inspirational!

View demo Download source

View demo Download source

Today we’ll show you how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”). The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it’s clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We’ll add some more style and effects to it in order to make it a bit more interesting.

So, let’s do it!

The Markup

For the HTML we will use a nav element and inside we’ll add a div that will contain the menu icon and the label. We’ll use an unordered list for the menu items:

<nav id="dr-menu" class="dr-menu">
	<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">Account</a></div>
	<ul>
		<li><a class="dr-icon dr-icon-user" href="#">Xavier Densmore</a></li>
		<li><a class="dr-icon dr-icon-camera" href="#">Videos</a></li>
		<li><a class="dr-icon dr-icon-heart" href="#">Favorites</a></li>
		<li><a class="dr-icon dr-icon-bullhorn" href="#">Subscriptions</a></li>
		<li><a class="dr-icon dr-icon-download" href="#">Downloads</a></li>
		<li><a class="dr-icon dr-icon-settings" href="#">Settings</a></li>
		<li><a class="dr-icon dr-icon-switch" href="#">Logout</a></li>
	</ul>
</nav>

Each menu item will have a little icon, so we’ll give them all different classes for that. The icons that we’ll be using are from IcoMoon and we’ve created a custom icon set with their brilliant app.

Let’s take a look at the CSS.

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

First, we will include our icon font:

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

The main nav container will have some general styles, like font size, line-height, color and the dimensions. We want it to be flexible but we don’t want it to become too large or too small, so we’ll set a max-width and min-width:

.dr-menu {
	width: 100%;
	max-width: 400px;
	min-width: 300px;
	position: relative;
	font-size: 1.3em;
	line-height: 2.5;
	font-weight: 400;
	color: #fff;
	padding-top: 2em;
}

The division that contains the menu icon span and the label link will be positioned absolutely and we’ll set the cursor to “pointer”. It needs a high z-index to guarantee that the unordered list does not stay on top of it:

.dr-menu > div  {
	cursor: pointer;
	position: absolute;
	width: 100%;
	z-index: 100;
}

The menu icon span in our trigger division will also be positioned absolutely and we’ll give it a transition:

.dr-menu > div .dr-icon {
	top: 0;
	left: 0;
	position: absolute;
	font-size: 150%;
	line-height: 1.6;
	padding: 0 10px;
	transition: all 0.4s ease;
}

When we click on the trigger division, we will give a class called “dr-menu-open” to the nav. The menu icon will then slide to the left and we’ll also translate it for the maount of its own width so that it’s put back nicely into place without spilling over:

.dr-menu.dr-menu-open > div .dr-icon {
	color: #60a773;
	left: 100%;
	transform: translateX(-100%);
}

In the end of the CSS we will add our icon classes from IcoMoon. The icon in the span for the menu icon will be a bit different, and we’ll use the pseudo class :after to add the little triangle. So, let’s define that as follows:

.dr-menu > div .dr-icon:after {
	content: "\e008";
	position: absolute;
	font-size: 50%;
	line-height: 3.25;
	left: -10%;
	opacity: 0;
}

The icon will be absolute and we’ll pull it into place by giving it a left of -10%. The initial opacity is set to 0 because we don’t want to see it initially when the menu is closed.

Once we open the menu, we will want it to become visible:

.dr-menu.dr-menu-open > div .dr-icon:after {
	opacity: 1;
}

The label, which is an anchor in our HTML, will get some general styling and we’ll give it a padding so that it’s next to the menu icon. We’ll also add a transition because we want to animate it up, once we open the menu, which we will do by translating it on the Y-axis:

.dr-menu > div .dr-label {
	padding-left: 3em;
	position: relative;
	display: block;
	color: #60a773;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 2.75;
	transition: all 0.2s ease-in;
}

.dr-menu.dr-menu-open > div .dr-label {
	transform: translateY(-90%);
}

The unordered list will initially be invisible by having a opacity of 0:

.dr-menu ul {
	padding: 0;
	margin: 0 3em 0 0;
	list-style: none;
	opacity: 0;
	position: relative;
	z-index: 0;
	pointer-events: none;
	transition: opacity 0s linear 205ms;
}

When we open the menu we want it to get visible and a high z-index so that the trigger div does not cover it:

.dr-menu.dr-menu-open ul {
	opacity: 1;
	z-index: 200;
	pointer-events: auto;
	transition: opacity 0s linear 0s;
}

The two transitions are for opening and closing the menu. When we open the menu, we want it to appear immediately without a delay and when we close it, i.e. remove the class, we want that it happens with a delay. That delay is defined by the delay of the last item in the list, as we will see shortly.

The list items will also be invisible and we’ll set a transition for the opacity:

.dr-menu ul li {
	display: block;
	margin: 0 0 5px 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.dr-menu.dr-menu-open ul li {
	opacity: 1;
}

Now, each list item will appear with a different delay: the first item will fade in immediately and the last item will appear in the end:

.dr-menu.dr-menu-open ul li:nth-child(2) {
	transition-delay: 35ms;
}

.dr-menu.dr-menu-open ul li:nth-child(3) {
	transition-delay: 70ms;
}

.dr-menu.dr-menu-open ul li:nth-child(4) {
	transition-delay: 105ms;
}

.dr-menu.dr-menu-open ul li:nth-child(5) {
	transition-delay: 140ms;
}

.dr-menu.dr-menu-open ul li:nth-child(6) {
	transition-delay: 175ms;
}

.dr-menu.dr-menu-open ul li:nth-child(7) {
	transition-delay: 205ms;
}

The links will have some padding and we’ll set them as inline-blocks:

.dr-menu ul li a {
	display: inline-block;
	padding: 0 20px;
	color: #fff;
}

And we’ll change the color on hover:

.dr-menu ul li a:hover {
	color: #60a773;
}

Last, but not least, let’s define the icon pseudo-elements:

.dr-icon:before, 
.dr-icon:after {
	position: relative;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.dr-menu ul .dr-icon:before {
	margin-right: 15px;
}

.dr-icon-bullhorn:before {
	content: "\e000";
}

.dr-icon-camera:before {
	content: "\e002";
}

.dr-icon-heart:before {
	content: "\e003";
}

.dr-icon-settings:before {
	content: "\e004";
}

.dr-icon-switch:before {
	content: "\e005";
}

.dr-icon-download:before {
	content: "\e006";
}

.dr-icon-user:before {
	content: "\e001";
}

.dr-icon-menu:before {
	content: "\e007";
}

And that’s all the style. Let’s take a look at the JavaScript.

The JavaScript

We’ll create a small script that will take care of the menu functionality. When we click on the trigger division, we want the menu wrapper to get the class “dr-menu-open”. Since we will be animating the label out and the menu icon to the right, we want the closing to happen only when we click on the menu icon, just like in the YouTube menu:

var YTMenu = (function() {

	function init() {
		
		[].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el, i ) {

			var trigger = el.querySelector( 'div.dr-trigger' ),
				icon = trigger.querySelector( 'span.dr-icon-menu' ),
				open = false;

			trigger.addEventListener( 'click', function( event ) {
				if( !open ) {
					el.className += ' dr-menu-open';
					open = true;
				}
			}, false );

			icon.addEventListener( 'click', function( event ) {
				if( open ) {
					event.stopPropagation();
					open = false;
					el.className = el.className.replace(/\bdr-menu-open\b/,'');
					return false;
				}
			}, false );

		} );

	}

	init();

})();

And that’s it! I hope you enjoyed this tutorial and find it useful!

View demo Download source