Skype nous a toujours été "vendu" comme un logiciel sécurisé où toutes les conversations audio ou textes étaient chiffrés. Malheureusement pour Microsoft, il semblerait que ce ne soit plus le cas puisque des tests ont prouvé que des machines "Microsoft" accèdent aux liens que les gens s'échangent dans les conversations Skype. L'objectif annoncé par Microsoft est de combattre le spam en détectant les liens frauduleux.

Mais les faits sont là. S'ils peuvent y accéder, c'est que ce n'est pas chiffré ou que ces derniers savent le déchiffrer. Cela remet en cause la confidentialité et la sécurité de tous nos échanges sous Skype. Si le sujet vous intéresse, allez lire cet article.

M'enfin, fin de la parenthèse, si je vous parle de Skype aujourd'hui, c'est pour toute autre chose. Vous vous souvenez sans doute de Multi Skype Launcher qui permettait sous Windows de lancer plusieurs instances de Skype et ainsi s'identifier et communiquer avec plusieurs comptes différents en parallèle ?

Et bien bonne nouvelle pour les utilisateurs de Mac puisqu'un logiciel équivalent, qui d'ailleurs porte le même nom, permet de faire exactement la même chose, mais sous OSX !
A télécharger ici.

View demo Download source

This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available. Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.

The HTML

<ul id="cbp-tm-menu" class="cbp-tm-menu">
	<li>
		<a href="#">Home</a>
	</li>
	<li>
		<a href="#">Veggie made</a>
		<ul class="cbp-tm-submenu">
			<li><a href="#" class="cbp-tm-icon-archive">Sorrel desert</a></li>
			<li><a href="#" class="cbp-tm-icon-cog">Raisin kakadu</a></li>
			<li><a href="#" class="cbp-tm-icon-location">Plum salsify</a></li>
			<li><a href="#" class="cbp-tm-icon-users">Bok choy celtuce</a></li>
			<li><a href="#" class="cbp-tm-icon-earth">Onion endive</a></li>
			<li><a href="#" class="cbp-tm-icon-location">Bitterleaf</a></li>
			<li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Pepper tatsoi</a>
		<ul class="cbp-tm-submenu">
			<li><a href="#" class="cbp-tm-icon-archive">Brussels sprout</a></li>
			<li><a href="#" class="cbp-tm-icon-cog">Kakadu lemon</a></li>
			<li><a href="#" class="cbp-tm-icon-link">Juice green</a></li>
			<li><a href="#" class="cbp-tm-icon-users">Wine fruit</a></li>
			<li><a href="#" class="cbp-tm-icon-earth">Garlic mint</a></li>
			<li><a href="#" class="cbp-tm-icon-location">Zucchini garnish</a></li>
			<li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Sweet melon</a>
		<ul class="cbp-tm-submenu">
			<li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</a></li>
			<li><a href="#" class="cbp-tm-icon-mail">Raisin kakadu</a></li>
			<li><a href="#" class="cbp-tm-icon-contract">Plum salsify</a></li>
			<li><a href="#" class="cbp-tm-icon-pencil">Bok choy celtuce</a></li>
			<li><a href="#" class="cbp-tm-icon-article">Onion endive</a></li>
			<li><a href="#" class="cbp-tm-icon-clock">Bitterleaf</a></li>
		</ul>
	</li>
</ul>

The CSS

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

/* reset  list style */
.cbp-tm-menu,
.cbp-tm-menu ul {
	list-style: none;
}

/* set menu position; change here to set to relative or float, etc. */
.cbp-tm-menu {
	display: block;
	position: absolute;
	z-index: 1000;
	bottom: 0;
	width: 100%;
	background: #47a3da;
	text-align: right;
	padding: 0 2em;
	margin: 0;
	text-transform: capitalize;
}

/* first level menu items */
.cbp-tm-menu > li {
	display: inline-block;
	margin: 0 2.6em;
	position: relative;
}

.cbp-tm-menu > li > a {
	line-height: 4em;
	padding: 0 0.3em;
	font-size: 1.2em;
	display: block;
	color: #fff;
}

.no-touch .cbp-tm-menu > li > a:hover,
.no-touch .cbp-tm-menu > li > a:active {
	color: #02639d;
}

/* sumbenu with transitions */
.cbp-tm-submenu {
	position: absolute;
	display: block;
	visibility: hidden;
	opacity: 0;
	padding: 0;
	text-align: left;
	pointer-events: none;
	-webkit-transition: visibility 0s, opacity 0s;
	-moz-transition: visibility 0s, opacity 0s;
	transition: visibility 0s, opacity 0s;
}

.cbp-tm-show .cbp-tm-submenu {
	width: 16em;
	left: 50%;
	margin: 0 0 0 -8em;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	-webkit-transition: visibility 0s, opacity 0.3s;
	-moz-transition: visibility 0s, opacity 0.3s;
	transition: visibility 0s, opacity 0.3s;
}

.cbp-tm-show-above .cbp-tm-submenu {
	bottom: 100%;
	padding-bottom: 10px;
}

.cbp-tm-show-below .cbp-tm-submenu {
	top: 100%;
	padding-top: 10px;
}

/* extreme cases: not enough space on the sides */
.cbp-tm-nospace-right .cbp-tm-submenu {
	right: 0;
	left: auto;
}

.cbp-tm-nospace-left .cbp-tm-submenu {
	left: 0;
}

/* last menu item has to fit on the screen */
.cbp-tm-menu > li:last-child .cbp-tm-submenu {
	right: 0;
}

/* 	
arrow: depending on where the menu will be shown, we set 
the right position for the arrow
*/

.cbp-tm-submenu:after {
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.cbp-tm-show-above .cbp-tm-submenu:after {
	top: 100%;
	margin-top: -10px;
}

.cbp-tm-show-below .cbp-tm-submenu:after {
	bottom: 100%;
	margin-bottom: -10px;
}

.cbp-tm-submenu:after {
	border-color: transparent;
	border-width: 16px;
	margin-left: -16px;
	left: 50%;
}

.cbp-tm-show-above .cbp-tm-submenu:after {
	border-top-color: #fff;
}

.cbp-tm-show-below .cbp-tm-submenu:after {
	border-bottom-color: #fff;
}

.cbp-tm-submenu > li {
	display: block;
	background: #fff;
}

.cbp-tm-submenu > li > a {
	padding: 5px 2.3em 5px 0.6em; /* top/bottom paddings in 'em' cause a tiny "jump" in Chrome on Win */
	display: block;
	font-size: 1.2em;
	position: relative;
	color: #47a3da;
	border: 4px solid #fff;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.no-touch .cbp-tm-submenu > li > a:hover,
.no-touch .cbp-tm-submenu > li > a:active {
	color: #fff;
	background: #47a3da;
}

/* the icons (main level menu icon and sublevel icons) */
.cbp-tm-submenu li a:before,
.cbp-tm-menu > li > a:before {
	font-family: 'cbp-tmicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: middle;
	margin-right: 0.6em;
	-webkit-font-smoothing: antialiased;
}

.cbp-tm-submenu li a:before {
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	right: 0.5em;
}

.cbp-tm-menu > li > a:not(:only-child):before {
	content: "f0c9";
	font-size: 60%;
	opacity: 0.3;
}

.cbp-tm-icon-archive:before {
	content: "e002";
}

.cbp-tm-icon-cog:before {
	content: "e003";
}

.cbp-tm-icon-users:before {
	content: "e004";
}

.cbp-tm-icon-earth:before {
	content: "e005";
}

.cbp-tm-icon-location:before {
	content: "e006";
}

.cbp-tm-icon-mobile:before {
	content: "e007";
}

.cbp-tm-icon-screen:before {
	content: "e008";
}

.cbp-tm-icon-mail:before {
	content: "e009";
}

.cbp-tm-icon-contract:before {
	content: "e00a";
}

.cbp-tm-icon-pencil:before {
	content: "e00b";
}

.cbp-tm-icon-article:before {
	content: "e00c";
}

.cbp-tm-icon-clock:before {
	content: "e00d";
}

.cbp-tm-icon-videos:before {
	content: "e00e";
}

.cbp-tm-icon-pictures:before {
	content: "e00f";
}

.cbp-tm-icon-link:before {
	content: "e010";
}

.cbp-tm-icon-refresh:before {
	content: "e011";
}

.cbp-tm-icon-help:before {
	content: "e012";
}

/* Media Queries */
@media screen and (max-width: 55.6875em) {
	.cbp-tm-menu {
		font-size: 80%;
	}
}

@media screen and (max-height: 25.25em), screen and (max-width: 44.3125em) {

	.cbp-tm-menu {
		font-size: 100%;
		position: relative;
		text-align: center;
		padding: 0;
		top: auto;
	}

	.cbp-tm-menu > li {
		display: block;
		margin: 0;
		border-bottom: 4px solid #3793ca;
	}

	.cbp-tm-menu > li:first-child {
		border-top: 4px solid #3793ca;
	}

	li.cbp-tm-show > a,
	.no-touch .cbp-tm-menu > li > a:hover,
	.no-touch .cbp-tm-menu > li > a:active {
		color: #fff;
		background: #02639d;
	}

	.cbp-tm-submenu {
		position: relative;
		display: none;
		width: 100%;
	}

	.cbp-tm-submenu > li {
		padding: 0;
	}

	.cbp-tm-submenu > li > a {
		padding: 0.6em 2.3em 0.6em 0.6em;
		border: none;
		border-bottom: 2px solid #6fbbe9;
	}

	.cbp-tm-submenu:after {
		display: none;
	}

	.cbp-tm-menu .cbp-tm-show .cbp-tm-submenu {
		display: block;
		width: 100%;
		left: 0;
		margin: 0;
		padding: 0;
		bottom: auto;
		top: auto;
	}
	
}

The JavaScript

/**
 * cbpTooltipMenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
;( function( window ) {
	
	'use strict';

	var document = window.document,
		docElem = document.documentElement;

	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}

	// from https://github.com/ryanve/response.js/blob/master/response.js
	function getViewportH() {
		var client = docElem['clientHeight'],
			inner = window['innerHeight'];
		if( client < inner )
			return inner;
		else
			return client;
	}

	// http://stackoverflow.com/a/11396681/989439
	function getOffset( el ) {
		return el.getBoundingClientRect();
	}

	// http://snipplr.com/view.php?codeview&id=5259
	function isMouseLeaveOrEnter(e, handler) { 
		if (e.type != 'mouseout' && e.type != 'mouseover') return false; 
		var reltg = e.relatedTarget ? e.relatedTarget : 
		e.type == 'mouseout' ? e.toElement : e.fromElement; 
		while (reltg && reltg != handler) reltg = reltg.parentNode; 
		return (reltg != handler); 
	}

	function cbpTooltipMenu( el, options ) {	
		this.el = el;
		this.options = extend( this.defaults, options );
		this._init();
	}

	cbpTooltipMenu.prototype = {
		defaults : {
			// add a timeout to avoid the menu to open instantly
			delayMenu : 100
		},
		_init : function() {
			this.touch = Modernizr.touch;
			this.menuItems = document.querySelectorAll( '#' + this.el.id + ' > li' );
			this._initEvents();
		},
		_initEvents : function() {
			
			var self = this;

			Array.prototype.slice.call( this.menuItems ).forEach( function( el, i ) {
				var trigger = el.querySelector( 'a' );
				if( self.touch ) {
					trigger.addEventListener( 'click', function( ev ) { self._handleClick( this, ev ); } );
				}
				else {
					trigger.addEventListener( 'click', function( ev ) {
						if( this.parentNode.querySelector( 'ul.cbp-tm-submenu' ) ) {
							ev.preventDefault();
						}
					} );
					el.addEventListener( 'mouseover', function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) self._openMenu( this ); } );
					el.addEventListener( 'mouseout', function(ev) { if( isMouseLeaveOrEnter( ev, this ) ) self._closeMenu( this ); } );
				}
			} );

		},
		_openMenu : function( el ) {

			var self = this;
			clearTimeout( this.omtimeout );
			this.omtimeout = setTimeout( function() {
				var submenu = el.querySelector( 'ul.cbp-tm-submenu' );

				if( submenu ) {
					el.className = 'cbp-tm-show';
					if( self._positionMenu( el ) === 'top' ) {
						el.className += ' cbp-tm-show-above';
					}
					else {
						el.className += ' cbp-tm-show-below';
					}
				}
			}, this.touch ? 0 : this.options.delayMenu );

		},
		_closeMenu : function( el ) {
			
			clearTimeout( this.omtimeout );

			var submenu = el.querySelector( 'ul.cbp-tm-submenu' );

			if( submenu ) {
				// based on https://github.com/desandro/classie/blob/master/classie.js
				el.className = el.className.replace(new RegExp("(^|\s+)" + "cbp-tm-show" + "(\s+|$)"), ' ');
				el.className = el.className.replace(new RegExp("(^|\s+)" + "cbp-tm-show-below" + "(\s+|$)"), ' ');
				el.className = el.className.replace(new RegExp("(^|\s+)" + "cbp-tm-show-above" + "(\s+|$)"), ' ');
			}

		},
		_handleClick : function( el, ev ) {
			var item = el.parentNode,
				items = Array.prototype.slice.call( this.menuItems ),
				submenu = item.querySelector( 'ul.cbp-tm-submenu' )

			// first close any opened one..
			if( this.current &&  items.indexOf( item ) !== this.current ) {
				this._closeMenu( this.el.children[ this.current ] );
				this.el.children[ this.current ].querySelector( 'ul.cbp-tm-submenu' ).setAttribute( 'data-open', 'false' );
			}

			if( submenu ) {
				ev.preventDefault();

				var isOpen = submenu.getAttribute( 'data-open' );

				if( isOpen === 'true' ) {
					this._closeMenu( item );
					submenu.setAttribute( 'data-open', 'false' );
				}
				else {
					this._openMenu( item );
					this.current = items.indexOf( item );
					submenu.setAttribute( 'data-open', 'true' );
				}
			}

		},
		_positionMenu : function( el ) {
			// checking where's more space left in the viewport: above or below the element
			var vH = getViewportH(),
				ot = getOffset(el),
				spaceUp = ot.top ,
				spaceDown = vH - spaceUp - el.offsetHeight;
			
			return ( spaceDown <= spaceUp ? 'top' : 'bottom' );
		}
	}

	// add to global namespace
	window.cbpTooltipMenu = cbpTooltipMenu;

} )( window );

View demo Download source

Advertise here via BSA

Easy responsive tabs is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its form accordingly.

It supports Horizontal / Vertical Tabs to Accordion. Tabs and accordion are created entirely with jQuery. It supports multiple sets of tabs on same page. It has been tested on IE7+, Chrome, Firefox, Safari and Opera. It is released under MIT License.

Requirements: jQuery Framework
Demo: http://webtrendset.com/demo/easy-responsive-tabs/Index.html
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

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 to eat 
	<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
	<br />at 
	<select>
		<option value="1" selected>anytime</option>
	 	<option value="1">7 p.m.</option>
	 	<option value="2">8 p.m.</option>
	 	<option value="3">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-openb/,'');

		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

Topcoat

Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc. A super easy way to make your website or app look good in minutes.

Demo/Download: http://topcoat.io/

Countable.js

As you can guess, countable.js is a JavaScript function to add live paragraph, word and character counting to any HTML element. It is very small and do not rely on any JS framework.

Demo/Download: http://radlikewhoa.github.io/Countable/

iCheck

Want super-looking checkboxes and radio buttons for your new web app? Then try iCheck, a jQuery plugin which allow you to easily customize radio buttons and checkboxes. iCheck is easy to use and comes with various skins and color schemes.

Demo/Download: http://damirfoy.com/iCheck/

CSS only responsive navigation

Responsive layouts are very popular on the web right now, and this is definitely a good thing in my opinion. Here is a downloadable and reusable responsive navigation menu, made in CSS only.

Demo/Download: http://valdelama.com/css-responsive-navigation

Almost Flat UI

Based on Foundation Framework, Almost Flat UI is a complete HTML/CSS/JS framework to build your site on. It looks really clean and professional. Definitely worth a try!

Demo/Download: http://websymphony.net/almost-flat-ui/

Chart.js

Chart.js is a dependency free, lightweight and object-oriented tool to create client side graphs. It features 6 different chart types and is very easy to use.

Demo/Download: http://www.chartjs.org/

PlaceIMG

When building websites or apps, you often need placeholder images. This very handy service generates random images at the requested size. Super useful!

Demo/Download: http://placeimg.com/

jQuery PanZoom

jQuery Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+.

Demo/Download: https://github.com/timmywil/jquery.panzoom/

Perfect Scrollbar

If you want to be able to create perfect looking scrollbars, then you should definitely have a look to this tiny jQuery plugin. It helps you to create customized scrollbars with no css change on any original element.

Demo/Download: http://noraesae.github.io/perfect-scrollbar/

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was built by was built by Chris Coyier and Paravel.

Demo/Download: http://fitvidsjs.com/

SwapMyLi est un script jQuery qui permet d’effectuer une rotation sur les éléments d’une liste pour les afficher les uns après les autres. Peu d’options, mais nous avons l’essentiel : vitesse de l’effet d’animation, durée de la transition d’un élément à l’autre, durée d’affichage de chaque « slide », affichage ou non d’un « timer » pour montrer le temps d’affichage restant, et utilisation ou non des styles CSS intégrés au script.

 Marquage HTML

<ul id="myList1">
    <li>Donec sed odio dui.</li>
    <li>Nullam quis risus eget urna.</li>
    <li><a href="#">Integer posuere era.</a></li>
    <li>Maecenas sed diam eget risus.</li>
    <li>Tortor mauris condimentum.</li>
</ul>

Appel de SwapMyLi

<script>
    $(function() {
        $('#myList1').swapmyli({
            swapTime: 900, // Speed of effect in animation
            transitionTime: 700, // Speed of Transition of ul (height transformation)
            time: 4000, // How long each slide will show
            timer: 1, // Show (1) /Hide (0) the timer.
            css: 1 // Apply swapmyli css on the list elements.
        });
    });
</script>

→ Téléchargez SwapMyLi

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

A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section.

The HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
	<nav>
		<a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
		<a href="#fbsection2">Section 2</a>
		<a href="#fbsection3">Section 3</a>
		<a href="#fbsection4">Section 4</a>
		<a href="#fbsection5">Section 5</a>
	</nav>
	<section id="fbsection1"></section>
	<section id="fbsection2"></section>
	<section id="fbsection3"></section>
	<section id="fbsection4"></section>
	<section id="fbsection5"></section>
</div>

The CSS

/* Set all parents to full height */
html, body, 
.container,
.cbp-fbscroller,
.cbp-fbscroller section { 
	height: 100%; 
}

/* The nav is fixed on the right side  and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
	position: fixed;
	z-index: 9999;
	right: 100px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
	display: block;
	position: relative;
	color: transparent;
	height: 50px;
}

.cbp-fbscroller > nav a:after {
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 4px solid #fff;
}

.cbp-fbscroller > nav a:hover:after {
	background: rgba(255,255,255,0.6);
}

.cbp-fbscroller > nav a.cbp-fbcurrent:after {
	background: #fff;
}

/* background-attachment does the trick */
.cbp-fbscroller section {
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#fbsection1 {
	background-image: url(../images/1.jpg);
}

#fbsection2 {
	background-image: url(../images/2.jpg);
}

#fbsection3 {
	background-image: url(../images/3.jpg);
}

#fbsection4 {
	background-image: url(../images/4.jpg);
}

#fbsection5 {
	background-image: url(../images/5.jpg);
}

The JavaScript

/**
 * cbpFixedScrollLayout.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpFixedScrollLayout = (function() {

	// cache and initialize some values
	var config = {
		// the cbp-fbscroller´s sections
		$sections : $( '#cbp-fbscroller > section' ),
		// the navigation links
		$navlinks : $( '#cbp-fbscroller > nav:first > a' ),
		// index of current link / section
		currentLink : 0,
		// the body element
		$body : $( 'html, body' ),
		// the body animation speed
		animspeed : 650,
		// the body animation easing (jquery easing)
		animeasing : 'easeInOutExpo'
	};

	function init() {

		// click on a navigation link: the body is scrolled to the position of the respective section
		config.$navlinks.on( 'click', function() {
			scrollAnim( config.$sections.eq( $( this ).index() ).offset().top );
			return false;
		} );

		// 2 waypoints defined:
		// First one when we scroll down: the current navigation link gets updated. 
		// A `new section´ is reached when it occupies more than 70% of the viewport
		// Second one when we scroll up: the current navigation link gets updated. 
		// A `new section´ is reached when it occupies more than 70% of the viewport
		config.$sections.waypoint( function( direction ) {
			if( direction === 'down' ) { changeNav( $( this ) ); }
		}, { offset: '30%' } ).waypoint( function( direction ) {
			if( direction === 'up' ) { changeNav( $( this ) ); }
		}, { offset: '-30%' } );

		// on window resize: the body is scrolled to the position of the current section
		$( window ).on( 'debouncedresize', function() {
			scrollAnim( config.$sections.eq( config.currentLink ).offset().top );
		} );
		
	}

	// update the current navigation link
	function changeNav( $section ) {
		config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' );
		config.currentLink = $section.index( 'section' );
		config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' );
	}

	// function to scroll / animate the body
	function scrollAnim( top ) {
		config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing );
	}

	return { init : init };

})();

View demo Download source

View demo Download source

This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list.

The HTML

<ul class="cbp_tmtimeline">
	<li>
		<time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time>
		<div class="cbp_tmicon cbp_tmicon-phone"></div>
		<div class="cbp_tmlabel">
			<h2>Ricebean black-eyed pea</h2>
			<p>Winter purslane...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>4/11/13</span> <span>12:04</span></time>
		<div class="cbp_tmicon cbp_tmicon-screen"></div>
		<div class="cbp_tmlabel">
			<h2>Greens radish arugula</h2>
			<p>Caulie dandelion maize...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time>
		<div class="cbp_tmicon cbp_tmicon-mail"></div>
		<div class="cbp_tmlabel">
			<h2>Sprout garlic kohlrabi</h2>
			<p>Parsnip lotus root...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time>
		<div class="cbp_tmicon cbp_tmicon-phone"></div>
		<div class="cbp_tmlabel">
			<h2>Watercress ricebean</h2>
			<p>Peanut gourd nori...</p>
		</div>
	</li>
	<li>
		<time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time>
		<div class="cbp_tmicon cbp_tmicon-earth"></div>
		<div class="cbp_tmlabel">
			<h2>Courgette daikon</h2>
			<p>Parsley amaranth tigernut...</p>
		</div>
	</li>
</ul>

The CSS

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

.cbp_tmtimeline {
	margin: 30px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
} 

/* The line */
.cbp_tmtimeline:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	background: #afdcf8;
	left: 20%;
	margin-left: -10px;
}

.cbp_tmtimeline > li {
	position: relative;
}

/* The date/time */
.cbp_tmtimeline > li .cbp_tmtime {
	display: block;
	width: 25%;
	padding-right: 100px;
	position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
	display: block;
	text-align: right;
}

.cbp_tmtimeline > li .cbp_tmtime span:first-child {
	font-size: 0.9em;
	color: #bdd0db;
}

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
	font-size: 2.9em;
	color: #3594cb;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
	color: #6cbfee;
}

/* Right content */
.cbp_tmtimeline > li .cbp_tmlabel {
	margin: 0 0 15px 25%;
	background: #3594cb;
	color: #fff;
	padding: 2em;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
	position: relative;
	border-radius: 5px;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
	background: #6cbfee;
}

.cbp_tmtimeline > li .cbp_tmlabel h2 { 
	margin-top: 0px;
	padding: 0 0 10px 0;
	border-bottom: 1px solid rgba(255,255,255,0.4);
}

/* The triangle */
.cbp_tmtimeline > li .cbp_tmlabel:after {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #3594cb;
	border-width: 10px;
	top: 10px;
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
	border-right-color: #6cbfee;
}

/* The icons */
.cbp_tmtimeline > li .cbp_tmicon {
	width: 40px;
	height: 40px;
	font-family: 'ecoico';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 1.4em;
	line-height: 40px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	color: #fff;
	background: #46a4da;
	border-radius: 50%;
	box-shadow: 0 0 0 8px #afdcf8;
	text-align: center;
	left: 20%;
	top: 0;
	margin: 0 0 0 -25px;
}

.cbp_tmicon-phone:before {
	content: "e000";
}

.cbp_tmicon-screen:before {
	content: "e001";
}

.cbp_tmicon-mail:before {
	content: "e002";
}

.cbp_tmicon-earth:before {
	content: "e003";
}

/* Example Media Queries */
@media screen and (max-width: 65.375em) {

	.cbp_tmtimeline > li .cbp_tmtime span:last-child {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 47.2em) {
	.cbp_tmtimeline:before {
		display: none;
	}

	.cbp_tmtimeline > li .cbp_tmtime {
		width: 100%;
		position: relative;
		padding: 0 0 20px 0;
	}

	.cbp_tmtimeline > li .cbp_tmtime span {
		text-align: left;
	}

	.cbp_tmtimeline > li .cbp_tmlabel {
		margin: 0 0 30px 0;
		padding: 1em;
		font-weight: 400;
		font-size: 95%;
	}

	.cbp_tmtimeline > li .cbp_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #3594cb;
		top: -20px;
	}

	.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
		border-right-color: transparent;
		border-bottom-color: #6cbfee;
	}

	.cbp_tmtimeline > li .cbp_tmicon {
		position: relative;
		float: right;
		left: auto;
		margin: -55px 5px 0 0px;
	}	
}

View demo Download source

Advertise here via BSA

menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents. This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user’s mouse movement. This can make for quicker transitions when navigating up and down the menu. The experience is hopefully similar to amazon.com/’s “Shop by Department” dropdown.

menu-aim assumes that you are using a menu with submenus that expand to the menu’s right. It will fire events when the user’s mouse enters a new dropdown item and when that item is being intentionally hovered over. You can take a look at the detailed explanation here.

Requirements: jQuery Framework
Demo: https://github.com/kamens/jQuery-menu-aim
License: MIT License

Sponsors

Professional Web Icons for Your Websites and Applications

Si vous êtes développeur et que vous prenez en cours le développement d'un site, il se peut que par inadvertance, vous laissiez quelques sélecteurs CSS dans vos feuilles de style qui ne seront jamais utilisés nulle part sur votre site. C'est une chose qui peut arriver aussi quand on pratique avec trop de légèreté le copier-coller.

Et effectivement, tout revérifier style par style, ça peut être long. Alors on laisse, par flemme.

Mais un petit outil qui s'appelle Helium va vous aider à détecter ces sélecteurs qui ne sont pas utilisés. Pour cela, il suffit de télécharger le js sur Github puis d'ajouter l'appel à celui-ci dans toutes vos pages web (via le header ou le footer de votre site par exemple).

<script type="text/javascript" src="chemin/vers/helium.js"></script>

Puis de l'initialiser avec le code suivant :

<script type="text/javascript">
window.addEventListener('load', function(){
helium.init();
}, false);
</script>

Helium parcourra alors toutes les URL que vous lui aurez données et vérifiera que les sélecteurs sont bien utilisés dans les pages. A partir de là, il générera un petit rapport qui détaillera les sélecteurs corrects (vert), ceux mal-formés (rouge), ceux qui sont groupés donc à retester ensuite à la main (en noir) et ceux qui ne peuvent pas être testé, car il nécessite une interaction utilisateur (bleu).

J'ai pensé que ça pouvait vous rendre service.

Photo