CSS Code for the CSS Tricks Home Page, circa August 2008
Discussed @ https://perishablepress.com/css-implementations-of-the-rich-and-famous/
/*
CSS-Tricks
by: Chris Coyier
*/
/*
RESET & BASIC SETUP
*/
* { margin: 0; padding: 0; }
body { font: 62.5% 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
background: url("images/body-bg.jpg") repeat; color: #323232; }
a img { border: none; }
a { outline: none; }
/*
UTILITY
*/
.floatleft { float: left; margin-right: 10px; }
.floatright { float: right; margin-left: 5px; }
.clear { clear: both; }
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.callout { font-size: 1.8em; font-family: Georiga, serif; font-weight: bold; }
.crossout { text-decoration: line-through;}
a.button { display: block; background: url(images/button.gif) no-repeat; height: 30px;
line-height: 29px; float: left; margin-right: 8px;
text-decoration: none; width: 191px; border: none; }
a.button:hover { border: none; }
span.download { background:url(images/download.gif) no-repeat 10px 8px;
text-indent: 30px; display: block; }
span.demo { background:url(images/demo.gif) no-repeat 10px 8px;
text-indent: 30px; display: block; }
/*
STRUCTURE
*/
#page { width: 1011px; margin: 0px auto 30px;
background: url(images/page-bg.jpg) repeat-y white; }
#top-bar { height: 110px; width: 1011px; margin: 0 auto; }
#top-bar a { border: none; }
#top-bar a.ad { background: url(/images/ad-psd2html.jpg) no-repeat bottom center;
height: 110px; width: 502px; text-indent: -9999px; float: right; }
#top-bar a.ad:hover { background-position: top center; }
/*
NAVIGATION
*/
#nav { height: 74px; }
#nav ul { list-style: none; }
#nav ul li { display: inline; }
#nav ul li a { height: 74px; float: left; text-indent: -9999px; border: none; }
#nav ul li a.articles { width: 200px; background: url(/images/nav-articles.jpg) center bottom no-repeat; }
#nav ul li a.videos { width: 168px; background: url(/images/nav-videos.jpg) center bottom no-repeat; }
#nav ul li a.downloads { width: 167px; background: url(/images/nav-downloads.jpg) center bottom no-repeat; }
#nav ul li a.forums { width: 166px; background: url(/images/nav-forums.jpg) center bottom no-repeat; }
#nav ul li a.contact { width: 310px; background: url(/images/nav-contact.jpg) center bottom no-repeat; }
#nav ul li a:hover { background-position: center center; }
body#downloads #nav ul li a.downloads,
body#phpbb #nav ul li a.forums,
body#contact #nav ul li a.contact,
body#video #nav ul li a.videos,
body#blog #nav ul li a.articles { background-position: center top; }
#menu-bar { height: 34px; padding-left: 45px; padding-right: 75px; }
#menu-bar ul {
list-style: none;
}
#menu-bar ul li {
float: left;
}
#menu-bar ul li a {
display: block;
text-indent: -9999px;
outline: none;
border: none;
}
#menu-bar ul li a.button-about {
width: 91px;
height: 28px;
background: url(images/button-about.gif) bottom center no-repeat;
}
#menu-bar ul li a.button-contact {
width: 117px;
height: 28px;
background: url(images/button-contact.gif) bottom center no-repeat;
}
#menu-bar ul li a:hover {
background-position: top center;
}
#menu-bar .floatright {
float: right;
margin-right: 10px;
padding-top: 2px;
}
#printed-article {
display: none;
}
#main-content {
padding: 0px 0px 0px 40px;
width: 570px;
float: left;
}
.inside-ad-block {
margin-top: 20px;
margin-bottom: 20px;
}
p {
font-size: 1.1em;
line-height: 1.4em;
margin-bottom: 1.2em;
}
a {
color: #0066CC;
text-decoration: none;
font-weight: bold;
border-bottom: 1px dotted #999;
outline: none;
}
a:hover {
border-bottom: 1px solid #999;
color: black;
}
a.more-link {
display: block;
padding: 3px;
border: 1px solid #3852c3;
width: 175px;
margin-top: 10px;
}
a.more-link:hover {
color: white;
background: #3852c3;
}
h1 {
font-size: 3.0em;
color: #c39b3b;
font-weight: normal;
font-family: Georgia, serif;
margin-bottom: 15px;
}
h2 {
font-size: 3.4em;
}
h2.post-title a {
color: #27221F;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
border: none;
display: block;
padding: 5px;
letter-spacing: -1px;
}
h2.post-title a:hover {
color: #b30000;
}
h3, h2#comments, h2#trackbacks, h2#postcomment {
font-size: 2.2em;
font-weight: normal;
}
h4 { font-size: 1.6em; }
.post {
margin-bottom: 35px;
}
.post p.article-author {
font-weight: bold;
font-size: 1.0em;
background: #ffe8ca;
padding: 3px;
text-indent: 5px;
}
.post p {
line-height: 1.5em;
}
.post ul, .post ol, ul#trackbacklist {
margin: 10px 0 18px 25px;
}
.post ul, ul#trackbacklist {
list-style: none;
}
.post ol ol {
list-style-type: lower-alpha;
}
.post li, ul#trackbacklist li {
font-size: 1.1em;
line-height: 1.7em;
margin-top: 0.5em;
margin-bottom: 0.9em;
background: url(images/bullet.png) top left no-repeat;
text-indent: 25px;
}
.post li p {
font-size: 1.0em;
}
.alignleft {
float:left;
text-align:left;
}
.alignright {
float:right;
text-align:right;
}
.pagetitle {
font-size: 1.6em;
margin-bottom: 20px;
}
blockquote {
padding: 10px 0 0 55px;
margin: -10px 0 0 0;
background: url(images/left-quote.png) top left no-repeat;
min-height: 54px;
height: auto !important;
height: 54px;
}
#commentlist code { width: 450px; }
code {
line-height: 1.4em;
overflow: auto;
display: block;
padding: 10px;
background: url(images/code-sample.png) no-repeat bottom left #F0F0F0;
margin-bottom: 15px;
margin-top: 5px;
font-size: 1.4em;
width: 540px;
}
pre code[class]:after {
content: 'highlight: ' attr(class);
display: block; text-align: right;
font-size: smaller;
padding-top: 0.5em;
color: #666;
}
pre code,
.ruby .subst {
color: black;
}
.string,
.function .title,
.class .title,
.tag .attribute .value,
.css .rules .value,
.preprocessor,
.ruby .symbol,
.built_in,
.sql .aggregate,
.django .template_tag,
.django .variable,
.smalltalk .class {
color: #800;
}
.comment,
.java .annotation,
.template_comment {
color: #888;
}
.number,
.regexp,
.javascript .literal,
.smalltalk .symbol,
.smalltalk .char {
color: #080;
}
.javadoc,
.ruby .string,
.python .decorator,
.django .filter .argument,
.smalltalk .localvars,
.smalltalk .array,
.css .attr_selector,
.xml .pi {
color: #88F;
}
.keyword,
.css .id,
.phpdoc,
.function .title,
.class .title,
.vbscript .built_in,
.sql .aggregate,
.rsl .built_in,
.smalltalk .class,
.xml .tag .title {
font-weight: bold;
}
#sidebar {
float: right;
width: 352px;
padding-right: 25px;
}
.sidebar-box {
background: url(images/sidebar-box-bg-middle.png) left top repeat-y;
margin-bottom: 5px;
}
.sidebar-box .sidebar-inside {
padding: 0 12px;
}
#search-area input#s {
border: 1px solid #666;
padding: 6px;
margin: 3px 5px 3px 0px;
display: block;
float: left;
width: 211px;
}
#search-area #submit-button {
float: left;
margin-top: 3px;
}
a.blog-rss {
height: 32px;
width: 186px;
display: block;
float: left;
background: url(images/subscribe-articles-rss.jpg) no-repeat bottom center;
border: none;
text-indent: -9999px;
}
a.blog-email {
height: 41px;
width: 186px;
display: block;
float: left;
background: url(images/subscribe-articles-email.jpg) no-repeat bottom center;
border: none;
text-indent: -9999px;
}
a.video-rss {
height: 32px;
width: 141px;
display: block;
float: left;
background: url(images/subscribe-videos-rss.jpg) no-repeat bottom center;
border: none;
text-indent: -9999px;
}
a.video-itunes {
height: 41px;
width: 141px;
display: block;
float: left;
background: url(images/subscribe-videos-itunes.jpg) no-repeat bottom center;
border: none;
text-indent: -9999px;
}
a.blog-rss:hover, a.blog-email:hover, a.video-rss:hover, a.video-itunes:hover {
background-position: top center;
border: none;
}
span.count {
font-family: "Gill Sans", Georgia, serif;
font-size: 1.8em;
font-weight: bold;
color: #B30000;
}
#sidebar p {
margin: 0;
}
.sidebar-ads {
background: url(images/sidebar-ads-bg-middle.png) center repeat-y;
margin-bottom: 5px;
}
a.sponsor-link {
display: block;
padding: 5px;
float: left;
border: 1px solid #c1b599;
margin: 0px 8px 8px 0;
}
a.sponsor-link:hover {
border: 1px solid #b30000;
}
.sidebar-ads-inside {
padding-left: 35px;
}
#sidebar ul {
list-style: none;
margin-top: 10px;
}
#sidebar ul li a {
display: block;
width: 305px;
color: #303030;
padding: 7px 10px 7px 10px;
border-bottom: solid 1px #c1b599;
text-decoration: none;
}
#sidebar ul li a:hover {
background-color: #b30000;
color: white;
}
.sidebar-link-unit {
padding-left: 12px;
padding-bottom: 5px;
margin-top: -10px;
border-bottom: 1px dashed #ccc;
}
#sidebar ul li a.regular-link {
display: inline;
color: #06C;
padding: 0;
border: 0;
}
#sidebar ul h2 {
padding-bottom: 5px;
border-bottom: dashed 1px #CFCFCF;
font-size: 1.5em;
}
.stripViewer {
position: relative;
overflow: hidden;
width: 352px; /* Also specified in .stripViewer .panelContainer .panel below */
clear: both;
}
.stripViewer .panelContainer {
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.stripViewer .panelContainer .panel {
float: left;
height: 100%;
position: relative;
width: 352px; /* Also specified in .stripViewer above */
}
.stripViewer .panelContainer .panel .wrapper {
padding: 0px;
}
.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
margin-left: 0px;
}
.stripNav ul { /* The auto-generated set of links */
list-style: none;
}
.stripNav ul li {
float: left;
}
#sidebar .stripNav li a {
display: block; width: 117px; height: 55px; text-indent: -9999px; padding: 0; border: none;
}
.stripNav li.tab3 a { background: url(/images/tab-popular.png) top center no-repeat; position: relative; right: -3px; }
.stripNav li.tab1 a { background: url(/images/tab-ss.png) top center no-repeat; }
.stripNav li.tab2 a { background: url(/images/tab-featured.png) top center no-repeat; position: relative; right: -1px; }
#sidebar .stripNav li a:hover {
background-position: bottom center;
background-color: white;
}
.stripNav li.tab3 a.current {
background: url(/images/tab-popular.png) bottom center no-repeat;
}
.stripNav li.tab1 a.current {
background: url(/images/tab-ss.png) bottom center no-repeat;
}
.stripNav li.tab2 a.current {
background: url(/images/tab-featured.png) bottom center no-repeat;
}
.stripNavL, .stripNavR {
display: none;
}
#sidebar .stripViewer .panel ul { margin: 0; padding-top: 10px; }
.voting-buttons {
text-align: center;
}
#sidebar ul li p.voting-buttons a {
display: inline;
}
#sidebar ul li p.voting-buttons a:hover {
background: none;
}
#respond {
font-size: 1.6em;
margin-bottom: 5px;
}
ol#commentlist {
list-style-type: none;
}
ol#commentlist li {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px 10px 0 10px;
margin-top: -1px;
width: 550px;
}
ol#commentlist p.comment-number {
font-size: 7em;
float: right;
margin-left: 20px;
top: 0;
color: #e8e8e8;
font-family: Garamond, Georgia, Times, Serif;
}
ol#commentlist li.author p.comment-number {
color: #8a9c6d;
}
ol#commentlist li.author p.comment-number:before {
content: "*";
}
ol#trackbacklist {
list-style-type: decimal;
}
ol#trackbacklist li {
margin-left: 20px;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px dashed #ccc;
}
#comment_title {
margin-bottom: 5px;
}
#commentform {
margin-bottom: 20px;
}
#commentform p {
margin-bottom: 10px;
}
#commentform textarea {
font-family: Tahoma;
padding: 5px;
height: 160px;
width: 100%;
background: url(images/entry-bottom.gif) no-repeat bottom right;
border: 2px dotted #d1d1d1;
}
input.comment-field {
width: 190px;
padding: 3px;
border: 2px dotted #d1d1d1;
margin-right: 5px;
}
.comment-text {
padding-left: 60px;
}
#footer {
text-align: center;
background: url(/images/footer-bg.jpg) no-repeat;
min-height: 526px;
height: auto !important;
height: 526px;
position: relative;
}
a.chrislink {
text-indent: -9999px;
display: block;
width: 192px;
height: 72px;
position: absolute;
left: 245px;
top: 145px;
border: none;
}
a.twitterbutton {
text-indent: -9999px;
display: block;
width: 141px;
height: 62px;
position: absolute;
left: 41px;
top: 361px;
border: none;
}
#footer-meta {
position: absolute;
top: 152px;
left: 805px;
}
#footer-meta ul {
list-style: none;
margin-bottom: 10px;
}
#footer-meta ul li a {
display: block;
padding: 1px;
border: none;
color: #124d61;
}
#footer-meta ul li a:hover {
background: #124d61;
color: white;
}
#footer-friends {
position: absolute;
top: 152px;
width: 117px;
left: 572px;
}
#footer-friends ul {
list-style: none;
margin-bottom: 10px;
}
#footer-friends ul li a {
display: block;
padding: 1px;
border: none;
color: #ffe0c9;
}
#footer-friends ul li a:hover {
background: #124d61;
color: white;
}
#twitter_div {
position: absolute;
left: 218px;
top: 265px;
width: 220px;
height: 213px;
overflow: auto;
}
#twitter_div ul {
list-style: none;
text-align: left;
}
#twitter_div ul li {
font-size: 2.1em;
}
html > body .footer-column {
width: 226px;
margin: 0 10px 0 6px;
float: left;
margin-bottom: 15px;
}
/* PRINT */
body {
font-family: Georgia, serif;
background: none;
color: black;
}
page {
width: 100%;
margin: 0; padding: 0;
background: none;
}
a img { border: none; }
#top-bar, #nav, #menu-bar, #sidebar,
h2#postcomment, h2#trackbacks,
form#commentform, p.comment-number,
ol#trackbacklist,
#footer {
display: none;
}
.entry a:after {
content: " [" attr(href) "] ";
font-size: smaller;
text-decoration: none;
}
#printed-article {
border: 1pt solid #666;
padding: 10pt;
}
h2#comments {
page-break-before: always;
}