CSS: Google-ness

When I think of Google's "style" I think of clean, simple, very minimalist. I think of their colors: white and blue, and their containers with rounded corners.












My version of "Google-ness" applied to the Dorm Energy website.











Before

Header Text Image Replacement

The font used in image1 as the header seemed very bland. I changed the text to an image using the technique told by Chris Coyier. It leaves the text there but out of sight and displays the image. This allows search engine readability while being aesthetically pleasing.

.headerReplacement {
text-indent: -9999px
width: 600px;
height: 100px;
background: url(pathtoyourimage) #cccccc no-repeat; }


http://css-tricks.com/header-text-image-replacement/












after (with some other changes)

Gradients

I wasted a lot of time messing around with the colors. No matter what color I chose (I like green) it did not look appealing. I realized that all the sites I thought had beautiful colors used gradients. I did not want to manually create an image with a gradient and use it as a background like most tutorials advised me. I found this website that does it for you. It has made my life so much easier ;) .

http://tools.westciv.com/gradients/index-moz.html