CSS-Tricks PSD to HTML: You Design - We XHTML

Archive for August, 2007



Validate your CSS through W3C

Just like you can validate your HTML at the W3C, you can validate your CSS.

CSS-Tricks passes muster.

Font Rendering Differences: Firefox vs. IE vs. Safari

You can get pretty specific when declaring how you want text to look with CSS:
p {
font-family: Verdana;
background-color: #7A2121;
color: #B93333;
text-decoration: underline;
word-spacing: Normal;
text-align: left;
letter-spacing: 1px;
text-indent: 15px;
line-height: 16px;
font-size: 10px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
And [...]

Create Your Logo with Pure CSS

Dan Cole has an interesting article up about creating a logo using only CSS. Why?

Faster loading time
Works with images disabled
Scalable

Here is what it looks like:

Here is how it was done:
#tower1 {
position:absolute;
top:51px;
left:20px;
width:20px;
height: 30px;
background-color: #333;
}
#tower2 {
position:absolute;
top:31px;
left:45px;
width:20px;
height: 50px;
background-color: #33E;
}
#tower3 {
position:absolute;
top:11px;
left:70px;
width:20px;
height: 70px;
background-color: #3A3;
}
#tower4 {
position:absolute;
top:90px;
left:20px;
width:20px;
height: 10px;
background-color: #AAA;
}
#tower5 {
position:absolute;
top:90px;
left:45px;
width:20px;
height: 17px;
background-color: #AAD;
}
#tower6 {
position:absolute;
top:90px;
left:70px;
width:20px;
height: 23px;
background-color: #ADA;
}

Totally Ridiculous: CSS MySpace Modifications

This is old news, but is worth of revisiting because of it’s preposterousness. You are able to add CSS to your MySpace pages. Cool. But where do you do that? Is there some little fun CSS editor they built in? Maybe a “theme editor” or the like? Nah.
You have to paste in your CSS [...]

CSS Trick: Fade Out the Bottom of Pages with a Fixed Position Image

I really like this subtle effect on the fortuito.us blog. the text at the bottom of the page fades away. Even as you scroll the page content up and down, it appears as if it fades away into the bottom of the page.

This can be achieved with a transparent image that is in a fixed [...]

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.