Introduction to CSS3 : Part 3

In my previous articles, you've learned the basic history of CSS, vender prefixes, all about borders and backgrounds. If you didn't check yet, then you should go through these two articles before proceeding:

• Introduction to CSS3 : Part 1 

• Introduction to CSS3 : Part 2 

Today you'll learn all about text-effects that includes 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

 

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:

#text-effect {

    width: 500px;

    font-size: 60px;

    color: #f00;

    text-shadow: 5px 5px 10px #f80;

}

Output:

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 includes multiple text-shadows.

Example:

#text-flame {

            width: 500px;

            font-size: 60px;

            color: #fff;

            text-shadow: 0 0 5px #ccc,

                         0 -6px 5px #ff3,

                         3px -12px 7px #fd3,

                         -3px -17px 12px #f80,

                         3px -19px 19px #f20;

        }

Output:

 

ii) text-wrap

You often encounter some problems when working with text because whenever your text is to 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:

.text-wrap {

            width: 200px;

            border: 2px solid #ff6a00;

            word-wrap: break-word;

        }

Output:

Before: 

After: 

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: 

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: 

@font-face {

            font-family: GoodDog;

            src: url(GoodDog.otf);

        }

 

#new-font {

            font-family: GoodDog;

            font-size: 30px;

            width: 350px;

           

            color: #f00;

            text-shadow: 5px 5px 10px #f80;

        }

Output:

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.