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
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
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

thomas
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.

gifninja

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

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é
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

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.

Clip 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!

Share