Animated Content Tabs

       Content tabs are a very common and familiar element in web design, and often their turn out to be pretty useful. So, in this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators.

The Markup

We will be using input elements to connect to the division with the class content. The content division includes all of the “tab pages”. For each input element we’ll have a label element. All labels will be styled like tabs.

<section class="tabs">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
 <label for="tab-1" class="tab-label-1">About us</label>
 
 <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
 <label for="tab-2" class="tab-label-2">How we work</label>
 
 <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
 <label for="tab-3" class="tab-label-3">References</label>
 
 <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
 <label for="tab-4" class="tab-label-4">Contact us</label>
            
 <div class="clear-shadow"></div>
    
 <div class="content">
  <div class="content-1">
            <p>Some content</p>
  </div>
  <div class="content-2">
            <p>Some content</p>
  </div>
  <div class="content-3">
            <p>Some content</p>
  </div>
  <div class="content-4">
            <p>Some content</p>
  </div>
 </div>
</section>

Every input element has a value, and we can always make an input selected by default by adding the checked attribute.

The CSS

The first thing we need to do is to define some dimension and hide the inputs by setting their opacity to 0:

tabs {
    position: relative;
 margin: 40px auto;
 width: 750px;
}

.tabs input {
 position: absolute;
 z-index: 1000;
 width: 120px;
 height: 40px;
 left: 0px;
 top: 0px;
 opacity: 0;
 cursor: pointer;
}
.tabs input#tab-2{
 left: 120px;
}
.tabs input#tab-3{
 left: 240px;
}
.tabs input#tab-4{
 left: 360px;
}

The inputs will be covering the labels. It will seem, as if we click on the label, but actually we are clicking on the input. This is a trick that will also work in mobile browsers (in some mobile browsers, simply clicking the label will not focus the associated input).
Next, we will make the labels look like tabs by defining some neat style for them. Note that each of the labels has a different z-index. A box-shadow will add depth and realism to the tabs.

.tabs label {
 background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
 font-size: 15px;
 line-height: 40px;
 height: 40px;
 position: relative;
 padding: 0 20px;
    float: left;
 display: block;
 width: 80px;
 color: #385c5b;
 letter-spacing: 1px;
 text-transform: uppercase;
 font-weight: bold;
 text-align: center;
 text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs input:hover + label {
 background: #5ba4a4;
}

.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

Since we don’t want the bottom part of the box-shadow to show, we will cover it by using a :after pseudo-element with no content:

.tabs label:after {
    content: '';
 background: #fff;
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 100%;
 height: 2px;
 display: block;
}

When we click on a tab (label), it will be different in style and color from the others. The important thing is to make sure that the “checked” label will be on top of all of the other layers in the tabs. So, we will give it the highest z-index:

.tabs input:checked + label {
    background: #fff;
 z-index: 6;
}

As mentioned before, the content division will contain all of the tab pages, and we will set its z-index to 5, just to be under the selected label. In this way, the box-shadow of content area will cover all of the other labels.
Inside the content area, there are four divisions and each of them has their own content. By default (when their respective label is not selected/clicked) we want them to be hidden. So, we set the opacity to zero and the z-index to 1. We cannot use the display: none property because it’s not supported in transitions.

.content {
    background: #fff;
 position: relative;
    width: 100%;
 height: 370px;
 z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
 top: 0;
 left: 0;
 padding: 10px 40px;
 z-index: 1;
    opacity: 0;
    transition: all linear 0.1s;
}

.content div h2,
.content div h3{
 color: #398080;
}
.content div p {
 font-size: 14px;
 line-height: 22px;
 font-style: italic;
 text-align: left;
 margin: 0;
 color: #777;
 padding-left: 15px;
 font-family: Cambria, Georgia, serif;
 border-left: 8px solid rgba(63,148,148, 0.1);
}

When we want a content to appear (label clicked) we set the opacity to 1 and raise the z-index because we want this content division to be on top of all the others:

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    transition: all ease-out 0.2s 0.1s;
}

In this tutorial we just went through the basic example that will fade in/out the contents. You can find more styles and effects in the demos.

 
 1.Demo  
 2.Download Source

Timed Notifications with CSS Animations

         In today’s tip we’ll show you how to create a simple timed notification with CSS animations. The idea is to show a notification or alert for a specific duration and then make it disappear. We’ll use a little progress indicator to show how much time is left before the box disappears.
You definitely saw it already somewhere, I discovered it on buysellads.com where timed notifications are shown i.e. after saving some settings.
For the markup we’ll simply have a division with a message inside and with an additional division for the little progress bar:

<div class="tn-box tn-box-color-1">
 <p>Your settings have been saved successfully!</p>
 <div class="tn-progress"></div>
</div>

The notification box is going to have the classes tn-box and tn-box-color-1 which will be used for defining different colors.
Then we define the style of the box:

.tn-box {
 width: 360px;
 position: relative;
 margin: 0 auto 20px auto;
 padding: 25px 15px;
 text-align: left;
 border-radius: 5px;
    box-shadow: 
  0 1px 1px rgba(0,0,0,0.1), 
  inset 0 1px 0 rgba(255,255,255,0.6);  
 opacity: 0;
 cursor: default;
 display: none;
}

.tn-box-color-1{
 background: #ffe691;
 border: 1px solid #f6db7b;
}

We’ll set the box to display: none and give it 0 opacity.
The progress bar will have the following style:

.tn-progress {
 width: 0;
 height: 4px;
 background: rgba(255,255,255,0.3);
 position: absolute;
 bottom: 5px;
 left: 2%;
 border-radius: 3px;
 box-shadow: 
  inset 0 1px 1px rgba(0,0,0,0.05), 
  0 -1px 0 rgba(255,255,255,0.6);
}

Initially, the bar will have 0 width.
In this example, I’m using a button with a checkbox that will start the animations once it’s checked:

input.fire-check:checked ~ section .tn-box {
 display: block;
 animation: fadeOut 5s linear forwards;
}

input.fire-check:checked ~ section .tn-box .tn-progress {
 animation: runProgress 4s linear forwards 0.5s;
}

The button precedes the section with the notification boxes and so I can use the general sibling combinator.
If you maybe want to add a class with JavaScript instead, you could define something like this:

.tn-box.tn-box-active {
 display: block;
 animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
 animation: runProgress 4s linear forwards 0.5s;
}

where tn-box-active is the class you add to the tn-box div.
The animation for the box itself is the following:

@keyframes fadeOut {
 0%  { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; transform: translateY(0px);}
 99% { opacity: 0; transform: translateY(-30px);}
 100% { opacity: 0; }
}

I called it “fadeOut” but it actually fades the box in first and then it makes it fade out and move up a bit.
The animation for the progress bar looks like this:

@keyframes runProgress {
 0% { width: 0%; background: rgba(255,255,255,0.3); }
 100% { width: 96%; background: rgba(255,255,255,1); }
}

We animate the width to 96% (left was 2% so we want it to stop 2% from the right as well) and the opacity of the RGBA value.
The duration of the progress bar animation will be a bit less than the duration of the box animation, since we will start it later (the box needs to fade in first).
Note: What I thought would be nice, is a pausing of the animation on hover. This makes sense if the user wants to take more time to read what the notification says. But unfortunately, there seems to be some issues with WebKit broswers. In Chrome (19.0.1084.56 on Win) the animation breaks while in Safari (5.1.5 Win) I get a crash report on WebKit2WebProcess.exe… It works perfectly fine in Firefox > 12.0.
Anyway, here is how you could do it:

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
 animation-play-state: paused;
}

Needless to say, this will only work in browsers that support CSS animations! You’ll need some kind of JS fallback for other browsers.

 1.Demo  
 2.Download Source

Photo Booth Strips with Lightbox

In today’s tutorial we’ll show you how to create some cute looking photo strips and integrate Lightbox 2, one of the most popular and widely used lightbox scripts. The idea is to show some photo strips and make them navigable by scrolling with the mousewheel. When clicking on a picture we will show the larger version using jQuery Lightbox 2. We will also optimize it for touch devices.

Multiple Area Charts with D3.js

        The D3.js website describes itself as “a JavaScript library for manipulating documents based on data.” It is but one of many in the ever growing list of visual data JavaScript libraries. D3 was created by Mike Bostock who was the lead developer on Protovis, which D3.js builds on.
The reason I focus on D3 is because it is one of the most robust frameworks available, while also remaining flexible and web standard agnostic. It’s ability to work in SVG, Canvas, or HTML (by taking data and generating HTML tables), allows you to decide what method the data should be presented in. SVG, Canvas and HTML all have their pros and cons and a framework shouldn’t force your hand into one or the other, which is what many frameworks do. This article won’t cover when to choose SVG or Canvas, as that would be an article unto its own. Instead, I’ll point you to a great article by Opera that discusses this question: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/.

Real-Time Geolocation Service with Node.js

       A simple real-time application that will determine and show the locations of currently connected users directly on a map. For this purpose we will use Node.js and the HTML5 Geolocation API. As you may know node.js is an asynchronous web server which is built on the Google V8 JavaScript engine and is a perfect solution as a back-end for real-time apps. Our app will let users see each other on the map with the help of the socket.io library that uses Web Sockets (and its alternatives like AJAX long polling for older browsers – more) for a real-time data channel. Our example will work in all modern browsers that support the HTML5 Geolocation API.

Installing node

First, you’ll need to install node.js. You can get pre-compiled Node.js binaries for several platforms from the download section of the official website: http://nodejs.org/download.
After the installation is complete you will get access to the node package manager (npm), with the help of which we will install all needed modules for this tutorial. We will use socket.io and node-static, which will serve all the client side files with ease. Go to the directory of your app and run this command in your terminal or command line:

npm install socket.io node-static

Tip: I advice you to install a utility like nodemon that will keep an eye on your files and you won’t need to restart your server after every change:

pm install nodemon -g

“-g” means that it will be installed globally and accessible from every node repo.

The HTML

Let’s first create an “index.html” in our public directory.

<!doctype html>
<html>

 <head>
  <meta charset="utf-8">
  <meta name="author" content="Dmitri Voronianski">
  <title>Real-Time Geolocation with Web Sockets</title>
  <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="./css/styles.css">
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />

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

 <body>
  <div class="wrapper">
    <header>
     <h1>Real-Time Geolocation Service with Node.js</h1>
     <div class="description">Using HTML5 Geolocation API and Web Sockets to show connected locations.</div>
    </header>

    <div class="app">
     <div class="loading"></div>
     <div id="infobox" class="infobox"></div>
     <div id="map">To get this app to work you need to share your geolocation.</div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="./js/lib/leaflet.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="./js/application.js"></script>
 </body>

</html>

As you can see it’s pretty simple. For rendering our map on the page we will use an incredible open-source JavaScript library for interactive maps – Leaflet.js. It’s free and highly customizable. The API documentation is available on the website. Our styles.css file is inside the “./public/css/” folder. It will include some simple styles for the app. The leaflet.css in the same folder contains the styles for the map.

Server side

Now we are ready to start with the back-end of our app. Let’s take a look at “server.js”:

// including libraries
var http = require('http');
var static = require('node-static');
var app = http.createServer(handler);
var io = require('socket.io').listen(app);

// define port
var port = 8080;

// make html, js & css files accessible
var files = new static.Server('./public');

// serve files on request
function handler(request, response) {
 request.addListener('end', function() {
  files.serve(request, response);
 });
}

// listen for incoming connections from client
io.sockets.on('connection', function (socket) {

  // start listening for coords
  socket.on('send:coords', function (data) {

   // broadcast your coordinates to everyone except you
   socket.broadcast.emit('load:coords', data);
  });
});

// starts app on specified port
app.listen(port);
console.log('Your server goes on localhost:' + port);

The code is not complicated at all; everything that it does is serving files and listening to the data from the client. Now we can start our app from the terminal or command line and take a look:

node server.js

Or, if you have followed my advice and used nodemon, write this:

nodemon server.js

Now go to localhost:8080 in your browser (you can change the port to whatever you like). Everything will be static because our main JavaScript function is not ready, yet.

The Client Side

It’s time to open the “./public/js/application.js” file and to write a couple of functions (we’ll be using jQuery):

$(function() {
 // generate unique user id
 var userId = Math.random().toString(16).substring(2,15);
 var socket = io.connect("/");
 var map;

 var info = $("#infobox");
 var doc = $(document);

 // custom marker's icon styles
 var tinyIcon = L.Icon.extend({
  options: {
   shadowUrl: "../assets/marker-shadow.png",
   iconSize: [25, 39],
   iconAnchor:   [12, 36],
   shadowSize: [41, 41],
   shadowAnchor: [12, 38],
   popupAnchor: [0, -30]
  }
 });
 var redIcon = new tinyIcon({ iconUrl: "../assets/marker-red.png" });
 var yellowIcon = new tinyIcon({ iconUrl: "../assets/marker-yellow.png" });

 var sentData = {}

 var connects = {};
 var markers = {};
 var active = false;

 socket.on("load:coords", function(data) {
  // remember users id to show marker only once
  if (!(data.id in connects)) {
   setMarker(data);
  }

  connects[data.id] = data;
  connects[data.id].updated = $.now(); // shorthand for (new Date).getTime()
 });

 // check whether browser supports geolocation api
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
 } else {
  $(".map").text("Your browser is out of fashion, there\'s no geolocation!");
 }

 function positionSuccess(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  var acr = position.coords.accuracy;

  // mark user's position
  var userMarker = L.marker([lat, lng], {
   icon: redIcon
  });

  // load leaflet map
  map = L.map("map");

  // leaflet API key tiler
  L.tileLayer("http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png", { maxZoom: 18, detectRetina: true }).addTo(map);
  
  // set map bounds
  map.fitWorld();
  userMarker.addTo(map);
  userMarker.bindPopup("You are there! Your ID is " + userId + "

").openPopup();

  // send coords on when user is active
  doc.on("mousemove", function() {
   active = true; 

   sentData = {
    id: userId,
    active: active,
    coords: [{
     lat: lat,
     lng: lng,
     acr: acr
    }]
   }
   socket.emit("send:coords", sentData);
  });
 }

 doc.bind("mouseup mouseleave", function() {
  active = false;
 });

 // showing markers for connections
 function setMarker(data) {
  for (i = 0; i < data.coords.length; i++) {
   var marker = L.marker([data.coords[i].lat, data.coords[i].lng], { icon: yellowIcon }).addTo(map);
   marker.bindPopup("One more external user is here!

");
   markers[data.id] = marker;
  }
 }

 // handle geolocation api errors
 function positionError(error) {
  var errors = {
   1: "Authorization fails", // permission denied
   2: "Can\'t detect your location", //position unavailable
   3: "Connection timeout" // timeout
  };
  showError("Error:" + errors[error.code]);
 }

 function showError(msg) {
  info.addClass("error").text(msg);
 }

 // delete inactive users every 15 sec
 setInterval(function() {
  for (ident in connects){
   if ($.now() - connects[ident].updated > 15000) {
    delete connects[ident];
    map.removeLayer(markers[ident]);
   }
        }
    }, 15000);
});

Magic happens when we use socket.emit to send a message to our node web server on every mouse move. It means that our user is active on the page. We also receive the data from the server with socket.on and after getting initialize markers on the map. The main things that we need for the markers are the latitude and longitude which we receive from the browser. If the user is inactive for more then 15 seconds we remove their marker from our map. If the user’s browser doesn’t support the Geolocation API we’ll show a message that the browser is out-of-date. You can read more about the HTML5 Geolocation API here: Geolocation – Dive Into HTML5.

1.  Demo
2. Download Source