Script Tutorials

Astonishing CSS3 text effects

—

by

admin
in

In today’s tutorial, I will show you six amazing CSS3 text effects: 3D effect using the text-shadow, effects with gradients and mask-image, effects with transitions and background-clip, and more. All they undoubtedly will prove useful to you, because CSS3 allows us to achieve a truly impressive results. Part of the described effects works in most browsers that support CSS3, however, a few examples will only work in Webkit. Therefore, in order to get more impressions, I recommend that you view our demo in Webkit browsers: Chrome or Safari.

Live Demo

In the beginning, let’s add a common style for all further experiments:

1 #main div {
2     font-size: 120px;
3     font-weight:bold;
4     position: relative;
5 }

Here we just specified the font size and weight. Now, let’s begin

Effect #1 – CSS3 3D text with text-shadow

Who would have known that the use of a traditional ‘text-shadow’ style gives such opportunities. In CSS3, the text-shadow property applies shadow to text. You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

1 text-shadow: h-shadow v-shadow blur color;
2 /* example: */
3 text-shadow: 2px 2px 5px #FF7777;

In order to add more text depth, we just need to add several more shadows, for instance:

01 #eff1 {
02     color: #00b506;
03     text-shadow:
04         0px 0px 0 rgb(-28,153,-22),
05         1px 1px 0 rgb(-55,126,-49),
06         2px 2px 0 rgb(-83,98,-77),
07         3px 3px 0 rgb(-111,70,-105),
08         4px 4px 0 rgb(-139,42,-133),
09         5px 5px 0 rgb(-166,15,-160),
10         6px 6px 0 rgb(-194,-13,-188),
11         7px 7px 0 rgb(-222,-41,-216),
12         8px 8px 7px rgba(0,0,0,0.75),
13         8px 8px 1px rgba(0,0,0,0.5),
14         0px 0px 7px rgba(0,0,0,.2);
15 }

Effect #2 – CSS3 gradient text with -webkit-mask-image (Webkit)

This effects uses css3 masks (-webkit-mask-image). Currently, this property is not supported by other browsers (but let’s hope that it will be supported in the future):

1 #eff2 {
2     color: #00b506;
3     text-shadow: 1px 1px 1px #000000;
4     -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
5 }

Effect #3 – CSS3 rainbow text background with -webkit-text-fill-color (Webkit)

To achieve this effect we need to use the ‘background-clip’ property with non-standard value ‘text’ (this value is supported by Webkit only):

1 #eff3 {
2     background-image: -webkit-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
3     background-image:    -moz-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
4     background-image:     -ms-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
5     background-image:      -o-linear-gradient(left, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
6     background-image:         linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff);
7     -webkit-text-fill-color: transparent;
8     -webkit-background-clip: text;
9 }

Effect #4 – CSS3 shining text with transition and -webkit-background-clip (Webkit)

If you look at it in Webkit browser, you will see that a light bar periodically runs across the text. To achieve this effect we used the same ‘background-clip’ property with non-standard value ‘text’:

01 #eff4 {
02     background: #00b506 -webkit-gradient(linear, left top, right top, from(#00b506), to(#00b506), color-stop(0.5, #ffffff)) 0 0 no-repeat;
03     color: rgba(255, 255, 255, 0.1);
04     font-size: 120px;
05     font-weight: bold;
06     position: relative;
07     -webkit-animation: shine 2s infinite;
08     -webkit-background-clip: text;
09     -webkit-background-size: 300px;
10 }
11 @-webkit-keyframes shine {
12     0% {
13         background-position: top left;
14     }
15     100% {
16         background-position: top right;
17     }
18 }

Effect #5 – CSS3 outlined text with text-stroke (Webkit)

You can easily add the nice flat outline to your text with using of -webkit-text-stroke:

1 #eff5 {
2     color: #00b506;
3     -webkit-text-stroke: 1px #000;
4 }

Effect #6 – CSS3 3D flip text with transform (rotateY)

You can flip the text with using transitions + transform (rotateY):

01 #eff6 {
02     color: #00b506;
03 }
04 #eff6 p {
05     color: #8A2BE2;
06     cursor: pointer;
07     display: inline-block;
08     -webkit-transition: .5s;
09     -moz-transition: .5s;
10     -o-transition: .5s;
11     transition: .5s;
12 }
13 #eff6 p:hover {
14     -webkit-transform: rotateY(-180deg);
15     -moz-transform: rotateY(-180deg);
16     -0-transform: rotateY(-180deg);
17     transform: rotateY(-180deg);
18     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2)
19 }
Live Demo

[sociallocker]

download the sources

[/sociallocker]

Conclusion

Today, we discussed how to create a variety of text effects using CSS3. I hope that you like our lesson, and if you want to share the article with your friends – we will be only happy.