3 Cool Techniques For Your Next Web Design Project

A question that I am often asked from people who just started to learn how to make a website is “How should I study?”. I have 2 things that I keep doing for it. One of them is analyzing a website that you think it’s nice. Another thing is trying to make a sample page using a technique which that website is used. Today I am going to share 3 cool websites and what techniques are used.
Get Ready!
Developer Tools for Chrome and Safari
This tool allows web developers and programmers deep access into the internals of the browser and their web application. The Developer Tools are heavily based on the WebKit Web Inspector, a part of the open source WebKit project. This overview of the Developer Tools points out its most popular and useful features.
Firebug
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Online Testing Tool
jsFiddle is an online tool to test your snippets easily. To preview your site, you simply click the “run” button at the top of the site. You don’t have to create your account.
There are also similar website to test your code, jsdo.it or HTML5 Playground. Try them and find your favourite tool!
1. Display GIF Animation Image When You Hover
The Thomas Oliver Band‘s website is used GIF animation images when you hover normal images. It’s subtle but also very beautiful at the same time.
Step 1: Make Animated Gif
You can create an animated Gif using multiple images, but we’ll make it from movie today. Gifninja is the best tool for it.

Click on “SELECT FILES” and select your movie. The best length will be 3 to 4 seconds. Adjust animation speed, type a title and click on a button.

Download a generated image and good to go next step!
Step 2: Add an Image Layer
Use an animated gif as a background image. And put an image inside of a
tag.
HTML
<a href="http://webcreatorbox.com"> <img src="http://webcreatorbox.com/sample/images/drink1.jpg" alt="Iced Drink"> </a>
CSS
a{ background: url(http://webcreatorbox.com/sample/images/drink2.gif) no-repeat; display:block; }
Step 3: Hide a Still Image by jQuery
Fadeout a still image when you hover it by jQuery and display animated gif.
HTML
<!-- Inside Header --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
jQuery
$(function(){ $("a img").fadeTo(0,1); $("a img").hover( function(){ $(this).stop().fadeTo("fast",0); }, function(){ $(this).stop().fadeTo("fast",1); } ); });
Done!
2. Put Movie to Background
Beyoncé’s official website is used movie as a background. Remarkable and dynamic! This website is not used a new or difficult techniques so you can try it easily!
Step 1: Insert Movie to HTML
First, use video
tag of HTML5 with autoplay
and loop
attributes.
HTML
<p>Brilliant Blue</p> <video src="http://webcreatorbox.com/sample/images/jewellery.mov" autoplay loop></video>
Step 2: Lap Over Movie and Contents
CSS is also very easy. The point is using position
and z-index
to add contents layer on a movie.
CSS
body{ background: #000; } video{ position: fixed; right:0; top:0; z-index: 1; } p{ font-family: serif; color: #fff; font-size:180%; margin: 50px; position: relative; z-index: 2; }
Step 3: Prepare a Still Image
Beyoncé’s official website is used a still image for browsers that don’t support video. It will be added a back layer so value of z-index
should be 0.
HTML
<img src="http://webcreatorbox.com/sample/images/jewellery.jpg" alt="Stone">
CSS
img{ position: fixed; right:0; top:0; z-index: 0; }
Done!
3. Clip Image
Let’s have a look Andy Taylor’s website. It’s very minimal, but when you scroll down, you’ll realize texts clip background image.
It’ like this.
Step 1: Use Background Image
Start from basic HTML and CSS. A background image is used on P tag.
HTML
<p>Hello! 文字で背景画像が繰り抜かれてますね! English letters look nicer maybe? Photo by <a href="http://twitter.com/ikatchan">iKatchan</a></p>
CSS
p{ background: url(http://farm9.staticflickr.com/8152/7676294968_e055f612e0_z.jpg) no-repeat; width:556px; height:351px; color: #fff; padding: 30px; font-size:300%; font-weight:bold; }
Step 2: background-clip: text;
With the CSS property background-clip: text;
which is currently only supported in Webkit browsers, we can add a background image to a text element.
CSS
p{ background: url(http://farm9.staticflickr.com/8152/7676294968_e055f612e0_z.jpg) no-repeat; width:556px; height:351px; color: #fff; padding: 30px; font-size:300%; font-weight:bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Done!
Let me know your favourite websites or cool techniques!