A thirty-minutes CSS reboot
Yeah, thirty minutes. The only images are the social network buttons.
Two things are worth to mention are
- the “Search” button is CSS3 based
- All the fonts are web fonts embedded with the brand new Google Web Font API
The code is very minimal. I don’t expect it to be rendered the same on every browser but I am starting not to care about Internet Explorer lacks.
p { margin: 8px; }
a { color: #4096EE; }
a:hover { color: #356AA0; }
#container { width: 100%; margin: 0 auto; background: #fff; }
#header { padding-top: 50px; border-bottom: solid thick #36393D; background: #C3D9FF; }
#header ul { list-style-type: none; float: left; font-family: ‘Molengo’, arial, serif; text-transform: uppercase; }
#header ul li { float: left; }
#header ul a { color: #36393D; text-decoration: none; display: block; padding: 10px 16px 4px; }
#header ul a:hover { color: #666; }
#content { padding: 0 32px; float: left; width: 60%; }
#content h2 { margin: 0px 0 10px; font-family: ‘OFL Sorts Mill Goudy TT’, arial, serif; font-size: 2.4em; }
#content h2 a { color: #36393D; text-decoration: none; }
#search { padding: 16px 32px; }
#search input[type=text]{ width: 500px; padding: 8px; font-size: 16px;}
input[type=submit] { font-size: 18px; padding: 8px 16px 9px; }
.clear { clear: both; height: 0px; }
#adsense { display: none; }
#footer { background: #3F4C6B; color: #fff; padding: 8px; border-top: solid thick #333; margin-top: 10px; }
#content ul { margin-left: 32px; list-style-type: square; }
.post { padding: 10px; border-bottom: solid 1px #eee; margin-bottom: 10px; }
#sidebar { float: left; width: 30%; padding: 0 16px; }
#sidebar h2 { color: #36393D; font-size: 1.2em; font-family: ‘Yanone Kaffeesatz’, arial, serif; margin-top: 10px; }
#sidebar ul { list-style-type: none; margin: 4px; }
#sidebar #searchform { display: none; }
.postmeta, #postmeta, .small { font-size: 0.8em; margin: 4px; }
#twitter_update_list li { border-bottom: solid thin #eee; margin-bottom: 4px; padding: 4px; }
div.box { border: solid black thin; background: #eee; padding: 12px 8px; margin: 8px; font-family: monospace; }
div.code { font-family: monospace; padding: 12px 8px; margin: 8px; border-left: thick solid #ff8; max-width: 500px; }
div.listing { background: #FFFFDD; }
div.shell { color: #eee; background: #000; border: lime thin solid; }
input[type=submit] {
border: none;
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
background-color: #4096EE;
}
Categories Programmazione | Tags: css
You can follow any follow up comments to this entry through the RSS 2.0 feed.
Leave a Reply
By submitting a comment here you grant edno.it a perpetual license to reproduce your words and name/web site in attribution. Inappropriate or irrelevant comments will be removed at an admin's discretion.

1 Comment to A thirty-minutes CSS reboot
by Rapture
On July 2, 2010 at 5:52 pm
Beh, è carino… ma erano più belli alcuni temi che hai usato in passato…