7/01/2010

[Web] Googles Web fonts

Often, when comparing websites in different browsers, its also a good idea to check how they look in different OS. It can be very depressing.
Or maybe you want to add a nicer font and not those boring web standard fonts to your website.
That's where the Google Web fonts come in handy.

Google provides a set of Fonts from which you can choose from and returns you a code-snipped. The snipped will look something like this:
< link href="http://fonts.googleapis.com/css?family=%3Cspan%20id=%22url%22%3E%3Cstrong%3ETangerine%3C/strong%3E%3C/span%3E" rel="stylesheet" type="text/css">
Add this code to your Header and you're good to go set the font to (in this case) Tangerine in your CSS file.

This way you can not only make sure the fonts look similar on every system, but you can also choose fonts that aren't web standard.

This Google Project is still in heavy development but it might evolve in something really nice for web developers.

6/29/2010

[CSS] Round Corners

As I have noticed, designers like to design a lot of stuff that the developers hate to implement.
One of this things seams to be round corners. Often the developer ends up using images of round corners or other weird methods.

What only a few people seam to know is that you can get round corners very easy with CSS.
Check this out (each is for a different Browser Toolkit, just include all of them every time you want rounded corners):

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;

(Including the "-")

this should look like this:
This box should have round corners

For IE users, fear not! There is a project that does the job too. More info here:
http://code.google.com/p/curvycorners/

Stay tuned, post about Web Fonts coming soon with another great discovery to finally making the Web beautiful.