CSS text effects collection tutorial

Now i'll share about CSS text effect. It's many code for css text effect, i mean text effect is not a property or value, but it's an effect in css for text. What i share is some of text property that i used, and i think that effect is important to modify your site. Maybe an article like this has already shared in some blog, but because my blog is not up to date, now i just want to share to someone that doesn't know about all of this text effect. So here is the effects.

Text Shadow

Text shadow is a text effect with a shadow. But you can create a creative shadow with this property. If you're creative, you can make like 3D effect, a glowing text effect, a text looks like created by photoshop and many others. The rule is like this: text-shadow: 1px 1px 5px #000;. The red color is the text shadow property, the blue color is the x-offset or the position of the shadow horizontally, the green color is the y-offset or the position of shadow vertically, the pink color is the blur radius of the shadow, the yellow color is the color of the shadow.
Try it yourself!

text-shadow: 0 0 5px #ff0000

Example:
click this link: http://damzaky.blogspot.com/2012/12/css3-text-shadow.html

Text Transform

Text Transform is just an automatic transformation for text, with this property, if you had write something in a div without caps, but you want that text is caps or uppercase, you can use this property.

Example:
capitalize

text-transform: capitalize

uppercase

text-transform: uppercase

lowercase

text-transform: lowercase

Font Variant

Font Variant is not very famous, but this property is very pretty, i like this property. With this property, you can make a small-caps font. Small caps is just like, the first letter of the text is uppercase, but the lowercase will be uppercased with a different size. Confused?, look this example below....

Example:
Small-caps

font-variant:small-caps

Letter spacing

Letter spacing is not a text effect, but you should know this, because if you want to make a beautiful text maybe you need this. Letter spacing is just a space size between the letter.

Example:
Letter spacing 1px

letter-spacing: 1px;

Letter spacing 2px

letter-spacing: 2px;

Letter spacing 3px

letter-spacing: 3px;

Letter spacing 4px

letter-spacing: 4px;

Letter spacing 5px

letter-spacing: 5px;

Text decoration

Text decoration is just a standard CSS value that always used in any site. But i just want to tell you.

Example:
Text decoration: underline

text-decoration: underline

Text decoration: overline

text-decoration: overline

Text decoration: line-through

text-decoration: line-through

Another text effects that i don't want to explain, just copy the code XD.


Font-weight: bold

font-weight: bold;

Font-style: italic

font-style: italic;

line-height: 30px

line-height: 30px

Maybe i forget to share some property, so i'm so sorry, and sorry for not explain the last property.