InsertHTML

Making Custom CSS3 Video Players With HTML5 and Javascript

Johnny Simpson — Tue, 05 Mar 2013 15:33:46 +0000

In today’s multimedia web it’s becoming an ever increasing part of web design to include videos. Customizing the video player is one of the first things web designers think about when implementing these elements, as often the default player does not match the website, or merely for consistency across browsers and devices. In this tutorial we’re going to be going through exactly how to do that.

The Media Element API

The media element API is a simple API that allows you to manipulate videos with simple Javascript commands. For example, normally when using the HTML5 video tags we type something like this:

We have set controls in the video tag so this particular video will have controls (play, pause, etc). This is all well and good but sometimes we want to control the video with another (custom) player, or maybe we just want a link that makes the video play. To do this we use the Media Elements API. For example, lets say we have something like this:

Click me to play the video!

Using the Media Elements API with jQuery we can write something as simple as this to make the video play:

$('#our-video')[0].play();

We’re using [0] here so we target a specific element (in the same way that document.getElementById() works!)

Easy, huh? Well it’s also possible to control a variety of video aspects with the media elements API, and you can create some pretty interesting things.

Functions

There are a bunch of features as part of the media elements API which can be used to control a video or how it is displayed. Here’s a bunch of things which become useful when creating a custom player:


$('#our-video')[0].play(); // Play the video

$('#our-video')[0].pause(); // Pause the video

$('#our-video')[0].volume = 1; // Sets volume, volume ranges from 0 to 1

$('#our-video')[0].currentTime; // Current video time

$('#our-video')[0].duration; // Duration of video

$('#our-video')[0].buffered; // Amount of video buffered in seconds

if($('#our-video')[0].canPlayType('video/mp4')) { .. // If the video can play this type of format 

$('#our-video')[0].requestFullscreen; // (experimental) makes the video fullscreen

Using these simple functions and a few other tricks we’re going to combine all this to make a custom video player which you can change with just CSS.

Lets Get Started

First of all lets accustom ourselves with the HTML5 video tag. To create a new video element we just use the video tag. It’s best to use multiple video types since not all videos are supported by all browsers. Using just .webm and .mp4 will cover mostly every video type though. Miro provides a simple method to convert files to .webm.

The CSS

CSS is what we’re going to use to style the video. This opens up a lot of possibilities since CSS is very easy to use, and changing the style of your video, therefore, becomes very easy. For this particular video style this is the CSS I’m going to be using, so go ahead and put it in your CSS file:

body {
	font-size: 62.5%;
}

.player {
	background: #2a2a2a;
	box-sizing: border-box;
	border-radius: 5px;
	height: 70px;
	-moz-box-sizing: border-box;
	float: left;
	font-family: Arial, sans-serif;
	position: absolute;
	padding: 0;
	bottom: 20px;
	z-index: 2;
	opacity: 1;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	-webkit-transition: opacity 0.3s ease-in;
	transition: opacity 0.3s ease-in;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.video {
	position: relative;
}

.video:hover .player {
	opacity: 1;
}

.player .progress {
	width: 60%;
	height: 20px;
	border-radius: 5px;
	background: #676767;
	box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);
	float: left;
	cursor: pointer;
	margin: 24px 0 0 0;
	padding: 0;
	position: relative;
}

.player .progress-bar {
	background: #33b5d5;
	box-shadow: inset -30px 0px 69px -20px #89f6f5;
	border-radius: 5px;
	height: 100%;
	position: relative;
	z-index: 999;
	width: 0;
}

.player .button-holder {
	position: relative;
	left: 10px;
}

.player .progress-button {
	background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	border-radius: 30px;
	width: 20px;
	height: 20px;
	position: absolute;
	left: -20px;
	text-decoration: overline;
}


.player [class^="buffered"] {
	background: rgba(255,255,255,0.1);
	position: absolute;
	top: 0;
	left: 30px;
	height: 100%;
	border-radius: 5px;
	z-index: 1;
}

.player .play-pause {
	display: inline-block;
	font-size: 3em;
	float: left;
	text-shadow: 0 0 0 #fff;
	color: rgba(255,255,255,0.8);
	width: 10%;
	padding: 17px 0 0 3%;
	cursor: pointer;
	font-variant: small-caps;
}

.player .play, .player .pause-button {
	-webkit-transition: all 0.2s ease-out;
}

.player .play .pause-button, .player .pause .play-button {
	display: none;
}

.player .pause-button {
	padding: 5px 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 34px;
}

.player .pause-button span {
	background: #fff;
	width: 8px;
	height: 24px;
	float: left;
	display: block;
}

.player .pause-button span:first-of-type {
	margin: 0 4px 0 0;
}

.player .time {
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	position: absolute;
	right: 0;
	top: 24px;
}

.player .stime, .ttime {
	color: #444;
}
.player .play:hover {
	text-shadow: 0 0 5px #fff;
}

.player .play:active, .pause-button:active span {
	text-shadow: 0 0 7px #fff;
}


.player .pause-button:hover span {
	box-shadow: 0 0 5px #fff;
} .player .pause-button:active span {
	box-shadow: 0 0 7px #fff;
}


.player .volume {
	position: relative;
	float: left;
	width: 8%;
	margin: 0 0 0 4%;
	height: 100%;
}

.player .volume-icon {
	padding: 1.5%;
	height: 100%;
	cursor: pointer;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-transition: all 0.15s linear;
}

.player .volume-icon-hover {
	background-color: #4f4f4f;
}

.player .volume-holder {
	height: 100px;
	width: 100%;
	background: black;
	position: absolute;
	display: none;
	background: #4f4f4f;
	left: 0;
	border-radius: 5px 5px 0 0;
	top: -100px;
}

.player .volume-bar-holder {
	background: #333;
	width: 20px;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
	margin: 15px auto;
	height: 80px;
	border-radius: 5px;
	position: relative;
	cursor: pointer;
}

.player .volume-button {
	background: #fff;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	border-radius: 30px;
	width: 20px;
	height: 20px;
}

.player .volume-button-holder {
	position: relative;
	top: -10px;	
}

.player .volume-bar {
	background: #33b5d5;
	box-shadow: inset -30px 0px 69px -20px #89f6f5;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
}

.player .fullscreen {
	width: 12%;
	cursor: pointer;
	float: left;
	height: 100%;
}

.player .fullscreen a {
	width: 25px;
	height: 20px;
	border-radius: 3px;
	background: #fff;
	display: block;
	position: relative;
	top: 23px;
	margin: 0px auto;
}

.player .volume-icon span {
	width: 20%;
	height: 13%;
	background-color: #fff;
	display: block;
	position: relative;
	z-index: 1;
	font-weight: bold;
	top: 40%;
	color: #fff;
	left: 22%;
}

.player .volume-icon span:before,
.player .volume-icon span:after {
	content: '';
	position: absolute;
}
.player .volume-icon span:before {
	width: 0;
	height: 0;
	border: 1em solid transparent;
	border-left: none;
	border-right-color: #fff;
	z-index: 2;
	top: -2px;
	left: 10%;
	margin-top: -40%;
}
.player .volume-icon span:after {
	width: 2%;
	height: 2%;
	border: 1px solid #fff;
	left: 190%;
	border-width: 0px 0px 0 0; 
	top: 5px;
	border-radius: 0 50px 0 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	 transform: rotate(45deg);
	 font-variant: small-caps;
 }

.player .v-change-11 span:after { border-width: 10px 10px 0 0; top: 0; }
.player .v-change-10 span:after { border-width: 9px 9px 0 0; top: 1px; }
.player .v-change-9 span:after { border-width: 8px 8px 0 0; top: 1px; }
.player .v-change-8 span:after { border-width: 7px 7px 0 0; top: 2px; }
.player .v-change-7 span:after { border-width: 6px 6px 0 0; top: 2px; }
.player .v-change-6 span:after { border-width: 5px 5px 0 0; top: 3px; }
.player .v-change-5 span:after { border-width: 4px 4px 0 0; top: 3px; }
.player .v-change-4 span:after { border-width: 3px 3px 0 0; top: 4px; }
.player .v-change-3 span:after { border-width: 2px 2px 0 0; top: 4px; }
.player .v-change-2 span:after { border-width: 1px 1px 0 0; top: 5px; }
.player .v-change-1 span:after { border-width: 0px 0px 0 0; top: 5px; }

.player .v-change-1 span:after {
	content: '+';
	-webkit-transform: rotate(45deg);
	font-size: 20px;
	top: -6px;
	left: 25px;
}

jQuery

The easiest and most succinct way to go about doing this is to use jQuery and design our code as a plugin. Don’t forget to include the jQuery file! As with all jQuery plugins, make a new Javascript file and paste in the following:

(function($) {

	$.fn.videoPlayer = function(options) { // videoPlayer is the name of our plugin
		
				
		var settings = {  
			playerWidth : '0.95', // Default is 95%
			videoClass : 'video'  // Video Class
		}
		
		// Extend the options so they work with the plugin
		if(options) {
			$.extend(settings, options);
		}
		
		
		// For each so that we keep chainability.
		return this.each(function() {	

                     // Code goes here

		});
	
	}
	
})(jQuery);

I’ve added a few customizable options (when you run this plugin you’ll be able to change the options to whatever you want). These include the width of the player for styling purposes (by default 0.95 or95%) and the video class (in case you need to change it because of clashes). All of our code is going to go inside the return this.each(function() { }); brackets.

Now the first thing we want to do is check that the video meta data is ready to run. In some cases this will take a moment to load, so if we don’t check this we’ll end up loading the video player without any data (that wouldn’t work!). We’re also going to set some basic variables, the purpose of which will become more apparent later on.

			$(this)[0].addEventListener('loadedmetadata', function() {
			
				// Basic Variables 
				var $this = $(this);
				var $settings = settings;
				
				// Wrap the video in a div with the class of your choosing
				$this.wrap('');
				
			
				// Select the div we just wrapped our video in for easy selection.
				var $that = $this.parent('.'+$settings.videoClass);
				
				// Some other misc variables to check when things are happening
				var $mclicking = false, 
				    $vclicking = false, 
				    $vidhover = false,
				    $volhover = false, 
				    $playing = false, 
				    $drop = false,
				    $begin = false,
				    $draggingProgess = false,
				    $storevol,	
				    x = 0, 
				    y = 0, 
				    vtime = 0, 
				    updProgWidth = 0, 
				    volume = 0;

Next you want to create the structure of the player. This can be altered if you wish. We’ll also define some more variables and change the width of the player.

				// The Structure of our video player
				{
				
				$( ''
				     + ''
				       + '►'
				       + ''
				         + ' '
					         + ' '
				       + ''
				     + ''
				     + ''
				       + ''
				         + ''
				           + ' '
				         + ''
				       + ''
				       + ''
				         + '00:00' 
				         + ' / '
				         + '00:00'
				       + ''
				     + ''
				     + ''
				       + ''
				         + ''
				           + ''
				             + ''	
				               + ' '
				             + ''
				           + ''
				         + ''
				       + ''
				       + ''
				         + ' '
				       + ''
				     + ''
				     + ' '
				       + ' '
				     + ''
				   + '').appendTo($that);
				
				}
				
				
				// Set the width of the video
				$videoWidth = $this.width();
				$that.width($videoWidth+'px');
				
				// Set width of the player based on previously noted settings
				$that.find('.player').css({'width' : ($settings.playerWidth*100)+'%', 'left' : ((100-$settings.playerWidth*100)/2)+'%'});
				
				
				// Video information
				var $spc = $(this)[0], // Specific video
					$duration = $spc.duration, // Video Duration
					$volume = $spc.volume, // Video volume
					currentTime;

				// The width of the progress bar
				var progWidth = $that.find('.progress').width();

Next lets start defining some functions. The first function we’re going to define is for buffering, so the user can see what sections of the video is buffered. The second is for time setting, so the time will increase correctly. The timing function is going to be run every time the current time is updated. I’ve commented in the code so you can see exactly what is happening.

				var bufferLength = function() {
				
					// The buffered regions of the video
					var buffered = $spc.buffered;
					
					// Rest all buffered regions everytime this function is run
					$that.find('[class^=buffered]').remove();
					
					// If buffered regions exist
					if(buffered.length > 0) {
							
						// The length of the buffered regions is i
						var i = buffered.length;
							
						while(i--) {
							// Max and min buffers
							$maxBuffer = buffered.end(i);
							$minBuffer = buffered.start(i);
									
							// The offset and width of buffered area				
							var bufferOffset = ($minBuffer / $duration) * 100;			
							var bufferWidth = (($maxBuffer - $minBuffer) / $duration) * 100;
											
							// Append the buffered regions to the video
							$('').css({"left" : bufferOffset+'%', 'width' : bufferWidth+'%'}).appendTo($that.find('.progress'));
							
						}
					}
				} 
				
				// Run the buffer function
				bufferLength();
				
				// The timing function, updates the time.
				var timeUpdate = function($ignore) {
					
					// The current time of the video based on progress bar position
					var time = Math.round(($('.progress-bar').width() / progWidth) * $duration);
					
					// The 'real' time of the video
					var curTime = $spc.currentTime;
					
					// Seconds are set to 0 by default, minutes are the time divided by 60
					// tminutes and tseconds are the total mins and seconds.
					var seconds = 0,
						minutes = Math.floor(time / 60),
						tminutes = Math.round($duration / 60),
						tseconds = Math.round(($duration) - (tminutes*60));
					
					// If time exists (well, video time)
					if(time) {
						// seconds are equal to the time minus the minutes
						seconds = Math.round(time) - (60*minutes);
						
						// So if seconds go above 59
						if(seconds > 59) {
							// Increase minutes, reset seconds
							seconds = Math.round(time) - (60*minutes);
							if(seconds == 60) {
								minutes = Math.round(time / 60); 
								seconds = 0;
							}
						}
						
					} 
					
					// Updated progress width
					updProgWidth = (curTime / $duration) * progWidth
					
					// Set a zero before the number if its less than 10.
					if(seconds < 10) { seconds = '0'+seconds; }
					if(tseconds < 10) { tseconds = '0'+tseconds; }
					
					// A variable set which we'll use later on
					if($ignore != true) {
						$that.find('.progress-bar').css({'width' : updProgWidth+'px'});
						$that.find('.progress-button').css({'left' : (updProgWidth-$that.find('.progress-button').width())+'px'});
					}
					
					// Update times
					$that.find('.ctime').html(minutes+':'+seconds) 
					$that.find('.ttime').html(tminutes+':'+tseconds);
				
					// If playing update buffer value
					if($spc.currentTime > 0 && $spc.paused == false && $spc.ended == false) {
						bufferLength();
					}
					
				}
				
				// Run the timing function twice, once on init and again when the time updates.
				timeUpdate();
				$spc.addEventListener('timeupdate', timeUpdate);

Next the play button! We’re going to add and remove CSS classes to make the play change to a pause button when clicked. We’ll also set a variable to check if the video is playing, which we will use later in the code:

				
				// When the user clicks play, bind a click event	
				$that.find('.play-pause').bind('click', function() {
					
					// Set up a playing variable
					if($spc.currentTime > 0 && $spc.paused == false && $spc.ended == false) {
						$playing = false;
					} else { $playing = true; }
					
					// If playing, etc, change classes to show pause or play button
					if($playing == false) {
						$spc.pause();
						$(this).addClass('play').removeClass('pause');
						bufferLength();
					} else {
						$begin = true;
						$spc.play();
						$(this).addClass('pause').removeClass('play');
					} 				
					
				});

One of the most complicated parts of this code is the progress slider. First off we need to check when the user clicks on the progress bar and then set a variable telling us that’s what’s happening. Then when the user moves the mouse we’ll be able to adjust it so it slides appropriately. We’re going to use the same process for the volume slider, so I’ve included it here too, as well as an animation function for the volume icon, as well as a way to check if the user is hovering over the volume icon using the jQuery hover() function.

				// Bind a function to the progress bar so the user can select a point in the video
				$that.find('.progress').bind('mousedown', function(e) {
					
					// Progress bar is being clicked
					$mclicking = true;
					
					// If video is playing then pause while we change time of the video
					if($playing == true) {
						$spc.pause();
					}
					
					// The x position of the mouse in the progress bar 
					x = e.pageX - $that.find('.progress').offset().left;
					
					// Update current time
					currentTime = (x / progWidth) * $duration;
					
					$spc.currentTime = currentTime;
					
				});
				
				// When the user clicks on the volume bar holder, initiate the volume change event
				$that.find('.volume-bar-holder').bind('mousedown', function(e) {
					
					// Clicking of volume is true
					$vclicking = true;
					
					// Y position of mouse in volume slider
					y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top);
					
					// Return false if user tries to click outside volume area
					if(y < 0 || y > $(this).height()) {
						$vclicking = false;
						return false;
					}
					
					// Update CSS to reflect what's happened
					$that.find('.volume-bar').css({'height' : y+'px'});
					$that.find('.volume-button').css({'top' : (y-($that.find('.volume-button').height()/2))+'px'});
					 
					// Update some variables
					$spc.volume = $that.find('.volume-bar').height() / $(this).height();
					$storevol = $that.find('.volume-bar').height() / $(this).height();
					$volume = $that.find('.volume-bar').height() / $(this).height();
					
					// Run a little animation for the volume icon.
					volanim();
					
				});
				
				// A quick function for binding the animation of the volume icon
				var volanim = function() {
				
					// Check where volume is and update class depending on that.
					for(var i = 0; i < 1; i += 0.1) {
									
						var fi = parseInt(Math.floor(i*10)) / 10;
						var volid = (fi * 10)+1;
						
						if($volume == 1) {
							if($volhover == true) {
								$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11');
							} else {
								$that.find('.volume-icon').removeClass().addClass('volume-icon v-change-11');
							}
						}
						else if($volume == 0) {
							if($volhover == true) {
								$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1');
							} else {
								$that.find('.volume-icon').removeClass().addClass('volume-icon v-change-1');
							}
						}
						else if($volume > (fi-0.1) && volume < fi && !$that.find('.volume-icon').hasClass('v-change-'+volid)) {
							if($volhover == true) {
								$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-'+volid);	
							} else {
								$that.find('.volume-icon').removeClass().addClass('volume-icon v-change-'+volid);	
							}
						}		
						
					}
				}
				// Run the volanim function
				volanim();
				
				// Check if the user is hovering over the volume button
				$that.find('.volume').hover(function() {
					$volhover = true;
				}, function() {
					$volhover = false;
				});

Next we have to do the actual mouse moving event. There are a bunch of things that depend on mouse move so the function is quite long. For instance, if the user is dragging the mouse while holding the progress bar, the progress bar should slide. Similarly, so should the volume bar. On top of that, if the user is moving the mouse and the video is already playing, the player should disappear so it isn’t a distraction to the actual video. I’ve included the entire function below, commented so you can see what’s going on. I’ve also included a function that fixes a few problems with the play and pause button, so the correct icon is always displaying.

				// For usability purposes then bind a function to the body assuming that the user has clicked mouse
				// down on the progress bar or volume bar
				$('body, html').bind('mousemove', function(e) {
					
					// Hide the player if video has been played and user hovers away from video
					if($begin == true) {
						$that.hover(function() {
							$that.find('.player').stop(true, false).animate({'opacity' : '1'}, 0.5);
						}, function() {
							$that.find('.player').stop(true, false).animate({'opacity' : '0'}, 0.5);
						});
					}
					
					// For the progress bar controls
					if($mclicking == true) {	
						
						// Dragging is happening
						$draggingProgress = true;
						// The thing we're going to apply to the CSS (changes based on conditional statements);
						var progMove = 0;
						// Width of the progress button (a little button at the end of the progress bar)
						var buttonWidth = $that.find('.progress-button').width();
						
						// Updated x posititon the user is at
						x = e.pageX - $that.find('.progress').offset().left;
						
						// If video is playing
						if($playing == true) {
							// And the current time is less than the duration				
							if(currentTime < $duration) {		
								// Then the play-pause icon should definitely be a pause button 
								$that.find('.play-pause').addClass('pause').removeClass('play');
							}
						}
						
						
						if(x < 0) { // If x is less than 0 then move the progress bar 0px
							progMove = 0;
							$spc.currentTime = 0;
						} 
						else if(x > progWidth) { // If x is more than the progress bar width then set progMove to progWidth
							$spc.currentTime = $duration;
							progMove = progWidth;	
						}
						else { // Otherwise progMove is equal to the mouse x coordinate
							progMove = x;
							currentTime = (x / progWidth) * $duration;
							$spc.currentTime = currentTime;	
						}
						
						// Change CSS based on previous conditional statement
						$that.find('.progress-bar').css({'width' : $progMove+'px'});
						$that.find('.progress-button').css({'left' : ($progMove-buttonWidth)+'px'});
						
					}
					
					// For the volume controls
					if($vclicking == true) {	
						
						// The position of the mouse on the volume slider
						y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top);
						
						// The position the user is moving to on the slider.
						var volMove = 0;
						
						// If the volume holder box is hidden then just return false
						if($that.find('.volume-holder').css('display') == 'none') {
							$vclicking = false;
							return false;
						}
						
						// Add the hover class to the volume icon
						if(!$that.find('.volume-icon').hasClass('volume-icon-hover')) {
							$that.find('.volume-icon').addClass('volume-icon-hover');
						}
						
						
						if(y < 0 || y == 0) { // If y is less than 0 or equal to 0 then volMove is 0.
							
							$volume = 0; 
							volMove = 0;
							
							$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11');
							
						} else if(y > $(this).find('.volume-bar-holder').height() || (y / $that.find('.volume-bar-holder').height()) == 1) { // If y is more than the height then volMove is equal to the height
							
							$volume = 1; 
							volMove = $that.find('.volume-bar-holder').height();
							
							$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1');
							
						} else { // Otherwise volMove is just y
						
							$volume = $that.find('.volume-bar').height() / $that.find('.volume-bar-holder').height();
							volMove = y;
							
						}
					
						// Adjust the CSS based on the previous conditional statmeent
						$that.find('.volume-bar').css({'height' : volMove+'px'});
						$that.find('.volume-button').css({'top' : (volMove+$that.find('.volume-button').height())+'px'});
						
						// Run the animation function
						volanim();
						
						// Change the volume and store volume
						// Store volume is the volume the user last had in place
						// in case they want to mute the video, unmuting will then
						// return the user to their previous volume.
						$spc.volume = $volume;
						$storevol = $volume;
						
						
					}
					
					// If the user hovers over the volume controls, then fade in or out the volume
					// icon hover class
					
					if($volhover == false) {
						
						$that.find('.volume-holder').stop(true, false).fadeOut(100);
						$that.find('.volume-icon').removeClass('volume-icon-hover');	
						
					}
					
					else {
						$that.find('.volume-icon').addClass('volume-icon-hover');
						$that.find('.volume-holder').fadeIn(100);			
					}
					
						
				});

				// When the video ends the play button becomes a pause button
				$spc.addEventListener('ended', function() {
					
					$playing = false;
					
					// If the user is not dragging
					if($draggingProgress == false) {
						$that.find('.play-pause').addClass('play').removeClass('pause');
					}
					
				});

Next is a little function that checks if the user is clicking their mouse down onto the volume icon, and if so, whether to mute the video or not. We use our stored volume so we can set the volume to the previous volume should the user unmute the video.

				// If the user clicks on the volume icon, mute the video, store previous volume, and then
				// show previous volume should they click on it again.
				$that.find('.volume-icon').bind('mousedown', function() {
					
					$volume = $spc.volume; // Update volume
					
					// If volume is undefined then the store volume is the current volume
					if(typeof $storevol == 'undefined') {
						 $storevol = $spc.volume;
					}
					
					// If volume is more than 0
					if($volume > 0) {
						// then the user wants to mute the video, so volume will become 0
						$spc.volume = 0; 
						$volume = 0;
						$that.find('.volume-bar').css({'height' : '0'});
						volanim();
					}
					else {
						// Otherwise user is unmuting video, so volume is now store volume.
						$spc.volume = $storevol;
						$volume = $storevol;
						$that.find('.volume-bar').css({'height' : ($storevol*100)+'%'});
						volanim();
					}
					
					
				});

Next, a quick little function that resets everything when the user lets go of the mouse button:

				
				// If the user lets go of the mouse, clicking is false for both volume and progress.
				// Also the video will begin playing if it was playing before the drag process began.
				// We're also running the bufferLength function
				$('body, html').bind('mouseup', function(e) {
					
					$mclicking = false;
					$vclicking = false;
					$draggingProgress = false;
					
					if($playing == true) {	
						$spc.play();
					}
					
					bufferLength();
					
					
				});

Finally we’re going to add a button that allows us to enable fullscreen mode. If the browser doesn’t support fullscreen the button will not be displayed, otherwise we just request it for every browser until one works.

Fullscreen is not supported by every browser. In the below example the fullscreen icon will not appear if the browser doesn’t support it.

				
				// Check if fullscreen supported. If it's not just don't show the fullscreen icon.
				if(!$spc.requestFullscreen && !$spc.mozRequestFullScreen && !$spc.webkitRequestFullScreen) {
					$('.fullscreen').hide();
				}
				
				// Requests fullscreen based on browser.
				$('.fullscreen').click(function() {
				
					if ($spc.requestFullscreen) {
						$spc.requestFullscreen();
					}
				
					else if ($spc.mozRequestFullScreen) {
						$spc.mozRequestFullScreen();
					}
					
					else if ($spc.webkitRequestFullScreen) {
						$spc.webkitRequestFullScreen();
					}
				
				});
				
				
				
			});
			
		});
	
	}
	
})(jQuery);

Running the Plugin

And we’re done! That’s all the Javascript. Save the file and include it in your HTML, then run this little bit of Javascript to make it work:


$(document).ready(function() {
	$('video').videoPlayer({
		'playerWidth' : 0.95,
		'videoClass' : 'video'	
	});
});

And that’s it! Now it’s pretty simple to add more features to your video player via jQuery, or just change the general style of it with CSS. These features are widely supported in most browsers with the exception of fullscreen, but that will change with time. Thanks for reading and have a good day!

Experimental CSS3 Only Image Slider with 3D Transforms

Johnny Simpson — Tue, 19 Feb 2013 16:21:09 +0000

Using previously existing CSS techniques as well as new CSS3 ones, we’re going to create a pretty cool CSS only image slider with arrows and 3D transforms. To do this we’re going to use a few CSS tricks which will allow you to accomplish this.

Setting up the HTML

I’m sure very few people have trouble understand the core tenets of HTML, so I’ll just show you the code:


	
	
	
	
	
	>
	
	>
	>
	>
	
		
			 
				
					Hey, you! Get offa my cloud!
					(30 Mar)
				
			
			 
				
					You were always on my mind..
					(2 Jun)
				
			
			
				
					You know you could have it so much better, if you tried..
					(5 Aug)
				
			
			 
				
					Every single night, I endure the fight..
					(8 Oct)
				
			
			 
				
					Last night these two bouncers and one of them's alright..
					(20 Dec)

How this works is pretty simple. We have a few form elements which we will hide, and a label that is connected to each form element. We style the labels to look like arrows, and since they are connected to form, when they are clicked the user will ‘check’ a radio button. Then we can check if the radio button is ticked with CSS and move the image slider to the correct position using simple relative positioning.

The spans above with the id’s image-5, etc, are the slides in the image slider. We can style these directly with CSS to make them look like images or whatever we want. The content inside that (in the info spans) is the content that will appear when the user goes to that slide. Then we can use transitions to make everything run smoothly.

For this particular image slider I’m using Symbolset’s Standard icon font set (for the arrows), which you can download here for only $30.

The CSS

This is the most important bit. We are using 3D transforms to create the 3D effect which are currently not supported in opera. For that reason, the user will just see a regular image slider with no 3D effects if they use opera, and this could be modified a little using jQuery if you wanted.

We’re using sibling selectors (tilde operator ∼) so when the user checks the right radio button the correct image will show. The code we use for this looks a bit like this:

#slider #button-1:checked ~ #slides > div > span { left: 5% }

So when the user checks button 1, but whole slider will move so that it is 5% from the left, and so the correct image will be shown. The rest is just pretty basic 3D transforms and transitions. Here is the entire code:

body {
    margin: 0;
    padding: 0;
    background: url('ecailles.png');
    font-size: 62.5%;
}

#slider {
    display: block;
    height: 350px;
    width: 100%;
    margin: auto;
    overflow: hidden;
    margin-top: 60px;
    position: relative;
}

#slider #slides {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    position: relative;
}

#slider #slides > div {
    list-style: none;
    height: 100%;
    width: 500%;
    position: relative;
    left: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Set 3D perspective since we're using 3D transforms */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 600px; 
    -moz-perspective: 600px; 
    perspective: 600px;
    -webkit-perspective-origin: 10% 50%; 
    -moz-perspective-origin: 10% 50%; 
    perspective-origin: 10% 50%;
}

#slides > div > span {
	/* Run the tranistions */
	-webkit-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	-moz-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	-o-transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	transition: all 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530);
	height: 320px;
	width: 10%;
	float: left;
	border-radius: 5px;
	opacity: 1;
	overflow: hidden;
	display: block;
	position: relative;
	font-size: 1.6em;
	top: 20px;
	z-index: 1;
}

/* Display none, so the user doesn't see whats happening with the radio buttons */
#slider input[type=radio] {
	display: none;
}

#slider #slides > div > span > img {
    margin: auto;
    height: 100%;
}

/* Style the arrows so they look nice! */
#slider .arrows {
    font-size: 15px;
    color: #fff;
    position: absolute;
    top: 290px;
    display: none;
    cursor: pointer;
    font-family: "SSStandard";
    z-index: 9999;
    width: 29px;
	height: 25px;
	border-radius: 32px;
	text-align: center;
	padding: 7px 0 0 3px;
    background: black;
    box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px 11px 24px -8px rgba(255,255,255,0.4);
}

#slider .arrows:hover {
	box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px -11px 24px -8px rgba(255,255,255,0.4);	
}

/* The info boxes */
#slides .info {
	width: 100%;
	padding: 20px 20px 25px 20px;
	position: relative;
	bottom: 120px;
	border-radius: 5px 5px 0 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: block;
	-webkit-transition: all 1s 0.2s cubic-bezier(1, 0, 0.6, 1);
	transition: all 1s 0.2s cubic-bezier(1, 0, 0.6, 1);
	color: #fff;
	font-weight: bold;
	background-color: rgb(30, 30, 30);
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
	line-height: 30px;
}

#slides .info strong {
	border-bottom: 2px solid #fff;
	padding: 3px 0;
}

#slides .info em {
	font-size: 0.8em;
	float: right;
	padding-top: 4px;
	color: rgba(255,255,255,0.2);
}

/* This is for positioning the arrows */
#button-1:checked ~ #arrow-2, #button-2:checked ~ #arrow-3, #button-3:checked ~ #arrow-4, #button-4:checked ~ #arrow-5 {
    right: 27%;
    display: block;
}

/* Since there is no previous sibling selector in CSS, we have to select the correct arrow, reposition it and rotate it 180deg so it appears as though it's a back arrow */
#button-2:checked ~ #arrow-1, #button-3:checked ~ #arrow-2, #button-4:checked ~ #arrow-3, #button-5:checked ~ #arrow-4 {
	left: 27%;
    display: block;
    -webkit-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px -11px 24px -8px rgba(255,255,255,0.4);
}

#button-2:checked ~ #arrow-1:hover, #button-3:checked ~ #arrow-2:hover, #button-4:checked ~ #arrow-3:hover, #button-5:checked ~ #arrow-4:hover {
    box-shadow: 0 0 20px rgba(200, 235, 248, 0.98), inset 0px 11px 24px -8px rgba(255,255,255,0.4);
}

/* The images used in the slides, feel free to change this */
#image-1 {
	background: url('1.jpg');
}

#image-2 {
	background: url('2.jpg');
}

#image-3 {
	background: url('3.jpg');
}

#image-4 {
	background: url('4.jpg');
}

#image-5 {
	background: url('5.jpg');
}

/* The next bit is a bit wordy, but it just positions the slides at either side of the selected slide 
   so we get a cool 3D effect */
#slider #button-1:checked ~ #slides > div #image-2, #slider #button-1:checked ~ #slides > div #image-3, 
#slider #button-1:checked ~ #slides > div #image-4, #slider #button-1:checked ~ #slides > div #image-5,
#slider #button-2:checked ~ #slides > div #image-3, #slider #button-2:checked ~ #slides > div #image-4, 
#slider #button-2:checked ~ #slides > div #image-5, #slider #button-3:checked ~ #slides > div #image-4,
#slider #button-3:checked ~ #slides > div #image-5, #slider #button-4:checked ~ #slides > div #image-5 {
	-webkit-transform: rotateY(-10deg) scale(0.8) translateX(-10%);
	transform: rotateY(-10deg) scale(0.8) translateX(-10%);
	z-index: 0;
}

#slider #button-2:checked ~ #slides > div #image-1, #slider #button-3:checked ~ #slides > div #image-2,
#slider #button-3:checked ~ #slides > div #image-1, #slider #button-4:checked ~ #slides > div #image-3, 
#slider #button-4:checked ~ #slides > div #image-2, #slider #button-4:checked ~ #slides > div #image-1, 
#slider #button-5:checked ~ #slides > div #image-4, #slider #button-5:checked ~ #slides > div #image-3,
#slider #button-5:checked ~ #slides > div #image-2, #slider #button-5:checked ~ #slides > div #image-1 {
	-webkit-transform: rotateY(10deg) scale(0.8) translateX(10%);
	transform: rotateY(10deg) scale(0.8) translateX(10%);
	z-index: 0;
}

/* Show the info box when the user selects the slides */
#slider #button-1:checked ~ #slides > div #image-1 .info, 
#slider #button-2:checked ~ #slides > div #image-2 .info,  
#slider #button-3:checked ~ #slides > div #image-3 .info,
#slider #button-4:checked ~ #slides > div #image-4 .info, 
#slider #button-5:checked ~ #slides > div #image-5 .info {
	bottom: 0px;
}

/* .. and finally, move the slides into the correct position when the user clicks the arrow, so the right
   slide is selected */

#slider #button-1:checked ~ #slides > div > span { left: 5% }

#slider #button-2:checked ~ #slides > div > span { left: -5% }

#slider #button-3:checked ~ #slides > div > span { left: -15% }

#slider #button-4:checked ~ #slides > div > span { left: -25% }

#slider #button-5:checked ~ #slides > div > span { left: -35% }

Summary

This slider will work in almost all browsers (in the latest version) except opera which currently doesn’t really support 3D transforms.For opera users, though, the slider will still be functional, so this has really no effect on usability, and is more a form of graceful degradation than anything else. This kind of javascript-less slider is likely to become a lot more popular in the future, especially since it is effectively supported by all the major browser vendors.

What is SVG? [Guide to SVG Part 2]

Johnny Simpson — Tue, 12 Feb 2013 16:54:46 +0000

In part 1 of this guide we covered all the basics from implementation structure to more advanced things such use tags. In this part we’re going to expand upon what we already know, as well as look at some of the more interesting features that SVG has.

This article is part of a series! If you want to stay up to date don’t forget to follow or subscribe!

Part 1 • Part 2

What we will cover

Structure in depth
More in depth styling
Adding Text
Gradients
Filter Effects

Structure in-depth

In the previous part of this guide we looked at some pretty neat things we can do with our SVG structure. The structure of SVG is key to understanding exactly how it works, so before we move on lets take a look at some other structural elements that SVG allows us to use.

SVG inside SVG (Establishing new viewports)

Sometimes, when designing something in SVG, we want to establish a new viewport. A viewport is effectively the canvas on which we draw our SVG elements. Therfore, it makes sense that the standard way to do this is to use another SVG tag inside the first SVG tag with an altered position. For example, we could do something like this:

The x and y attributes are where the new SVG element begins (in this example it is 25px across and 25px down). This new viewport can have its own viewBox (covered in part 1). The tag is not the only tag that defines a new viewport. The following tags do just that:

SVG tag
Symbol tag
Image tag

We’ve covered SVG and symbols before, but what is an image tag?

The Image Tag

The image tag is exactly what you expect it to be. It’s a way to add images to your SVG documents. These can be anything such as png or jpeg, or even other SVG images. They work quite similarly to images in HTML documents:

Conditional Statements (or the switch tag)

The switch tag is pretty interesting because SVG is just a general XML based language, and conditional statements are more akin to Javascript or PHP, or even CSS more recently. Should the statement return true, the user will view the contents of the switch tag. Otherwise the contents will be hidden. The switch tag allows you to check for a few things and show SVG code accordingly:

Adding Text

Adding text couldn’t be easier with SVG, you just use the text tag:

Hello World!

You can even wrap text around a path, just create a path in the definitions area of your SVG document and wrap the text around that.


   



    Hello World!

Don’t forget to include the xlink:href xmlns link in your SVG tag (since we’re using xlink:href above)! As complicated as that sounds, it just means you need to change your SVG tag from something like this:

to something like this:

Styling SVG

The main purpose of SVG is to create images, and without styles or the ability to style our SVG elements properly, SVG can seem almost pointless. For those reasons, before we move onto the more interesting things, lets take a look at styling in a little bit more detail.

Some of the more interesting things that SVG styling can do include:

General Styles
Gradients
Filters
Drop Shadows
Text

General Styling

It’s possible to style SVG elements with a simple CSS-esque style tag, most CSS tags will work, as well as a few SVG specific ones that match up with attributes (for example fill: red and stroke: blue will work, in the same way as setting the property fill=”red” and stroke=”blue” does).

Similarly, you can set style tags in your SVG and give your SVG tags classes, just like HTML!

Gradients

A pretty ugly gradient example

Gradients are a staple in modern web design, at least, for adding subtle depth to something. For that reason gradients are definable directly in SVG. Since they are definitions, we put them within def tags:

The stop tags represent the position the point at which the colour will begin to fade. You can add more colours or stop tags as you see fit. Since this gradient has been defined we can apply it to multiple elements just by using the url function:

Gradients can even be applied to borders! Just change the stroke="blue" above to stroke="url(#gradient)". If linear gradients aren’t really your thing, then perhaps a radial gradient would work instead:

There are a few attributes associated with the radial gradient which might make you look twice:

gradientUnits – (can be userSpaceOnUse or objectBoundingBox) Determines how the stop tag offsets will work (i.e. what coordinating system they will use). So for example, if it’s set to userSpaceOnUse the units used will be mapped to the element you apply it to. If you set it to objectBoundingBox it will use its bounding box (i.e. the smallest area the gradient can fit into) as its coordinate system.
cx, cy – The center of the radial gradient
fx, fy – The focal point. Effectively the gradient is drawn in such a way so that the offset=”0%” at this point

Filters

Perhaps one of the most interesting ways to style your SVG elements is to use filters. Filters are similar to gradients, in that they are defined and can be reused, but the filter module is huge and provide many complicated ways to change how SVG elements are defined. Filters can become quite complicated and have a very specialized vocabulary of tags, but learning them is key to styling SVG. Most filters begin with a filter tag inside the usual tag.

That seems pretty simple, but it’s the stuff that goes into the filter that makes it important, and there are a lot of filter tags, each of which accomplish something different. Before we get to that though, there are a few things we should cover. Filters generally follow a set syntax, and some of the most common attributes are in and result.

It’s important to note when filtering we are filtering an aspect of something. This aspect may encompass the whole element (i.e. the graphic in an image tag) but that is not necessarily the case.

The in attribute is what you’re trying to filter. When we finish our filter we will apply it to a block element such as an image or a tag, and this is what we want the in attribute to represent. In total there are 4 aspects of an element we can filter (there are more but they aren’t widely supported).

SourceGraphic – The graphic/image of the element we are applying our filters to. If there is no graphic/image then this will return as just black (nothing will happen basically)
SourceAlpha – The alpha channels for the element we are applying our filters to. Again, if there are none this will return black.
FillPaint – The contents of the fill tag. Often this is pretty useless to use, but it might be useful if the fill was a gradient or something.
StrokePaint – The contents of the stroke tag. Again, usually quite useless.
Contents of the result attribute – This is where the result attribute comes in. It’s effectively an identifier for the output. Think of filters like a machine. You put something into one component of the machine, and when it comes out you can place it in another component. So when your filtered element comes out of the first filter, you can identify it with the result attribute and then use it inside the in tag.

An example of the in/result mechanism

Applying filters

Filters are applied to elements in SVG. You define a filter, and then it can be used on multiple elements. To apply a filter in SVG you simply use the filter tag:

...

#filterid being the id you applied to the filter (obviously!).

Filter list

The following titles are the tag names in question. There are a lot of filters and the art of filtering could take a while to truly master.

feBlend

Takes two images and blends them using common blending modes in image software. It has two ‘in’ inputs for this reason. This is quite useful to use in conjunction with feImage (see further below for more info on feImage).

There are 6 blend modes, those being normal, multiply, screen, darken and lighten. Here’s an example:

So in the above example we’re using the source graphic (the graphic of the element we’re going to apply the filter to) and the image we linked to using feImage, via the result tag. Of course, you can alter the filter blend tag to whatever blend mode you want.

feColorMatrix

feColorMatrix provides ways to modify or filter an object using a matrix. There are a few default settings too so if you’re not that familiar with matrices you can use those. Effectively this filter allows you to modify every pixel of an image.

Here are some basics on matrices. If you define a matrix like this:

1   1   1   0.5   1
0.5 0.2 1   0.5   0.1
1   1   1   1     1
0.1 0.4 0.7 0.5   1

and the incoming colour is RGBA(75,22,48,0.5) then the outgoing colour will be RGBA(R, G, B, A) where R, G, B, A are defined below:

R = 1*75 + 1*22 + 1*48 + 0.5*0.5 + 1
G = 0.5*75 + 0.2*22 + 1*48 + 0.5*0.3 + 0.1
B = 1*75 + 1*22 + 1*48 + 1*0.5 + 1
A = 0.1*75 + 0.4*22 + 0.7*48 + 1*0.5 + 1

The fifth column does not refer to a specific channel, rather it is a constant offset. Defining that matrix with feColorMatrix would look a bit like this:

You don’t have to set a matrix though, and feColorMatrix provides different keywords which you can use instead of ‘matrix’ in the type attribute. For example, you can set type to saturate, hueRotate or luminanceToAlpha and not even define a matrix, but rather a single value. For saturate its a number, for hueRotate is a degree (since we’re rotating) and for luminanceToAlpha there is no value since its predefined.

feComponentTransfer

Effectively allows you to ‘remap’ a component (component meaning R, G, B or A channel). There are a few types and with each comes a specific way of altering the components.

identity – default setting, no change
table – allows you to provide a list of numbers and a few calculations which alter the component channel
discrete – similar to table, in that we use a list of numbers. The calculation is quite complicated so I wont include it here
linear – uses equation new component = slope*C + intercept to gain new component. Uses slope and intercept attributes
gamma – uses equation new component = amplitude*C^exponent + offset to gain new component. Uses amplitude, exponent and offset attributes.

We use the tags feFuncR for the R channel, feFuncG for the G channel, and so on.

feComposite

Creates a composite of two images using the porter duff compositing operations. Since we’re compositing we use two inputs. There are a few attributes that you might want to know:

operator – can be set to over, in, out, atop, xor or arithmetic.
k1, k2, k3 and k4 – if set to arithmetic, you can use these attributes to determine numbers that change the effect. The calculation is done like so: result = k1*i1*i2 + k2*i1 + k3*i2 + k4, where i1 and i2 are the pixel data from input 1 and 2 respectively

feConvolveMatrix

A convolution combines pixels with neighbouring pixels to produce an output. feConvolveMatrix combines this effect with a matrix to set how the neighbouring pixels combine. There are a few attributes:

order – the number of cells in the matrix. i.e. if it’s set to 3 each row will be 3 numbers long. If two numbers are set then the first will represent x and the second, y.
targetX – Determines the positioning in X of the convolution matrix relative to a given target pixel in the input image. The leftmost column of the matrix is column number zero.
targetY – Determines the positioning in Y of the convolution matrix relative to a given target pixel in the input image. The topmost row of the matrix is row number zero.
edgeMode – can be duplicate, wrap or none. Determines how the pixel colours should be handled at the edge of images. For example, if set to duplicate the pixels at the edge of the image will be duplicated for as long as necessary. If set to wrap, then it’ll take the colours from the other side of the image.
kernelMatrix – The numbers that make up the matrix
kernelUnitLength – Indicates the distance between rows and columns. If two numbers are set then the first represents the columns and the second the rows. This is based off the units for the filter, i.e. the ‘primitiveUnits’, a setting which can be set to userSpaceOnUse or objectBoundingBox, which we covered before in gradients.
divisor – after applying the matrix to an image the output is divided by the divisor number if set.
bias – after applying the matrix and dividing it by the divisor, the bias is added to the number.
preserveAlpha – if transparency should be preserved or not.

feDisplacementMap

A radial gradient applied to a displacement map (code below)

This filter uses the positions of one input to change the positions of another input, i.e. it alters one image using data from another image. For this reason it uses two inputs, a scale and you can set specifically which channel you want to filter (R, G, B or A), and specifically along which axis you want to select that channel.

The above uses a turbulence filter (see feTurbulence for more info) as a source for a displacement map and then displaces the element based off data for that map. We applied a gradient to the rectangle which is then mapped to the displacement map.

feFlood

Effectively creates a rectangular area which is filled with a colour of your choosing. This can be used to create a solid colour and then used in other filters. The flood-colour is the colour, and the flood-opacity is the opacity (in case you didn’t get it!)


    


feGaussianBlur
Just a simple blur. Not that difficult to accomplish. The stdDeviation property is the amount of blur you wish to add. If you give two numbers the first will apply along the x axis and the second along the y axis. Sometimes this filter is used to create a sort of 'drop down shadow' effect.
1

feImage

An image that you wish to use as part of the filtering process. Especially useful when wanting to blend two images with SVG using feBlend, although it can be used in a bunch of circumstances. The syntax is pretty simple, and the image is usually linked to another image via the result attribute.

feMerge

A checkerboard image merged with a turbulence filter

Allows you to take multiple outputs and merge them. To do that we take our outputs via the result attirbute and merge them like this:

feMorphology

Thickens or thins shapes and artwork. It has an attribute called operator which can be set to erode (to make thinner) or dilate (to make fatter). Then we set a radius which is the amount we wish to erode or thicken the element by:

feOffset

Offsets the element we are applying the filter to. Effectively moves it a certain distance in the x and y directions.

feTile

feTile provides a way to take input of an image and tile it across an object. The syntax can be quite simple, all you have to do is define an image using feImage and then call the feTile tag:

feTurbulence

The feTurbulence filter creates a weird map of turbulence using a few attributes. This distorted map can then be used and applied to other filters to reach a desired effect. Here’s a list of all the attributes for feTurbulence:

baseFrequency – effectively the amount of noise. It is a number. If two numbers are defined they represent the nose along the x and y axis respectively.
numOctaves – Affects how the noise looks
seed – The starting number for the random number generator
stitchTiles – can be set to stitch or noStitch. If set to no stitch no effort will be made to link tiles together, whereas if it’s set to stitch the filter will make it contain an even number of ‘noise’ elements to improve linkage.
type – can be fractalNoise or turbulence. The fractalNoise filter makes the filter just produce noise, whereas turbulence creates a cool turbulence effect.

Lighting Effects

It is possible to even add lighting effects with SVG’s magnificent filter system. There are two types of lighting, feDiffuseLightingfeSpecularLighting. Specular lighting uses this model. Diffuse lighting can also be seen on that page in the image under description. There are also 3 main tags which determine lighting that go inside these two tags:

feDistantLight – has the attributes azimuth, which is the angle between the x and y axis, and elevation, which is how far up the light source is positioned
fePointLight – Sets a light source at a specific coordinate using x, y, and z attributes
feSpotLight – Sets a spot light using x, y and z coordinates. Then it sets where the spot light is pointing at with pointsAtX, pointsAtY and pointsAtZ. Then sets a limiting factor in degrees to where the light cannot point using limitingConeAngle

Example of 3 light sources

Basically you pick a light source and place it in a light type, either diffuse or specular. Again, these have numerous settings. For both diffuse lighting and specular you can set a lighting colour, i.e. the colour of the light you wish to use.

Filters to Create Drop Shadows

There is no ‘drop shadow’ tag in SVG, so we sort of have to improvise. Basically, we take the element we want to give a drop shadow and add a filter which takes the element, offsets it, blurs it and removes colour, and then we use a colour matrix to lower the opacity. Sound pretty complicated? Well for a drop shadow, it is pretty complicated. But it’s doable. Here is the code, which should give this green square a drop shadow.

Summary

We’ve covered quite a bit in this part. Next time we’ll cover things like animations, interactions and transforms, as well as a few other cool features, so stay tuned! The best way to learn is to experiment, so open up a new SVG document and try out some of the things shown here. Don’t forget to read part 1 if you missed it, and have a good day!

Part 1 • Part 2

The Future of CSS3: Looking at Future Techniques Today

Johnny Simpson — Tue, 29 Jan 2013 18:00:31 +0000

It’s a brand new year and with that comes hope for better web standards. Just last November a new specification was published: The CSS Mask Specification. This is an official specification on something that webkit browsers could do for a long time (mask images), which means it’s going to be implemented in other browsers now too. What else will CSS bring to the table in the coming year?

CSS Masks

Masks have been around for a long time, and were initially implemented by webkit browsers as a pretty neat feature, albeit one we could never really use because it wasn’t a standard. Time passed, and now we have a real W3C specification on CSS masks, which will most likely be implemented by major browsers in the coming months.

So what exactly is a mask? To put it simply, in a mask we will have an image or element, and then a image consisting of a black or white shape with a transparent background. If we apply the mask to our image or element, the image or element will be ‘mapped’ to the mask. This means that the black or white area will be replaced by the image or element we are masking. For example:

In the mask, the white circles are actually transparent

Mask Implementation

Masks can be used today, but unfortunately not to their full potential. Currently Webkit is the only browser supporting masks. Webkit currently only supports alpha masks, which means if you have a mask, it doesn’t matter what colour the shape is, the content will be clipped to it.

The other kind of mask is luminance (not supported yet). Luminance masks are black and white, where the white areas will show the image, and the black will not. Grey areas will show the image slightly depending on how white they are (effectively, the darker the grey area the lower the opacity of whatever you’re masking).

Webkit Implementation

Masks are easy to use in webkit, in fact you can just use the mask css tag:

.element {
     -webkit-mask: url('mask.png');
}

Lets try to create a working example though. Here is our mask image (We’re using alpha, so the best thing to do is a black shape on a transparent background):

Our Mask Image

Now lets say we have an image (HTML elements work too!). For this simple example we’ll use an image. Here is the image I’m going to use:

Created by Mark Braggins

With a little HTML and CSS:

We end up with this in webkit browsers:

It’s also possible to use properties that you would expect on background tags with masks. For example, you can set the position:




.element img {
     /* Mask URL, Mask position, repeat mask?, how far should the mask mask? (content-box, padding-box or border-box?) */ 
    -webkit-mask: url(mask-image.png) 30% 30% repeat-x border-box;
    
    /* .. is the same as.. */
    -webkit-mask-image: url(mask-image.png);
    -webkit-mask-position: 30% 30%;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-box-clip: border-box;
    
    /* You can also set size! */
    -webkit-mask-size: 30% 30%;
}

CSS Exclusions

CSS Exclusions have very little support but they’re really going to improve how we design content for websites. Using just one simple property you can easily change the entire landscape of a document, almost as if editing it in a WYSIWYG editor. So how do CSS exclusions work? The most interesting property is wrap-flow.

Wrap-flow

Wrap flow allows you to determine how elements will affect other elements when they are placed on top of other elements. Normally when you move an element on top of another element (via position relative, etc) the blocks will overlap. Using wrap-flow however, the other elements will be forced to adapt to fit around the element placed on top.

Wrap-flow can have quite a few settings. It can be set to auto, start, end, both, minimum, maximum or clear.

auto: normal behaviour, none of the element is adjusted
start: everything after the element is removed
end: everything before the element is removed
both: only content below the object is removed
minimum: the side with the most content is removed
maximum: the side with the least content is removed
clear: all content is removed from the height of the object

That probably makes no sense to you, so here are some diagrams to help!

The content will usually be text, so the text will be wrapped around the overlapping pieces. Any movement of the overlapping pieces will change the shape of the content to fit with them.

Composition and Blending

Yeah that’s right, blending modes in CSS has become an official specification. That means you’ll be able to do things like color burn with just CSS! As you’d imagine, support is non existant due to it being a brand new specification, but it is certainly something to get excited about. The specification is still pretty new so there will be changes before it hits browsers, but effectively you will have two images, one placed over the other via absolute positioning. It might look a little like this:

Your CSS might then look a little like this:

.blend {
     position: relative;
}
.blend .duck {    
     mix-blend-mode: overlay;
}

Such a combination might look a little like this:

The duck looks a little ominous, but it gives you an idea of what it would look like

It is possible to try out CSS blending modes if you’re interested. First you need to download Adobe’s experimental webkit browser. Then visit this page with the experimental browser to see them all in action! That’s about all for today, but stay tuned for more CSS updates and guides.

What is SVG? [Guide to SVG Part 1]

Johnny Simpson — Tue, 22 Jan 2013 16:47:14 +0000

SVG (Scalable Vector Graphics) is a very useful tool for drawing shapes and figures with simple code. It is probably one of the most useful tools that web designers are hesitant to use, although once you understand it, you’ll wonder how you lived without it! In this series we’ll be going through the basics of SVG, including how to use it and what it can do for you.

This article is part of a series! If you want to stay up to date don’t forget to follow or subscribe!

Part 1 • Part 2

What we will cover in this part

Basic Structure of SVG
Tools you can use to make SVG documents more easily
Basic shapes and drawings with SVG
Embedding SVG files
How to use paths
More advanced structural elements

What kind of language is SVG?

SVG is XML based, which means we use tags similar to the kind we use in HTML. In fact, if you know HTML, SVG should be a breeze. SVG is pretty easy to implement in the core tenants of web design (CSS, HTML and Javascript) and with the rise of an ‘imageless’ web, SVG is going to be a fundamental component to cross device compatibility.

How do we begin?

Starting a new SVG document is really easy! First make a .svg file (for example, file.svg) and open it in your text editor of choice. Like any XML based document, we will begin with some semantics. That just means we have a few lines telling the browser exactly what we are creating. So your run of the mill (or how you will start most of your SVG documents) SVG document might look a little like this:

An SVG document has a width and a height, something you might not be accustomed to in HTML. Apart from that most things shouldn’t be that different. All the SVG code you’re going to write is going to go inside the tags.

Tools of the trade

INKSCAPE

Before we begin it’s important to note that although SVG does involve sometimes coding things by hand, there are programs that make it a lot easier. One of the most popular is called Inkscape, which allows you to create objects and export them as SVG files. If you want to continue with SVG I sincerely suggest downloading Inkscape (it’s free!) and using it in conjunction with hard coding SVG.

On top of that, Adobe Illustrator also has SVG functionality and you can save your files as SVG files. If you have Illustrator this would probably be the best choice, however Inkscape provides a free alternative.

Basic Structure of SVG

SVG is all about semantics (that’s the order and grouping of information, in case you didn’t know). For that reason it’s pretty customary to start every SVG file with a title and description. Before we do that though, you should know about the main grouping tag in SVG, . The groups together similar elements or objects that are related in SVG. It’s kind of like

, although with a bit more of an SVG slant.

The title and description tags are </code> and <code><desc></code> respectively. Since they are related, we will group them together with a <g> tag. Therefore, in effect, every SVG document you write should look a bit like this:</p> <pre class="brush: xml; title: ; notranslate"> <?xml version="1.0" standalone="no"?> <svg width="500" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <g> <title>The Title for your SVG File The description goes here! E.g. 'a red and black cube'

`Understanding viewBoxes`


You might understand the quite strange property viewBox above on the svg tag. To understand exactly what that is let me give you an example. Without the viewbox property, the SVG tag will still work. Suppose you try to define a coordinate (the main way we define shapes in SVG) on the SVG document. So lets say we want a circle at (50, 50). Without the viewBox that point will be 50 pixels in and 50 pixels down. 
However, since we have a viewBox, we change the grid system completely. Our view box is 0 0 100 100. That means that the point at the very left hand edge and the very top of the SVG document is 0 and 0, and the point at the very bottom and very far right of the SVG document is 100 and 100. So (50, 50) with a viewBox of 0 0 100 100 is 50% across and 50% down, rather than 50 pixels. ViewBoxes can be anything, and have the following syntax:
viewBox="min-x min-y width height"

You could have a viewBox of 50 100 200 250. That means a coordinate of (50, 100) is in the very top left corner of the SVG document, and the very bottom right corner is (200, 250)!
Embedding SVG in HTML and CSS
SVG is easily embeddable into HTML documents, and therefore easily incorporated into your web designs. First off, SVG elements can be used as backgrounds in CSS:
background: url('file.svg');

On top of that, SVG can be embedded directly into an HTML document with the embed property. This is supported in HTML5 and all major browsers, so is safe enough to use:


It’s also possible to directly put SVG in an HTML document with the SVG tag like so:






Basic Shapes



Drawing shapes in SVG uses co-ordinates inside the SVG document to define things like radius, amongst others. Along with these basic shapes we’ll be looking at a few basic properties that allow us to style the various shapes. These are pretty self explanatory and applicable to all the other shapes.
Rectangles


The above draws a rectangle whose top left point is at (20, 20) (that’s 20 pixels in from the left, and 20 pixels down from the top). It has a width of 100 and a height of 100. It is #f2ebdf in colour (the fill property defines the colour), and has a #e3d8c6 stroke around the edge that is 10 pixels in width.
Circle
Since circles are defined by their radius, we need to define radius property.


Another easy to miss detail when defining a circle is we define the position of the center of the circle, so rather than just using x we use cx.
Ellipses
Quite similar to circles, only we define the radius for the x and y directions. For this, we use the rx and ry properties. 


Polygons
Polygons are shapes with multiple points. To mark every point, we us a property called points, separating each point by a space. The final point will then be joined up to the first point creating a custom shape. For this reason, there is no need to define a width or height.


So the above polygon will go from (30, 60) to (120, 50) to (180, 20), etc, before returning back to (30, 30).

    You can apply things like ‘stroke’ to a  element, and then all the elements in the  element will inherit it!

Lines
Lines aren’t shapes, but they follow a similar procedure and syntax to what we would expect from a shape element. There are two ways to draw lines, the first being a single line from one point to another and the second being a polyline which encompasses many points and can turn. 


The above single line will go from (100, 20) to (200, 40). A polyline is pretty straight forward too. A syntax similar to the polygon is used:


Again, similar to polygons, each set of points in the points property defines a point which the line will go through.
Paths
Paths are a little more complicated than what we’ve been used to so far. Paths use letters to define their shape. This gives us a lot more flexibility when drawing shapes.
   

So what exactly does this mean? The d property is similar to the points property for polygons and polylines. When we say M in a path we want to move to that point without drawing a line. So M 350,75 means move to point (350, 75) without drawing a line. L means draw a line, so L 379,161 means move to (379, 161). The z at the very end means ‘the end’, and terminates the shape. Note that it is still possible to continue after z which starts a new path, so we could do this:
   

Below is a list of all the letters and everything they do. Try learning them!


Letter
Syntax
Purpose


M or m
M x,y (Ex: M 20,400)
Moves to a point on the SVG document without drawing a line


L or l
L x,y (Ex: L 40,20)
Draws a line from the previously defined point to the point defined after L


H or h
H x (Ex: H 30)
Draws a horizontal line from the previously defined point to the x coordinate defined after the H


V or v
V y (Ex: H 30)
Draws a vertical line from the previously defined point to the y coordinate defined after the V


C or c
C x1,y1 x2,y2 x,y (Ex: C 50,40 100,40 100,100)
Draws a cubic Bézier curve from the previously defined point to (x,y) using (x1,y1) and (x2,y2) as control points (See below for definition of control points)


S or s
S x2,y2 x,y (Ex: S 50,40 100,100)
Draws a cubic Bézier curve from the previously defined point to (x,y) using (x2,y2) as a control point and assuming that (x1,y1) is a mirror of (x2,y2) on the previous command. If there was no previous command (x2,y2) is assumed to be the same as (x,y) (See below for definition of control points)


Q or q
Q x1,y1 x,y (Ex: S 100,40 30,10)
Draws a quadratic Bézier curve from the previously defined point to (x,y) using (x1,y1) as a control point (See below for definition of control points)


T or t
T x,y (Ex: T 100,40)
Draws a quadratic Bézier curve from the previously defined point to (x,y) assuming the control point is the mirror of the control point in the previous command. If you didn’t have a control point in the previous command the control point is assumed to be the same as (x,y) (See below for definition of control points)


A or a
A rx,ry x-axis-rotation large-arc?,sweep? x,y (Ex: A 100,40 30 0,0 20,20)
Draws an arc from the previously defined point to (x,y) based on the radii (rx,ry) and the rotation of the curve (x-axis-rotation). Two boolean functions can be set to further define the curve (large-arc,sweep) which are either set to 1 or 0. (See below for more information on large-arc and sweep)


Hey! What’s the difference between uppercase and lowercase?
You may have noticed that both uppercase and lowercase letters can be used. You’d be right in thinking there is a difference. When you use an uppercase letter the point is defined from the top left of document. So the point (100, 100) is 100 pixels across and 100 pixels down from the top left of the document. 
If you use a lowercase letter, however, the point is defined relative to the last point. So suppose you have M 100,100 l 20,20. You move to point (100,100) and then draw a line to (120, 120). Effectively, the last point becomes your zero point.
Control Points?
That might sound confusing, but it’s just like when you use photoshop and the pen tool. Cubic and Quadratic Bézier curves are mathematical functions, and the control points help define that function. Consider the following path:


The control points are at (200, 100) and (100, 300). The curve is drawn from (10, 10) to (300, 300). Below is an annotated diagram of that curve.



Quadratic Bézier curves differ only in the fact that they have a single control point, large arc and sweep. You can set these to either 1 or 0, and they give us quite odd results.
Arcs
Arcs are a little more tricky in that they have these odd boolean settings large arc and sweep. Below is a diagram showing exactly how they work. They can be set to either 1 or 0. 



More Advanced Structure
Now that we understand the basic concepts behind drawing on a SVG document, lets look in a little bit more detail at the structure of an SVG document. There are many structural elements in SVG which can be used to help you when creating something.
Definitions and Use
We can define elements in SVG that we use a lot for easy use. This could be useful if you’re using the same gradient a lot, but we’ll get to that in part 2 of this series. For now we’ll look at how we can combine definitions with another element called use.
First off, defining something is pretty easy. If you want to define a reusable element, that element must go inside a tag called . You can have multiple definitions inside a single defs tag, but each must have a unique ID. For example, below I define 2 rectangles:

   
   


But what exactly is the use of defining stuff? Well, definitions do not show up directly in your SVG document, but we can call upon these definitions and use them anywhere using the use tag. There are other ways to use definitions with different calling methods but we’ll get to that in the follow up parts to this guide.
So we can use a definition with the  tag:


This will call upon our definition which has the id definition1. The xlink:href property is just a way to link up with the definition of our choice. The xlink attribute is not actually a part of SVG and wont work, so to use this we need to change our SVG tag to tell the browser that we want to be able to use it. To do that, just change your SVG tag from something like this:

to this:

Since SVG is totally scalable we can define the use element with different widths and heights and the object in our definition will change size depending on that. For example we could easily define our rectangle has half the width and height in the use tag, and it would display that way.


So the use tag above will be replaced by the rectangle that we called. This has more apparent uses when creating complex shapes that are used a lot, which can then be resized at will.
Symbols
Speaking of , we can also call upon a  tag to be called upon later in an SVG document. A symbol can be called within or outside the  tag, and will not appear in the document until you call it with a use tag. 
The main difference between a symbol and definitions is that a symbol is a single object, and a symbol can have a custom viewBox. So you can redefine a viewBox specifically for a symbol. Otherwise, it’s much the same as a definition:

   
   


Which can then be called to be put into a document using the use tag:


Summary
In this tutorial we have covered some of the core tenets of SVG, from basic structure to drawing shapes amongst other things. In part 2 we will look at styling in more depth as well as some other awesome things SVG can do. Don’t forget to subscribe or follow to make sure you don’t miss it!
Part 1 • Part 2



“Infinite” Scroll to Load More Content Pagination with jQuery
Johnny Simpson — Tue, 15 Jan 2013 16:36:08 +0000
Pagination with numbers is, in many ways, counter intuitive and time consuming for the user. They have to stop, click on a number, wait for the page to load, and then continue their search. Some websites such as facebook have opted out of this notion of pagination for a system which loads content automatically as the user scrolls. In this tutorial that is what we’re going to be making.
How it works
I’ve created a little plugin that allows us to accomplish our goal. Simply put the plugin checks if the user is at the bottom of the container you specify and loads more content accordingly. Then this data is sent to an ajax file which processes what posts to show.
// Check the user is at the bottom of the element
if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
						
	// Now we are working, so busy is true
	busy = true;
						
	// Tell the user we're loading posts
	$this.find('.loading-bar').html('Loading Posts');
			
	// Run the function to fetch the data inside a delay
	// This is useful if you have content in a footer you
	// want the user to see.
	setTimeout(function() {
		// This is the Ajax function					
		getData();
							
	}, $settings.delay);
							
}	


The key line here is if($(window).scrollTop() + $(window).height() > $this.height() ... This is basically saying, if the user scroll position is greater than the height of the element targeted, then more elements should be loaded.
What is Ajax?



Ajax is how we send data to files when an event happens in javascript. For example, when we scroll we want to send some data to another file to figure out what to do. That file is usually a PHP file which will process the data sent, and then you can do something like grab information from a database. So how do we do this with jQuery? Since we’re posting data, we use the $.post function. It looks a little like this:
$.post('file.php', {
						
	information        : 'to be sent',
	to                 : 'file'
					    
	}, function(data) {
		
	}	
						
});


So in the above example we end the information (thats the bit inside the first set of curly brackets) to the file, file.php. When the information is sent it will return some information in the form of a data variable, and we can then use that data to return information to the user via Javascript. 
The ajax file
The ajax file is going to have to be customized to fit your needs. All you have to do is grab some information from the MySQL database of your choice with some PHP. I have created a very basic ajax.php file that grabs information from a wordpress MySQL database and displays the content with the title and link. It looks a little like this, but it will be included with the download files in the download link above.
'.$row['post_title'].'';
	echo ''.$content.'...
';

}

?>

Using the Plugin
Once you have your ajax file sorted out, its just a case of running the plugin. There are a bunch of variables you can determine, but it’s important that you define the query if you’re using the original ajax.php file listed above.
To run the plugin just upload all the files and create a container in your HTML called #content or whatever you want to call your container. Then run the plugin on that. Easy!


$(document).ready(function() {

	$('#content').scrollPagination({

		nop     : 10, // The number of posts per scroll to be loaded
		offset  : 0, // Initial offset, begins at 0 in this case
		error   : 'No More Posts!', // When the user reaches the end this is the message that is
		                            // displayed. You can change this if you want.
		delay   : 500, // When you scroll down the posts will load after a delayed amount of time.
		               // This is mainly for usability concerns. You can alter this as you see fit
		scroll  : true // The main bit, if set to false posts will not load as the user scrolls. 
		               // but will still load if the user clicks.
		
	});
	
});


In the download you’ll find the files necessary to do everything I’ve shown you. Since I can’t include database details you will have to supply your own which you can edit in the ajax.php file. And that’s it! Have a good day!

   



iPhone Style Dragging for Both Desktop and Mobile with jQuery
Johnny Simpson — Tue, 08 Jan 2013 17:31:02 +0000
When we create stuff for the web now it’s important we remember that the web has spread from the trackpad and mouse to the touch screen. Sometimes this is hard to accomodate for, but it’s not that hard to create some awesome cross device friendly touch and drag events with HTML5 and some smart styling!

    

Getting Started
I’ve made a little plugin that lets you grab and drag your way through a bunch of pictures of album artwork, similar to you drag through objects on an iphone at the start screen. Check out the demo to get a feel for what we’re going to be creating. The plugin isn’t too difficult to understand and you can download the finished version above, but when I first designed it, it only worked with mouse drags.
$this.mousemove(function() {

});

So first off we need to alter this so that it’s mobile compatible. That’s not too difficult to do, we just need to use bind and we can bind multiple event handlers to a single element using the same function. Chances are the function you’re using isn’t going to be changing that significantly from mobile to desktop so this is quite beneficial. 
$this.bind('mousemove touchmove', function() {

});

Voila! Now our function is totally compatible with mobiles. In our particular plugin we have to check where the user is clicking in the object. Usually this would be done with e.pageX but on mobile it’s a little more complicated. This is what I initially wrote (for desktop only compatibility):
firstPositionX = e.pageX - $this.offset().left;

This is the first position the user clicks. Now when it comes to mobile, this will be undefined. So all we have to do is say if e.pageX is undefined, then use the mobile version of e.pageX:
if(e.pageX == undefined) firstPositionX = e.originalEvent.touches[0].pageX - $this.offset().left;
else firstPositionX = e.pageX - $this.offset().left;

Adjusting the CSS
Now the next problem is that the interface is still scaled for desktop screens. To fix that we need to alter the CSS a little. On a mobile device, we should ignore all default settings and just set the width to the width of the device. We also need to alter the padding a little.
@media only screen and (max-device-width: 480px) { 

	.drag {
		width: 100% !important;
		height: 100% !important;
		border-radius: 0;
		margin: 0 !important;
	}
	
	.drag .item {
		margin: 7px 11px;
		opacity: 1;
	}
	
}

And now we have something that will work on most devices!
How the plugin works
The plugin provides a way to use your mouse to drag a bunch of icons in a similar fashion to what you’d expect on an iPhone. It has a bunch of settings and can be further customized with CSS. To use the plugin all you have to do is include it and a jQuery file file and then run this little snippet of Javascript:
$(document).ready(function() {

	$('.content').dragSensitive({
	
		// The length of every row. Default is 10 items per row
		rowLength : 10,
		
		// The default width of the box. 
		boxWidth  : 500,
		
		// The default height of the box.
		boxHeight : 500,
		
		// The rate at which grabbing pans across items
		// The default is 1.3. Increasing makes it go slower.
		rate      : 1.3,
		
		// Sets whether or not the UI will snap to the last
		// element when the user stops grabbing
		round     : true,
		
		// This amount a user can drag (in pixels) while still
		// being able to click an object. Usually clicking is
		// disabled on drag, but within a (by default) 20px movement
		// clicking will still be enabled
		mistake   : 20
		
	});

});

The settings do not have to be altered, and in fact you can run the plugin without even mentioning them, but they are shown above for reference. Your HTML would then look something like this:

	 Some Content
 
	 
	 
	 
	 
	 
	 
	 
	


Each item represents a single icon or block in your drag box. If you put a div with the class itemcontent inside an item this content will be shown on the back of the icon when it flips over. Otherwise a generic play button will be shown. 
You can download the files required to run this (I’ve annotated the code so you can understand what’s happening), or alternatively just check out the demo. I have tested this in the latest version of all browsers and it seems to work fine. Feel free to ask any questions in the comments, and have a good day!

   



The Best of Responsive Web Design 2012
Johnny Simpson — Thu, 03 Jan 2013 18:00:05 +0000
In the past year we have seen the rapid movement of mainstream and general web design to responsive CSS and HTML. This has been a boon for the mobile web industry, and provided us with websites we can actually use on mobile devices(!) In this roundup we’re going to look at some of the best implementations of responsiveness in the past year. Who knows what the next year will bring!
Common Features
A few common features have appeared over the last year that are becoming more mainstream in their application. The following are trends we have seen in 2012 and are likely to continue into 2013. 
3 Bar Drop Down

   

The 3 bar icon, representing a drop down menu has grown to become a staple for most web designers working on the responsive web. Some might say it’s a little ambiguous and maybe better to avoid, but this has not stopped people from applying it to many of their designs.
Slide Out Menu

   

   Mashable is just one of the sites to adopt this

Some websites have adopted a Facebook App-esque slide out panel for their menu. This is actually a pretty awesome addition to your mobile web application which you might be inspired to implement into your designs.
Mixed Feelings on Fixed Headers

   

   The Next Web uses a fixed header

Fixed headers on mobile devices seem to be receiving mixed feelings. On one hand a fixed header allows users to quickly navigate around the site, but on the other, screen space on mobile devices is very limited. Depending on your project you might have different feelings.
Roundup Below is a roundup of some of the best examples of responsive design from 2012. Enjoy!
World Wild Life




Boston Globe





Mashable





Inspire Conference





Dress Responsively





Humaan





Microsoft





CreateDM





Happy Cog





The Great Discontent





The Next Web





Viljami S





Grain and Mortar





Bad Racket





Daniel Vane





5D Institution





Fly Wheel





Food Sense





Envy Labs





Map Box





Twitter Bootstrap





United Pixel Workers





Oliver Russel





Collective Boom





Pixel Stadium





Skinny Ties





Indochino





Lorenzo Verzini





Design Week Portland





GRK Fresh





We Are Moving Things






   



CSS3 Regions and Flow
Johnny Simpson — Tue, 09 Oct 2012 16:46:51 +0000
Put simply, CSS3 regions associate boxes and blocks with other blocks to allow a designer to make content flow from one box into another automatically. Previously this was impossible with just CSS. The CSS3 Regions Specification expands CSS further from a static design to a more responsive and future proof language.

    


    This article is about new CSS which may not be supported in every browser! Be careful.

What are regions
Put simply, regions are a way in CSS to allow content to flow from one box to another. This tutorial will show you how regions work according to the current specification. Currently regions are available in the nightly build of webkit and in the platform preview of IE. 
Enabling Regions
We’re going to be using Google Chrome as the web browser of choice for this tutorial as it has the greatest support for this feature. For some odd reason Chrome has regions disabled, so we need to go and enable it by going to chrome://flags

    

How it works
Effectively there are two key properties to a region flow. Those are the flow-in and flow-out. Now pay attention, because this can be a little tricky to wrap your head around. The basic principle is that we can allow content to flow from one block to another. The content of a specified div will go from one div to the other, ‘flowing’ between them, rather than having to put specific content in each div separately.

    

The idea is that we will have one block which contains the content, and ‘flow’ the content from that block into several other blocks. The content will still be contained within the primary container physically, but it will be diverted to flow through other block elements. 
Keywords
For a flow to work we give it a keyword. A keyword identifies which items will flow into which containers. So suppose we have something like this in HTML:

     [ Really long article goes here ] 


    
    
    



We can set it up so the article source will ‘flow’ into the regions. Note that the source div will effectively disappear since the content will be moved into the regions. For this particular example we’ll use the keyword ‘main’. You can use any keyword you want, it doesn’t really matter. Just make sure the content and the objects you want the content to flow into use the same keyword.
So the content will flow into this hypothetical ‘main’ container and then flow out again into the regions. Although this isn’t necessarily completely accurate it is an easy way to think about it.
#source-1 {
	-webkit-flow-into: main;
}

.region {
	-webkit-flow-from: main;
	width: 250px;
	float: left;
	margin-right: 10px;
	background: #eee;
	width: 30%;
	padding: 1%;
	margin-right: 1%;
	height: 400px;
}

You can have multiple things flowing into one container. They will appear one after the other in the flow. So you could have two sources, or other content which will be added on to the flow.

    

Styling the flow
It becomes very easy to style the flow containers with the @region tag. All you need to do is target the element and style as you see fit. For example, you can target the HTML in the first region in the code above like so:
@region #region1 {
    p { ... }
}

What is the benefit to using this? It means you can style content that passes through multiple regions. You could highlight the first paragraph which may appear in two regions.
An Example
To help show you exactly how this all works, lets try a simple example. We have a layout in HTML like this:

    
        [ ARTICLE GOES HERE ]
    
    
    
    	
	
	
	    
	    
	    
	
	
		
		
	
	
		
	


You can put the article in the .source div if you want. Make sure it’s really long! Every .region div represents a single flow of content. That means we’re going to make the content flow from one to the other. Create a CSS file and put the following in it:
body {
	font-family: Georgia, serif;	
	margin: 0;
}

.content {
	padding: 2% 0 2% 2%;
}

#source {
	line-height: 26px;
	text-align: justify;
	-webkit-flow-into: main;
}

p {
	margin: 0;
	padding: 0;
	text-transform: capitalize;
}

.region {
	-webkit-flow-from: main;
	float: left;
	padding: 1%;
	margin-right: 1%;
}

.one-column .region {
	width: 96%;
	height: 200px;
}

.three-column .region {
	width: 30%;
	border-top: 2px solid #eee;
	border-bottom: 2px solid #eee;
	margin-right: 10px 1% 10px 0;
	height: 200px;
}

.two-column .region {
	width: 46.5%;
	height: 300px;
}

.one-column-last .region {
	width: 96%;
	height: 600px;
	font-weight: bold;
	font-style: italic;
}

The important lines to note are the flow from and flow into lines in .region and #source. The content flows from the source to ‘main’, and then from ‘main’ to the regions. Pretty simple, huh? 
Support is currently pretty bad with you needing to enable it in chrome. The platform preview of IE also supports regions, which is a big plus. However, it is totally unrealistic that you would use this in a real life project. It is nice, though, to see what is under development in web design.

   



CSS3 Conditional Statements
Johnny Simpson — Mon, 24 Sep 2012 13:23:14 +0000
In times gone by a web designer had only the properties and values in his head to style a website. Nowadays however, things are a little more complex, and they’re about to get even more so with the CSS Working Group’s conditional CSS statements.

    


    This article is about new CSS which may not be supported in every browser! Be careful.

I say almost introductory because you might have heard of these new things called media queries. Media queries are a type of conditional statement where you can style a webpage based on the properties of a user’s computer. For example, one might say the following in their CSS stylesheet:
@media screen and (min-width: 1000px) {

   /* CSS Goes here! */

}

The stuff you put in the curly brackets will only apply to screens with a width greater than 1000px. There are a bunch of other media queries regarding resolution, etc. I’m sure you’re quite familiar with them. What you may not know however is the CSS Conditional Statement Specification also talks about two other CSS conditional statements. Currently these two features are only supported in Firefox (6.0 for @document and 17.0 for @supports)
@supports

    

Suppose a particular brand of browser supports a feature, but another doesn’t. You then have a back up CSS script planned for browsers that do not support that particular feature. Well, @supports can help you with that! @supports checks to see if the property you call is supported in the browser. 
So lets say (for some reason) you only want CSS to apply to a browser with the CSS flexible box model supported. You might do something like this:
@supports (display: flex) {
    /* Put some CSS here */
}

The CSS in the curly brackets will only be enabled should the browser support the flex box. Then you can have other CSS which overrides that CSS should the browser not support the flex box, i.e.:
/* If flexbox isn't supported, backup CSS goes here */

@supports (display: flex) {
    /* Flexible box CSS goes here */
}


Similar to media queries, you can check for multiple things using or and and.
@supports (display: flex) and (box-shadow: 0 0 10px rgba(0,0,0,0.1)) { 
    /* If box shadows and the flex box are supported */
}
@supports ((display: flex) and (animation-duration: 1s)) or ((diplay: flex) and (transition-duration: 1s)) {
    /* If flex box and animation duration are supported, or if flex box and transition duration are supported */
}

Negation
You can check if a browser doesn’t support a feature too using not(). For example, the CSS in the curly brackets below will only be applicable when flexbox isn’t supported:
@supports not(display: flex) {
    /* Back up CSS goes here */
}

@document

   

@document styles CSS based on the page you are on. For example, it would be totally possible to do this to target a specific URL with CSS:
@document url('http://www.inserthtml.com/') {
    /* CSS goes here */
}

Or you could apply it to everything in a particular folder:
@document url-prefix('http://www.inserthtml.com/css') {
    /* CSS goes here */
}

The Benefits
Faster loading times
Presumably you can use this little trick to have a single unified header which selects which files to include based more on the user’s browser’s capabilities. For example, lets suppose you have some additional extras (box shadows, border-radius, etc), which are intended for newer browsers. When it comes to IE this can be a big problem because IE doesn’t support a lot of these features but you still have to load the CSS file. Using @supports you could reduce your primary CSS file and include the added extras as necessary in separate CSS files, thus improving page load times.






One Stylesheet for everything
Alternatively, you can have one stylesheet for everything since you can load the page specific and support specific CSS within these conditional statements. This is a good idea since the single CSS file will be stored in the user’s cache, so the page will load faster after the first visit.

/* Some regular CSS here */
div {
   ...
}

@supports (display: flexbox) {
    /* If supported, do this CSS */
}

@document url('http://www.inserthtml.com/page.html') {
    /* CSS for specific page */
} 

@media print {
    /* Media CSS */
}


Current Support


Feature
Chrome
Safari
Firefox
IE
Opera


@document
None
None
6.0
None
None


@supports
None
None
17.0
None
None

Letter	Syntax	Purpose
M or m	M x,y (Ex: M 20,400)	Moves to a point on the SVG document without drawing a line
L or l	L x,y (Ex: L 40,20)	Draws a line from the previously defined point to the point defined after L
H or h	H x (Ex: H 30)	Draws a horizontal line from the previously defined point to the x coordinate defined after the H
V or v	V y (Ex: H 30)	Draws a vertical line from the previously defined point to the y coordinate defined after the V
C or c	C x1,y1 x2,y2 x,y (Ex: C 50,40 100,40 100,100)	Draws a cubic Bézier curve from the previously defined point to (x,y) using (x1,y1) and (x2,y2) as control points (See below for definition of control points)
S or s	S x2,y2 x,y (Ex: S 50,40 100,100)	Draws a cubic Bézier curve from the previously defined point to (x,y) using (x2,y2) as a control point and assuming that (x1,y1) is a mirror of (x2,y2) on the previous command. If there was no previous command (x2,y2) is assumed to be the same as (x,y) (See below for definition of control points)
Q or q	Q x1,y1 x,y (Ex: S 100,40 30,10)	Draws a quadratic Bézier curve from the previously defined point to (x,y) using (x1,y1) as a control point (See below for definition of control points)
T or t	T x,y (Ex: T 100,40)	Draws a quadratic Bézier curve from the previously defined point to (x,y) assuming the control point is the mirror of the control point in the previous command. If you didn’t have a control point in the previous command the control point is assumed to be the same as (x,y) (See below for definition of control points)
A or a	A rx,ry x-axis-rotation large-arc?,sweep? x,y (Ex: A 100,40 30 0,0 20,20)	Draws an arc from the previously defined point to (x,y) based on the radii (rx,ry) and the rotation of the curve (x-axis-rotation). Two boolean functions can be set to further define the curve (large-arc,sweep) which are either set to 1 or 0. (See below for more information on large-arc and sweep)

Feature	Chrome	Safari	Firefox	IE	Opera
@document	None	None	6.0	None	None
@supports	None	None	17.0	None	None