Demo

Now we need to overcome the problem of multiple page refreshes. In this blog we are going to use javascript, and more specifically cookies. We can code this out in pure Javascript, but if your using jQuery already why not take a short cut (write less do more). So im going to attach a jQuery plugin that optimizes the creation and checking of cookies. The name is cookies.

Download jQuery.cookies.js

Take a bit to read over the API its a pretty simple plugin to use. After attaching this plugin below jQuery we are ready to code out some Javascript. First we need to create the cookie.

//create cookie
$.cookie('introCookie', 'viewed', {expires: 0});

First we need to name the cookie(for this example we used introCookie). Then the next parameter is what we want the cookie to say, we are going to use viewed because it seems appropriate. For this use Im going to make the cookie delete when the browser window is closed, which is represented by 0. If I were to use a larger number the number would represent the number of days.

Now we need a way to checks if the cookie is properly working. So to check if the cookie is stored I am going to add a conditional statement that checks if we made the cookie, and then I am going to add an alert inside to run if true.

//create cookie
$.cookie('introCookie', 'viewed', {expires: 0});

if($.cookie('introCookie') === 'viewed'){
    alert('cookie is working now clear you cookies');
}

If you are checking the sample multiple times I suggest finding out how to delete cookies rather then actually closing your browser window.

Now lets add everything together. Im going to modularize everything into functions so that we can keep the code neater and easily editable. Also we need to flip our conditional statement because we are only interested if the statement is false.

$(function(){

if($.cookie('introCookie') !== 'viewed'){
    intro();
}    

function intro(){
    var introCon = $('div#introContainer');

    introCon.show();

    introCon.click(function(){
        $(this).fadeOut(500);
    });

    window.setTimeout(function() {
        introCon.fadeOut(3000);
    }, 2000);

    createCookie();

}

function createCookie(){
    $.cookie('introCookie', 'viewed', {expires: 0});
}

});

Now you should have a working intro. Note that in this sample I added the createCookie function in the bottom of the intro function because I only want to create the cookie if the intro shows. Also I added in a variable, sorry if it has confused anyone, its just habit.

If you are having any problems go ahead and talk to me in the comments about them. Let me know what you think about the tutorial. Also I am developing a plugin that will take care of your intro needs while also doing many other things if you have any suggestions for that plugin leave them in the comments below.

DEMO

Lets Start With The CSS

        .topContainer{
            width: 300px;
            height: 30px;
            margin: 10px 10px 0 10px;
            padding: 10px;
            background-color: #006666;
        }

        .bottomContainer{
           position:relative;
           width: 100px;
           height: 100px;
           padding: 10px;
           margin: 0px 0px 0px 100px;
           background-color: #006666;
        }

        .topLeftCorner{
            position: absolute;
            top: -10px;
            left: -20px;
            width: 10px;
            height: 10px;
            border-top: 10px solid #006666;
            border-right: 10px solid #006666;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
            -webkit-border-top-right-radius: 20px;
            -moz-border-radius-topright: 20px;
        }

        .topRightCorner{
            position: absolute;
            top: -10px;
            right: -20px;
            width: 10px;
            height: 10px;
            border-top: 10px solid #006666;
            border-left: 10px solid #006666;
            border-bottom: 10px solid transparent;
            border-right: 10px solid transparent;
            -webkit-border-top-left-radius: 20px;
            -moz-border-radius-topleft: 20px;
        }

        .rAll{
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
        }

To make or corner pieces I making a div that is transparent but has a solid border which can be any height. Im making mine 10px because that is the size of my padding for my divs so it will fit in nicely and will also cover up the old round corner. Im positioning the div by using the position: relative, position: absolute method. I place them inside my bottomContainer and they will move to the corners of that div. I am using negative numbers in the top, left , and right parameters so that the divs get pushed outside the box that contains them. The top is set to -10px because I have a ten pixel border that I want to flow into the top div. Then I use -20px on the left and right because I need to push out the transparent border, and div out side of the div so that the only part in the container is now part of the opaque border. The setback to this is that there is an area of 20px where you can not put a link (which you should not be putting one there anyways). The border radius is set to 20px because the outside radius of the colored border is 20px so the inside is 10px just like my divs border radius. I have the width set to ten because the div has to have width for mozilla to register the div has a radius (webkit will work with 0px).

The HTML layout

<div class="topContainer rAll>
    Sample Text that should be more creative
</div>
 <div class="bottomContainer rAll">
    <div class="topLeftCorner"></div>
    <div class="topRightCorner"></div>
</div>

The only thing here I want to point out is that there is still a dot that will show up between the divs. All you ned to do to fix it is to remove the top radius for the div. Have fun with this method and post cool ways you have used this method in a project in the comments. Also in the picture to the right is a sample of how I used these corners in a WordPress theme that Im designing. You can see that this is not the same positioning as the provided in the example but the codes are very similar.

Benefits For Using This Method

Why not just use the img method rather then this method? Well there is many reasons. Lets say you are using css3 rounded corners then you use the img rounded corners for the inner corners. When an IE user visits the page the a have a square box with rounded inner corners. Of course you can hack them out but thats already two steps too many. In this method the corners will lay flat and the sign of these divs will relatively disappear. Also it is a light weight solution. Lets say your using them like I am for comments in a post. If there are a hundred comments that equals 200 images 10px 10px to load. They are small but at that scale pack a punch compared to this method. Still, the most important point is that you can change the color numerous time without have to re-upload images. This can speed up the process of a color change, and will also have no color difference in any computer.

Tested on: Safari 4.0.3, FireFox 3.6.3, Chrome 5.0 beta, Chrome 4.1

First were going to want to set up a HTML file that has a couple of divs in it. The mark up im going to use for this sample is.

<div id="introContainer">
    <div id="introContent">
         <p>//this is the content </p>
    </div>
</div>

This need to go below all the content before the ending html tag.

Now to style the divs, with some css so that the divs will overlay the page.

#introContainer{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
    display: none;
}

#introContent{
    position: absolute;
    width: 100%;
    top: 30%;
    text-align: center;
    height: auto;
}

This is all fully customizable. Make it yours.
Notice that I put a display:none on the introContainer. I hide the container at first so that browsers with JavaScript disabled do not find themselves stuck on a intro page. In the JavaScript the first thing Ill do is display it. The scripting is pretty simple I added a timer to the intro so that it fades out after a certain amount of time. Plus I added a click function that will fade the intro for the people who want to skip it.

jQuery(document).ready(function($){

 $('div#introContainer').show();

 $("div#introContainer").click(function(){
     $('div#introContainer').fadeOut('slow');
 });

 window.setTimeout(function() {
     $('div#introContainer').fadeOut('slow');
   }, 5000);

});

Note that this will not hide flash movies. You need to hide the player for the time being. I suggest using JavaScript. Make the player appear after the intro has timed out and add a short timer in the .click function.

I try to use ajax loaded pages all the time so this works flawlessly with them, but if your page has multiple page loads it might be a problem. On my next blog I can explain how this can work on multiple loading pages, and themes like in WordPress till then experiment with this and show examples of what kind of things you can do with your intro overlay.

First off, many of my readers may not know what spatial perspective is. The simple ways to explain it is to think of spatial perspective as transparent layers of atmosphere. It is actually visible because of layers of atmospheric molecules in the air, and that is why a lot of people know it by the term of atmospheric perspective. This can be an array of colors due to the different chemical compounds in the air. In a clear sky it would be blue but a smoggy sky it would be more of a gray. To get a better visual of what spatial perspective think of some mountains, or a large city in the distance. Our eyes have evolved to use this perspective to registrar a field of depth. So when using it in a design aspect you can trick the eye to see depth. Which can be useful in many different ways.

Usage

Using spatial perspective in a web page can give a user an extra dimension of depth. There are some elements that would be better when pushed to the furthest point in vision, while some need to be in the foreground to get the users attention. There are different ways to emulate this. One is just to use contrast. Things that are in the background should not contain a deep black or a pure white if you want to push it to the back of the users attention. For a the font of the main content you would want to use a midnight black or a pure white. In the example below I illustrate how using this method can add depth to a webpage.

In the example I used only gray scale colors ,but another way to use spatial perspective it to pick an atmospheric color other than grey. This is usually characterized by the background, but also can be used with any other various element. When making a link, text or graphic that you want to be pushed back into the background simply layer on the atmospheric color. If its a font color pick a color that is in between the main context color. If its a graphic use you graphic editing program and put a transparent layer of that color over the graphic. I recommend around 20% opacity so that most of the detail is still preserved but the contrasted line are now more subtle. There are many places In the webpage this can be executed to add depth to your webpage.

There is always content you want more noticeable then other content, and spatial perspective is a perfect way to execute the effects wanted. This can be used links, headings, content, and logos. Also you can make a the content of you blog stand out more then your navigation bar, footer, header, and sidebar using spatial perspective. If you were to look at an well designed webpage you would see that different sections of the page use a spatial perspective to emphasize an element of a page.

Using Multiple Atmospheres

Since this is the web we can creatively use spatial perspective in ways that you would not see in everyday reality. You can use multiple atmospheres in a small area. Lets say we have a red div were the rest of the atmospheric color is a medium gray. Its easy to think of that red div as its own atmosphere and that all the content inside that div uses that atmospheric color rather than the medium gray.

This can be used in any diverse ways, and will work with any colors. See how far you can stretch this idea. Maybe add in other perspectives to this one and mash them together for a larger field of depth.

Also can you let me know what you think of this tut. This is my first tut and I am eager to better myself through critizism. Thanks

Glad to see you made it.

We are going to put up tons of information up here. First off we are going to put up alot of tuts. We have alot of design work under our belts as well as years of css. So subscribe to our feed and you will see tons of useful information flowing out of here.

Also we will be have our usual updates that we will post. It will usually be client work that we have just finished. In putting these up I would love to hear all of your feed back. We also will be taking request if you have any questions on how we had done something in the coding or design aspects. Just ask for the tut and we will hopefully have it up a week or so after that.

We love criticism so let the creative juices flow.

_Jacob Lowe