Categories
uncategorized

cool CSS tricks of the day from Jeffrey Zeldman

(brilliant CSS)
from zeldman.com (synd@zeldman2)

missing links
(doesn’t work in MSIE – go figure)

TRY THIS:
/* Paragraph text */
p {
color: #333333
}

/* Links within paragraphs (subtle) */
p a {
color: #666666;
text-decoration: none;
}

/* Links within paragraphs (revealed) */
p:hover a {
color: blue;
text-decoration: underline;
}

/* Rollover effect for links within paragraphs */
p a:hover {
color: red;
}

damn near perfect CSS tabs!

TRY THIS:
body {
margin : 10px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: ;
}

#menu {
border-bottom : 1px solid #ccc;
margin : 0;
padding-bottom : 19px;
padding-left : 10px;
}

#menu ul, #menu li {
display : inline;
list-style-type : none;
margin : 0;
padding : 0;
}

#menu a:link, #menu a:visited {
background : #E8EBF0;
border : 1px solid #ccc;
color : #666;
float : left;
font-size : small;
font-weight : normal;
line-height : 14px;
margin-right : 8px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}

#menu a:link.active, #menu a:visited.active {
background : ;
border-bottom : 1px solid ;
color : ;
}

#menu a:hover {
color : #f00;
}

body.section-1 #menu li#nav-1 a,
body.section-2 #menu li#nav-2 a,
body.section-3 #menu li#nav-3 a,
body.section-4 #menu li#nav-4 a {
background : ;
border-bottom : 1px solid ;
color : ;
}

#menu #subnav-1,
#menu #subnav-2,
#menu #subnav-3,
#menu #subnav-4 {
display : none;
width: 90%;
}

body.section-1 #menu ul#subnav-1,
body.section-2 #menu ul#subnav-2,
body.section-3 #menu ul#subnav-3,
body.section-4 #menu ul#subnav-4 {
display : inline;
left : 10px;
position : absolute;
top : 95px;
}

body.section-1 #menu ul#subnav-1 a,
body.section-2 #menu ul#subnav-2 a,
body.section-3 #menu ul#subnav-3 a,
body.section-4 #menu ul#subnav-4 a {
background : ;
border : none;
border-left : 1px solid #ccc;
color : #999;
font-size : smaller;
font-weight : bold;
line-height : 10px;
margin-right : 4px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}

#menu ul a:hover {
color : #f00 !important;
}

#contents {
background : ;
border : 1px solid #ccc;
border-top : none;
clear : both;
margin : 0px;
padding : 15px;
}

By jae

jae lethe (he/she/they) is a blogger, musician, artist, poet, web developer/designer, armchair philosophizer, teller of tales, and gadabout. Also, something he calls a "behavioral artist." (Not sure.) She has plans. BIG plans.

Among the things that he has done for a laugh are minor fractures, cuts, scrapes, and various scabs. Though she's quick to point out that they're no imbecile, we're fairly certain that he thinks the word means some kind of medieval pharmacist.

This is her latest home on teh internets - where jae stores their swear words, when they're not hurling them at the sun in vain.