Introduction to CSS3 : Part 3

Introduction

 
In my previous articles, you've learned the basic history of CSS, vendor prefixes, all about borders and backgrounds. If you didn't check yet, then you should go through these two articles before proceeding:
Today you'll learn all about text-effects that include text-shadow and word-wrap then you'll learn how to use other fonts in your project.
 

3. Text Effects

 
In CSS3 there are many new text features introduced. Here, you'll learn about these two text properties:
  • text-shadow
  • word-wrap
Browser Support
 
BowserSupport-text.png
 

i) Text Shadow

 
In CSS3, text shadows are nearly the same as box shadows with a little exception that there is no support of inset text shadows and there is no vendor prefix required for it. Let's check the syntax we use for text-shadows
 
text-shadow: offset_x offset_y blur_radius color;
 
Here, for the first parameter you need to provide the "horizontal shadow," then in the second parameter specify "vertical shadow". In the third one provide the "blur distance" and in the last one provide the "color" for text-shadow. Now check this example that includes an invisible text with special effects
 
Example:
  1. #text-effect {  
  2.     width500px;  
  3.     font-size60px;  
  4.     color#f00;  
  5.     text-shadow5px 5px 10px #f80;  

Output
 
1 Eg text-shadow.png
 
In my previous article, you've seen that we can apply multiple shadows to a box that is also possible in text shadows. You've to separate them by using commas. Now check this example with some flaming text effects that include multiple text-shadows.
 
Example:
  1. #text-flame {  
  2.             width500px;  
  3.             font-size60px;  
  4.             color#fff;  
  5.             text-shadow0 0 5px #ccc,  
  6.                          0 -6px 5px #ff3,  
  7.                          3px -12px 7px #fd3,  
  8.                          -3px -17px 12px #f80,  
  9.                          3px -19px 19px #f20;  

Output
 
2 Eg text-shadow.png
 

ii) text-wrap

 
You often encounter some problems when working with text because whenever your text is too long to fit within an area then it expands to outside. To solve this problem we have a word-wrap property that allows you to force the text to wrap and it doesn't matter if it gets split in the middle of a word
 
Let's see an image without text-wrap and then we check the example after applying the "text-wrap" property to it.
Image-Without Text-wrap
 
Example:
  1. .text-wrap {  
  2.             width200px;  
  3.             border2px solid #ff6a00;  
  4.             word-wrap: break-word;  

Output
 
Before
 
3 Eg without text-wrap.png
 
After
 
4 Eg with text-wrap.png
 
In CSS3, there're many other text properties that you can use in your CSS. Have a look at this image that from w3schools.com
 
5 text-wrap other properties.png
 

4. @fonts in CSS3

 
Long ago, web designers had a big problem with fonts that they could only choose pre-defined fonts that were already installed on the user's computer. But using CSS3 you can use whichever font you like. You can use new fonts using the "@font-face" rule.
 
Browser Support
 
1-img-browser-support
 

How to use new Fonts

 
To use a new font you need to define a font name, for example, "myNewFont", and then provide the URL. After declaration, when you are going to use a new font in your code then you need to refer to the font using the "font-family" property. Let's understand the concept using an example.  
 
Example
  1. @font-face {  
  2.     font-family: GoodDog;  
  3.     srcurl(GoodDog.otf);  
  4. }  
  5.   
  6. #new-font {  
  7.     font-family: GoodDog;  
  8.     font-size30px;  
  9.     width350px;  
  10.      
  11.     color#f00;  
  12.     text-shadow5px 5px 10px #f80;  

Output
 
6 font-face.png
 
In the preceding example, we used the "GoodDog" font-face that is another font-file. You can use this font in your text whenever you want by using the new font-family "GoodDog". You can have multiple @font-face rules using this property. 


Similar Articles