Css3 Text Effects

Css3 contains some new text effect. text-shadow and word-wrap is very important to them. In this article you gonna learn about text-shadow and word-wrap and some other css3 text property. Internet explore doesn’t support the text-shadow property.

Css3 text shadow:

In css3 the text-shadow property used  for making shadow of any text.

<html>

<head>

<style type="text/css">

h1

{text-shadow: 5px 5px 5px #FF0000;}

</style>

</head>

<body>

<h1>This is a text shadow.</h1>

</body>

</html>

 

Look at the {text-shadow: 5px 5px 5px #FF0000;} , It express that the shadow will be “5px” under “x” axis,  “5px” under “y” axis and “5px” under “z” axis. And the color will be #FF0000.

Css3 text  word-wrap:

Sometimes you need to put some text within a selected area. But if text doesn’t place within a fixed area, or text cross the line of area. Than you can use the word-wrap property of css3.

<html>

<head>

<style type="text/css">

p.word

{width:11em;

border:2px solid #000000;

word-wrap:break-word;}

</style>

</head>

<body>

<p> Play truant ,Take off ,Put off ,At length ,All the same

,Block head ,From hand to mouth ,Bless with ,French leave ,In the long run

</p>

</body>

</html>

Look at this following syntax

p.word

{width:11em;

border:2px solid #000000;

word-wrap:break-word;}

I have indicate width 11em. You can use the width in pixel also. I have used border for the border of text area. Text warp  contains four property. The properties are normal, none, unrestricted, suppress;

 

css3 text Word break :

This property works for mainly break word. Every letter works like a word.  This property contains three value. The values are normal, break-all and hyphenate.

<html>

<head>

<style type="text/css">

p.word

{width:300px;

border:2px solid #000000;

word-wrap:unrestricted;

word-break:break-all;}

</style>

</head>

<body>

<p> Play truant ,Take off ,Put off ,At length ,All the same

,Block head ,From hand to mouth ,Bless with ,French leave ,In the long run,

Play truant ,Take off ,Put off ,At length ,All the same

,Block head ,From hand to mouth ,Bless with ,French leave ,In the long run,

Play truant ,Take off ,Put off ,At length ,All the same

,Block head ,From hand to mouth ,Bless with ,French leave ,In the long run

</p>

</body>

</html>

This is the main learning about css3 text style.  You can follow the css text style article for learn about css text style. Designing background css3 helps you very much , you can read  css3 background article.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.