|
Create Titles without ImagesBeautiful Titles for your Web PageThe title above is created without images - shrink the width of your page and see the text wrap! Making your website titles beautiful is as simple as downloading a font from Google google.com/webfonts and using CSS to style it. The title above uses Tangerine font and this body text uses the Satisfy font. This is only a demo - you would never make a page with so many different fonts - you can see why right? Here's the header code for the title above. The font and a drop shadow is applied using CSS styles.
Link to stylesheet downloads the font:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> Using this style inline, in the header, or in a style sheet: font-family: 'Tangerine', serif; font-size:260%; text-shadow: 4px 4px 4px #aaa; The regular version of the requested fonts are the default. To request other styles or weights, append a colon to the name of the font, followed by a list of styles or weights separated by commas. Bold may also be expressed as b or a numerical weight such as 700.
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic
Specifying a text=value in your font request URL allows Google to send an optimized font file. URL-encode the value for spaces. This can reduce the size of the font file by up to 90%.
http://fonts.googleapis.com/css?family=Tangerine&text=Hello%20World
1. Rancho font + shadow-mulitply2. Rancho font + 3d-floatYou add &effect= to your font request in the header. The corresponding class you apply to the text is always the effect name prefixed with font-effect-
http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
1. <h2 class="font-effect-shadow-multiple"> ... </h2> 2. <h2 class="font-effect-3d-float"> ... </h2> |
||||||||||||||||||||||||||||||||||||||
The PDQ Library is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
|