Set the Font Slant
By Stephen Bucaro
Using the CSS skew transform you can set a font's slant angle. To do
this, each letter of a word or sentence is placed in a span element, and
a class defining the transform is applied to each span.
At this time, the transform property is not supported in all browsers, but
Firefox supports the -moz-transform property, and Internet Explorer
supports the -ms-transform property. The syntax of the skew transform
is shown below:
transform: skew(x-angle, y-angle)
The x-angle is the amount of back slant the letter or digit will have. To give
a letter or digit a forward slant you would use a negative x-angle. You would
set the y-angle to 0 or, for an even more crazy slant effect, set the y-angle
to a non-zero value.
H
E
L
L
O
Show below is the code for the slanted text shown above:
<style type="text/css">
.slant
{
float:left;
font-family:courier;
font-size:30px;
transform:skew(30deg,0deg));
-moz-transform: skew(30deg, 0deg); /* Firefox */
-ms-transform: skew(30deg, 0deg); /* IE 9 */
}
</style>
<span class="slant">H</span>
<span class="slant">E</span>
<span class="slant">L</span>
<span class="slant">L</span>
<span class="slant">O</span>
More CSS Quick Reference: • Set the Border Color • Set List Bullets Position • Set List Properties • Style the First Letter • Set the Type of Bullet Used in List • Indent the First Line of Text • Set the Border Width • Set the Border Style • Set the border-collapse • Set a Fixed Background Image
|