Advanced Text Control
With CSS3, not only can you apply bitmap-like visual effects to text elements such as embossing and drop-shadows, but also, you are no longer limited to using just the fonts available on everyone’s computer. You can now specify custom fonts using the @font-face property.
Text Effects
Through a few simple CSS properties, you can transform everyday text into beautiful custom-looking graphics. The text-shadow and text-stroke properties allows you to create an outlined headline with a drop shadow effect as shown in below.
h1 {The text-stroke property is preceded by “-webkit” as currently, only Safari browsers support this effect. You can otherwise try to simulate a stroke using the text-shadow property in a more complex manner shown later in this post.
font-family: ‘Myriad Pro’, Arial, Helvetica, sans-serif;
font-weight: 900;
font-size: 80px;
text-align: center;
letter-spacing: -2px;
color: #2b4c7a;
-webkit-text-stroke: 1px #e83d3d;
text-shadow: 2px 2px 3px #3e3e3e;
}
As for the text-shadow property, you can see there are lot of values listed. Below is a diagram that demonstrates how the syntax works listing first the x and y offsets, then the blur amount, and finally the color.
A more complex use of the text-shadow property is shown in below. In this example, a letterpress style effect is achieved by using four different shadows—one for each edge of the text. You could utilize this technique to create a myriad of effects, including a simple stroke effect that is not supported outside of the Safari browser.
Below is the code that creates the letterpress effect in above:
h1 {
font-family: Rockwell, Georgia, “Times New Roman”, Times, serif;
font-size: 120px;
color: #0D4383;
text-shadow: rgba(0,0,0,0.9) -1px 0, rgba(0,0,0,0.9) 0 -1px, rgba(255,255,255,.9) 0 1px,
rgba(0,0,0,0.5) -1px -2px;
}
In this example, the “rgba” method is used allowing you to assign RGB values and a transparency amount. Looking more closely at the first rgba value, inside the parenthesis, black is defined as 0,0,0 (its RGB value).
Last inside the parenthesis is 0.9 which assigns a transparency value of 90%. The last two values define the x and y offsets respectively. You could also add a third value after the offsets that defines the blur amount like this:
rgba(0,0,0,0.9) -1px 0 3px,Using Custom Fonts
One of the best features in CSS3 is the ability to assign custom fonts to your web pages. Over the last couple years, web sites took a giant leap forward in design due to this single feature. Gone are the days that you are limited to Arial and Verdana. Now, using the @font-face rule, and a hosted font, you have hundreds
of font options. The way it works is as follows. In your CSS style sheet (or in the <head> section of your page) define a name for your cool font such as “AwesomeFont” and the URL to the font online. Note that the name you define does not need to match the file name of the hosted font:
@font-face {Once defined as a font with the @font-face, you can assign it to any of your text elements, along with a string of fall-back fonts in case your server is unavailable:
font-family: AwesomeFont;
src: url(‘Gotham_Reg.ttf’), url(‘Gotham_Reg.eot’); /* IE9 */
}
h1{Though this chapter focuses on CSS3, it’s worth noting that services such as TypeKit are alternative ways to expand your font repertoire. TypeKit hosts hundreds of web fonts. By signing up, you get a <script> code
font-family: AwesomeFont, Arial, Helvetica, sans-serif;
}
that you can embed in the <head> section of your web page that references your TypeKit account with the
fonts you have purchased. The code is limited to work on the URLs you’ve defined, so no one can simply
copy your <script> and use your fonts.
Next - CSS 3 - Part 3
No comments:
Post a Comment