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:
• How to Define and Apply a Style Class
• Style the First Line
• Set List Properties
• Vertical Align an Element
• Set the Border Color
• Set the Font Boldness
• Set a Background Image
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Specifying Color
• Highlight Text
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
