Showing posts with label ship. Show all posts
Showing posts with label ship. Show all posts

Friday 25 March 2011

Icon holder

I'm starting to get into iconography and it's use in my websites. In the example below I have created an icon holder. This is sort of case which all navigation icons would sit.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Icons</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
width:100%;
margin:4em;
}
.iconOuterSquare, .iconInnerCircle
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.iconOuterSquare
{
background:#87B7D6;
width:10em;
height:9em;
border-radius:0.62em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
padding-top:1em;
}
.iconInnerCircle
{
margin:auto;
background:#FFFFFF;
width:8em;
height:6.5em;
border-radius:4em;
-moz-border-radius:4em;
-webkit-border-radius:4em;
text-align:center;
padding-top:1.5em;
}
</style>
</head>
<body>
<figure class="iconOuterSquare">
<figure class="iconInnerCircle">
<img src="http://farm6.static.flickr.com/5261/5558426054_a79fb5bffe_t.jpg" />
</figure>
</figure>
</body>
</html>