Vincent Bonnefille

View demo Download source

This Blueprint is a simple, responsive multi-column form style that comes with example media queries for creating a switching layout. The form has three columns and depending on the screens size, they are shown in a specific manner. The form elements are 100% width so they adjust to the column size.

The HTML

<form class="cbp-mc-form">
	<div class="cbp-mc-column">
		<label for="first_name">First Name</label>
		<input type="text" id="first_name" name="first_name" placeholder="Jonathan">
		<label for="last_name">Last Name</label>
		<input type="text" id="last_name" name="last_name" placeholder="Doe">
		<label for="email">Email Address</label>
		<input type="text" id="email" name="email" placeholder="jon@doe.com">
		<label for="country">Country</label>
		<select id="country" name="country">
			<option>Choose a country</option>
			<option>France</option>
			<option>Italy</option>
			<option>Portugal</option>
		</select>
		<label for="bio">Biography</label>
		<textarea id="bio" name="bio"></textarea>
	</div>
	<div class="cbp-mc-column">
		<label for="phone">Phone Number</label>
		<input type="text" id="phone" name="phone" placeholder="+351 999 999">
		<label for="affiliations">Affiliations</label>
		<textarea id="affiliations" name="affiliations"></textarea>
		<label>Occupation</label>
		<select id="occupation" name="occupation">
			<option>Choose an occupation</option>
			<option>Web Designer</option>
			<option>Web Developer</option>
			<option>Hybrid</option>
		</select>
		<label for="cat_name">Cat's name</label>
		<input type="text" id="cat_name" name="cat_name" placeholder="Kitty">
		<label for="gagdet">Favorite Gadget</label>
		<input type="text" id="gagdet" name="gagdet" placeholder="Annoy-a-tron">
	</div>
	<div class="cbp-mc-column">
		<label>Type of Talent</label>
		<select id="talent" name="talent">
			<option>Choose a talent</option>
			<option>Ninja silence</option>
			<option>Sumo power</option>
			<option>Samurai precision</option>
		</select>
	<label for="drink">Favorite Drink</label>
		<input type="text" id="drink" name="drink" placeholder="Green Tea">
		<label for="power">Special power</label>
		<input type="text" id="power" name="power" placeholder="Anti-gravity">
		<label for="weapon">Weapon of choice</label>
		<input type="weapon" id="weapon" name="weapon" placeholder="Lightsaber">
		<label for="comments">Comments</label>
		<textarea id="comments" name="comments"></textarea>	
	</div>
	<div class="cbp-mc-submit-wrap"><input class="cbp-mc-submit" type="submit" value="Send your data" /></div>
</form>

The CSS

.cbp-mc-form {
	position: relative;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cbp-mc-form:before, 
.cbp-mc-form:after { 
	content: " "; display: table; 
}

.cbp-mc-form:after { 
	clear: both; 
}

.cbp-mc-column {
	width: 33%;
	padding: 10px 30px;
	float: left;
}

.cbp-mc-form label {
	display: block;
	padding: 40px 5px 5px 2px;
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}

.cbp-mc-form input,
.cbp-mc-form textarea,
.cbp-mc-form select {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	line-height: 1.5;
	font-size: 1.4em;
	padding: 5px 10px;
	color: #fff;
	display: block;
	width: 100%;
	background: transparent;
}

.cbp-mc-form input,
.cbp-mc-form textarea {
	border: 3px solid #fff;
}

.cbp-mc-form textarea {
	min-height: 200px;
}

.cbp-mc-form input:focus,
.cbp-mc-form textarea:focus,
.cbp-mc-form label:active + input,
.cbp-mc-form label:active + textarea {
	outline: none;
	border: 3px solid #10689a;
}

.cbp-mc-form select:focus {
	outline: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #10689a;
    font-style: italic;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #10689a;
    font-style: italic;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #10689a;
    font-style: italic;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #10689a;
    font-style: italic;
}

.cbp-mc-submit-wrap {
	text-align: center;
	padding-top: 40px;
	clear: both;
}

.cbp-mc-form input.cbp-mc-submit {
	background: #10689a;
	border: none;
	color: #fff;
	width: auto;
	cursor: pointer;
	text-transform: uppercase;
	display: inline-block;
	padding: 15px 30px;
	font-size: 1.1em;
	border-radius: 2px;
	letter-spacing: 1px;
}

.cbp-mc-form input.cbp-mc-submit:hover {
	background: #1478b1;
}

@media screen and (max-width: 70em) {
	.cbp-mc-column {
		width: 50%;
	}
	.cbp-mc-column:nth-child(3) {
		width: 100%;
	}
}

@media screen and (max-width: 48em) {
	.cbp-mc-column {
		width: 100%;
		padding: 10px;
	}
}

View demo Download source

View demo Download source

An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes.

The HTML

<div class="cbp-af-header">
	<div class="cbp-af-inner">
		<h1>Fixed</h1>
		<nav>
			<a href="#">Broccoli</a>
			<a href="#">Almonds</a>
			<a href="#">Pears</a>
			<a href="#">Oranges</a>
		</nav>
	</div>
</div>

The CSS

.cbp-af-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #f6f6f6;
	z-index: 10000;
	height: 230px;
	overflow: hidden;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

.cbp-af-header .cbp-af-inner {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-af-header h1,
.cbp-af-header nav {
	display: inline-block;
	position: relative;
}

 /* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.cbp-af-header h1,
.cbp-af-header nav a {
	line-height: 230px;
}

.cbp-af-header h1 {
	text-transform: uppercase;
	color: #333;
	letter-spacing: 4px;
	font-size: 4em;
	margin: 0;
	float: left;
}

.cbp-af-header nav {
	float: right;
}

.cbp-af-header nav a {
	color: #aaa;
	font-weight: 700;
	margin: 0 0 0 20px;
	font-size: 1.4em;
}

.cbp-af-header nav a:hover {
	color: #333;
}

/* Transitions and class for reduced height */
.cbp-af-header h1,
.cbp-af-header nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.cbp-af-header.cbp-af-header-shrink {
	height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1,
.cbp-af-header.cbp-af-header-shrink nav a {
	line-height: 90px;
}

.cbp-af-header.cbp-af-header-shrink h1 {
	font-size: 2em;
}

/* Example Media Queries */
@media screen and (max-width: 55em) {
	
	.cbp-af-header .cbp-af-inner {
		width: 100%;
	}

	.cbp-af-header h1,
	.cbp-af-header nav {
		display: block;
		margin: 0 auto;
		text-align: center;
		float: none;
	}

	.cbp-af-header h1,
	.cbp-af-header nav a {
		line-height: 115px;
	}

	.cbp-af-header nav a {
		margin: 0 10px;
	}

	.cbp-af-header.cbp-af-header-shrink h1,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 45px;
	}

	.cbp-af-header.cbp-af-header-shrink h1 {
		font-size: 2em;
	}

	.cbp-af-header.cbp-af-header-shrink nav a {
		font-size: 1em;
	}
}

@media screen and (max-width: 32.25em) {
	.cbp-af-header nav a {
		font-size: 1em;
	}
}

@media screen and (max-width: 24em) {
	.cbp-af-header nav a,
	.cbp-af-header.cbp-af-header-shrink nav a {
		line-height: 1;
	}
}

The JavaScript

var cbpAnimatedHeader = (function() {

	var docElem = document.documentElement,
		header = document.querySelector( '.cbp-af-header' ),
		didScroll = false,
		changeHeaderOn = 300;

	function init() {
		window.addEventListener( 'scroll', function( event ) {
			if( !didScroll ) {
				didScroll = true;
				setTimeout( scrollPage, 250 );
			}
		}, false );
	}

	function scrollPage() {
		var sy = scrollY();
		if ( sy >= changeHeaderOn ) {
			classie.add( header, 'cbp-af-header-shrink' );
		}
		else {
			classie.remove( header, 'cbp-af-header-shrink' );
		}
		didScroll = false;
	}

	function scrollY() {
		return window.pageYOffset || docElem.scrollTop;
	}

	init();

})();

View demo Download source

Modern web design techniques have allowed developers to quickly implement animations supported by most browsers. I think alert messages are very commonplace, because the default JavaScript alert boxes tend to be pretty intrusive and poorly designed. This leads developers down a path to figure out which solutions would work out better for a more user-friendly interface.

For this tutorial I want to explain how we can put together CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM. As a fun added feature, I have also included buttons where you may click to append a new alert box into the top of the page. Check out my sample demo to get a better idea of what we’ll be making.

Live Demo – Download Source Code

Building the Page

To get started, we need to make two files named “index.html” and “style.css”. I will be including a reference to the latest jQuery library hosted by Google’s code CDN. The HTML is fairly straightforward since we just need to create some dummy text within an alert box. And all of the JavaScript has been added into the bottom of the page to save on HTTP requests.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>CSS3 Notification Boxes Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

This is my header code for setting the external documents and the HTML5 doctype. Not very convoluted since we are just building a sample demo. For the notification windows I have setup two different styles – success and error. There are other design styles like warnings and info boxes, however I did not create alternate styles because I wanted to focus more on the effects.

<div id="content">
  <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
  <div class="notify successbox">
    <h1>Success!</h1>
    <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
    <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
  </div>
  
  <div class="notify errorbox">
    <h1>Warning!</h1>
    <span class="alerticon"><img src="images/error.png" alt="error" /></span>
    <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
  </div>
  
  <p>Click the error boxes to dismiss with a fading effect.</p>
  
  <p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>
  
  <div class="btns clearfix">
    <a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
    <a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
  </div>
</div><!-- @end #content -->

Each icon image was created from this freebie PSD of flat elements and UI pieces. The icons were vector shapes which I scaled and resized to fit as a checkmark and X error button. If you need a warning/info icon it shouldn’t be hard to update the colors and create your own. The generic class .notify is added onto each of the message boxes. This will generate the box shadow and internal font styles.

Then additional classes such as .successbox and .errorbox allow us to change colors and details within the alert window. You can see this in my demo where the page loads with two existing alert messages. Each of the buttons at the bottom may be clicked to append a new alert box at the top of the page.

CSS Box Styles

I won’t go into too much detail on the CSS resets which are typical in all my other tutorials. I have created a default batch of typography and also centered the wrapper element with an inner #content div. This creates the box area which allows jQuery to append new warning elements at the very top of the page.

/** typography **/
h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding: .1em 0;
  color: #444;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #f0f0f0;
}
h1:before {    
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {    
  left: .5em;
  margin: 0 -50% 0 0;
}
h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

p {
  display: block;
  font-size: 1.35em;
  line-height: 1.5em;
  margin-bottom: 22px;
}


/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.flatbtn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #f9f8ed;
  text-decoration: none;
  background-color: #b6a742;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.2em;
  font-weight: bold;
  padding: 12px 22px 12px 22px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
  color: #fff;
  background-color: #c4b237;
}
.flatbtn:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

The website layout is quite simple to keep the effects noticeable. Anybody who is familiar with frontend web development should be able to port over these classes into their own stylesheet. I am using a unique style for the flat buttons to generate new alert box windows. Similarly I have updated the internal styles for each of the .notify class elements.

/** notifications **/
.notify {
  display: block;
  background: #fff;
  padding: 12px 18px;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.notify h1 { margin-bottom: 6px; }

.successbox h1 { color: #678361; }
.errorbox h1 { color: #6f423b; }

.successbox h1:before, .successbox h1:after { background: #cad8a9; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }

.notify .alerticon { 
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

I setup a few default assumptions which work best in my sample layout. Each of the message notifications are limited to a 400px width and centered on the page using margin: 0 auto. Also I have updated the cursor icon to a pointer hand so that users know the entire element is clickable. We need to create a jQuery event listener which performs a function whenever the user clicks to dismiss a notification.

jQuery Animation

My JS codes actually perform two distinct operations. First we are detecting any existing .notify elements which are contained inside the #content div. Once a user clicks on this .notify box we need to fade the box down to 0% opacity with display: none, and then remove() the element out of the DOM altogether.

$(function(){
  $('#content').on('click', '.notify', function(){
    $(this).fadeOut(350, function(){
      $(this).remove(); // after fadeout remove from DOM
    });
  });

If you are familiar with jQuery then this selector may appear strange at first. We are not selecting the #content div but actually looking for any .notify boxes within the content container. If you check out the documentation for jQuery’s .on() method you will notice we have the ability to pass another selector as the 2nd parameter which will update after the page has been rendered. Here is an excellent thread on Stack Overflow which explains this concept in greater detail.

The other piece of my script will check whenever a user clicks on either of the two buttons at the bottom of the page. These buttons are using the IDs #newSuccessBox and #newAlertBox. Whenever the user clicks we stop the default action of loading the HREF value and instead create a new HTML block to prepend onto the page.

  // handle the additional windows
  $('#newSuccessBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
  $('#newAlertBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="images/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
});

Each function has its own variable containing a copy/paste mirror of the HTML I used for the box items. This HTML content is stored inside a string using the jQuery selector as an object. I can use the method prependTo() and select the content div so the new alert boxes will appear at the very top of the page. All of the new boxes may also be dismissed in the same fashion since their HTML codes are identical to the boxes which are hard-coded in static HTML.

Live Demo – Download Source Code

When developing mobile (web) apps or responsive layouts, knowing the major screen-sizes and resolutions help a lot on deciding the dimensions for the layout.

Screensiz.es is a website that lists the important data about the screens of widely-used mobile + tablet screens and monitors.

It is possible to find the operating system used, physical size, resolution, PPI and pixel-density values.

Also, devices can be sorted by popularity which is a good way to decide which resolutions are your target.Advertisements:
ioDeck, a self-hosted and awesome PHP form generator.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)

There used to be just one way to do a timed loop in JavaScript: setInterval(). If you needed to repeat something pretty fast (but not as-fast-as-absolutely-possible like a for loop), you'd use that. For the purposes of animation, the goal is sixty "frames" per second to appear smooth, so you'd run a loop like this:

setInterval(function() {
  // animiate something
}, 1000/60);

There is a better alternative to this now. Paul Irish introduced requestAnimationFrame over two years ago. I don't have a whole lot to add to it, I just had never actually used it before and now I have so I thought I'd help spread the word and write about its basic usage.

Why better?

As Paul explained:

• The browser can optimize it, so animations will be smoother
• Animations in inactive tabs will stop, allowing the CPU to chill
• More battery-friendly

The Simplest Possible Example

function repeatOften() {
  // Do whatever
  requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);

Call it once to kick it off, and your function recursively calls itself.

Start and Stop

requestAnimationFrame returns an ID you can use to cancel it, just like setTimeout or setInterval does. jQuery used here only to demonstrate a simple animation and bind events.

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});

Example of this:

Check out this Pen!

Browser Support

See the Can I Use... tables.

The only notable problems are IE 9-, iOS 5-, and Android. But not actually a problem, because:

Polyfill

Like many fancy web features, it's nice to use it when available and fallback to something that works when you can't. Probably best just to refer to this Gist. Literally just include that chunk anywhere before you use requestAnimationFrame or cancelAnimationFrame.

Using this, you'll be able to use requestAnimationFrame in literally any browser.

Slightly More Complex Example

I learned about this while making a dumb little demo to learn canvas better:

Check out this Pen!

What would actually be more complex is several animations running at once using this (that still falls back OK). Feel free to link some of that goodness up in the comments if you know of examples.

Using requestAnimationFrame is a post from CSS-Tricks

Le 11 Juin 2013 vont avoir lieu les Creative Days à Paris et à Stockholm. Lors de ces jours différents intervenants seront présents sur le plateau afin de parler de sujet autour d’Adobe Max et de la Adobe CC.

Afin de faire parler un peu de l’événement l’équipe Adobe et Erik Johansson (un artiste Photoshop) ont mis en place une superbe caméra cachée.

Erik J. est présent dans un vanne, en face de cet abri de bus et à l’aide d’un appareil photo et de d’un écran placé dans l’abri, lui et l’équipe Adobe « hackent » l’écran publicitaire, afin de diffuser des fausses publicités des gens présents dans l’abri.

Bref, c’est vraiment bien fait et les gens sont impressionnés, donc bravo !

Erik Johansson et l’abri bus :

Unicode characters, the encoded strings to represent almost any character in any language, have an important place in web design and development.

Unicode-Table is a website providing a great unicode character table that lists unicode numbers and HTML codes of any character.

Characters can be sorted as categories and a search exists for locating them easily.

Also, the website has an encode and decoder for converting any text.Advertisements:
ioDeck, a self-hosted and awesome PHP form generator.
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
SSLmatic – Cheap SSL Certificates (from $19.99/year)