css3 text effects

the css3 text module include various text-properties to create better text effect.

here we will learn about the following text properties.

  • text-shadow
  • word-wrap

Css3 text-effects browser support

propertybrowser support
text-shadow
word-wrap

internet explorer9, firefox,chrome, safari and opera support the new text-shadow properties.

all major browsers support the word-wrap property.


text-shadow

text-shadow property specifies one or more text shadow effects to be added to the text content of an element.

shadow effects are applied in the order in which they are specified.they don't increase the size of a box.and their stack order is the same as the element ifself.

Css3 text-shadow example :-

multiple shadows are hots.

      <html>
      
          <head>
          
             <title>text-shadow  effect. </title>
             
    <style   type="text/css">
    
.text_shadow {

			         width:400px; ;
			         
         			height:120px ;
         			 
         			font-family:verdana, arial, helvetica, sans-serif ;
         			
         			font-size:25px ;
         			
         			color:#3a4b9c ;
         			
         			font-weight:bold ;
         			
         			text-shadow:2px 50px lime, 1px 26px pink;
         			
         } </style>  </head>
         
  <body> <div  class="text_shadow" >
  
     <p>multiple shadows are hots. </p>
     
 </div>
 
 </body>  </html>

Css3 word-wrap Property

the word-wrap property added to css3.it allows long words to be able to broken and wrap onto the next line.it takes in two normal values:

  • normal  : 'css word-wrap:normal' indicates that lines may only break at normal word break points.
  • break-word  :indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

the word-wrap example:-

         
   <html>
         
         <head>
         
             <title>word-wrap effect. </title>
             
    <style   type="text/css">
    
    .word_wrap {
    
          		     width:12em;
          		     
         			 background-color:gold;
         			
         			word-wrap:normal;
         }
         
  </style>  </head>
  
   <body>  <div  class="word-wrap" >
   
   <p>this paragraph has long words thisisvaerylongwordthatthistreatlyhollywoodand 
   
                         again a longwordwithwithoutsplit </p>
   
  </div>
  
 </body>  </html>

example :-

   <html>
         
         <head>         
     			
     			<title>word-wrap effect. </title>
     			
     <style   type="text/css">
     
  .word_wrap {
  
   				        width:12em;  
   				       
         				background-color:gold  ;
         				
         				word-wrap:break-word  ;
         }
         
 </style>  </head>
 
  <body> <div  class="word-wrap" >
  
   <p>this paragraph  css3 text word wrap effect example  </p>
   
   </div>
   
    </body>  </html>

css3 text properties.

propertydescriptioncss
text-justifyspecifies the justification method used when text-align is 'justify'css3
text-outlinespecifies a text outline.css3
text-overflowspecifies what should happen when text overflows the containing element.css3
text-shadowadds shadow to text.css3
text-wrapallow long unbreakable words to be broken and wrap to the next line.css3
text-breakspecifies line breaking rules.css3