Website Design trend: Stereo box

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Website design is gradually becoming popular with creative trends. In fact it is very easy to implement, only need to add an additional element and unique design.

Let's see how we can achieve the effect of the stereo box, and then we'll show you some good examples.

Get ready

First prepare your page and picture, we use this picture:

We simply write HTML like this:

<div id= "Container" >
<img id= "logo" src= "logo.png" alt= "Lee Munroe"/>
</div>

CSS styles might look like this:

Body{background: #999;

#container {
width:960px;
Background: #fff;
margin:20px Auto;
padding:10px;
}

Here's an effect preview:

Set to relative positioning

When we locate the logo, we want it to be positioned relative to the container, so use relative positioning:

#container {
width:960px;
Background: #fff;
margin:20px Auto;
padding:10px;
position:relative;
}

Locate it outside the box.

Now all you have to do is position the logo and position it horizontally to make it stand out from the container.

#logo {
Position:absolute;
left:-15px;
}

Now we can see that the logo has been shown outside the box.

Change in Command

Icon Designer

Yoast

Twiistup

The design superhero

Hipsterist

Creamscoop

Article Source: http://www.cn8f.com/.