Afternoon.
Today i've been sitting at work bored as hell in the sweaty covent garden heat and thought i'd start playing around with some CSS to keep myself occupied. A couple hours later and I've created three funky CSS stylesheets to share with my fellow Internet designers and developers. The three stylesheets i've created are the following:
1. Pure CSS Round-cornered box.
I thought i'd have a crack at making a CSS-only round cornered box. The concept is quite simple actually... I use four bullet-point characters ampersand+hash+183 (·)
(& # 183)
to create the corners, and overlap a couple boxes to fill in the middle. Simple! it's not very scalable and uses absolute-positioning, but maybe somone could make a better version... anyway, here we go...
The HTML File "test.html":
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="rounded">
<div id="cornertl">·</div>
<div id="cornertr">·</div>
<div id="cornerbl">·</div>
<div id="cornerbr">·</div>
<div id="middle"><div id="text">test</div></div>
</div>
</body>
</html>
Next up is the actual CSS File "style.css":
#cornertl{
font-family: times;
font-size: 110px;
color: #DDDDDD;
position: absolute;
left: 0em;
top: -0.5em;
}
#cornertr{
font-family: times;
font-size: 110px;
color: #DDDDDD;
position: absolute;
left: 0.89em;
top: -0.5em;
}
#cornerbl{
font-family: times;
font-size: 110px;
color: #DDDDDD;
position: absolute;
left: 0em;
top: 0.5em;
}
#cornerbr{
font-family: times;
font-size: 110px;
color: #DDDDDD;
position: absolute;
left: 0.89em;
top: 0.5em;
}
#rounded{
font-family: times;
font-size: 110px;
background-color: #DDDDDD;
width: 1em;
height: 1em;
}
#middle{
font-family: times;
font-size: 110px;
background-color: #DDDDDD;
width: 0.89em ;
height: 1.11em;
position: absolute;
left: 0.13em;
top: 0.03em;
}
#text{
font-family: verdana;
font-size: 10px;
}
Thats it! you should now have a grey box in the top-left corner of the screen when you open the HTML file.
2. Pure CSS Drop-Shadow.
I wanted to create a Digg-style digg box that has the rating of a story in it... I also wanted to create a simple drop-shadow effect that was scalable. (So when the text size is increased/decreased it still looks correct. Anyway, I managed to do it and you can see the code here (I know it uses a table, but I couldn't get it to scale properly any other way!):
The HTML File:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="box">
<tr><td>
<div class="shadow4">
<div class="shadow3">
<div class="shadow2">
<div class="shadow1">
<div class="rating">9999</div>
<span class="websiterating">vote!</span>
</div>
</div>
</div>
</div>
</td></tr>
</table>
</body>
</html>
The CSS File:
.box{
width: 4em;
height: 20px;
}
.shadow1{
border: 1px solid #555555;
background-color: #DDFFBB;
width: 3em;
height: 3em;
}
.shadow2{
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background-color: #666666;
width: 3.05em;
height: 3.05em;
}
.shadow3{
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #999999;
width: 3.1em;
height: 3.1em;
}
.shadow4{
border-right: 1px solid #BBBBBB;
border-bottom: 1px solid #BBBBBB;
background-color: #BBBBBB;
width: 3.15em;
height: 3.16em;
}
.rating{
background-color: #99CC66;
border: 0px;
padding: 0.28em;
padding-top: 0.5em;
padding-bottom: 0.5em;
font-family: sans-serif;
font-size: 1em;
text-align: center;
color: #444444;
float: center;
}
.websiterating{
font-family: sans-serif;
font-size: 10px;
text-align: center;
color: #666666;
float: right;
padding-right: 2px;
}
You shold have a green 'Vote' Box with a nice CSS drop-shadow that grows and reduces with the Text size! cool...
And Finally:
3. A simple Post-it note... (This was my first one, so it sucks a little)
TTHE HTML FILE:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="Postit"><span>This is a postit note 1!</span></div>
</body>
</html>
THE CSS FILE 'style.css':
.Postit{
width: 30%;
background-color: #FFFFB3;
border-right: 3px solid #BBBBBB;
border-bottom: 3px solid #BBBBBB;
border-left: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
font-family: sans-serif;
font-size: 10px;
color: #666666;
padding: 5px;
margin: 5px;
float: left;
}
Simple!
Anyway, I hope that someone might find these useful... I'm going to use them on my website project, but its not copy-righted code so take it, rewrite it, do what you wish with it, I don't really mind!
Have fun!
