CSS3 Text effects

Wrote a lot of pages, but in the actual use of the text effect of the place is still very few, the most is to add Text-shadow shadow effect text.

Today, while browsing the Web page found a set of text effects, although very simple but you let me write I must not write, so studied for a while, wrote a few small style.

First, the text gradient

The main styles are

Linear-gradient (text gradient direction, specified color, gradient color gradient start position)

Text-fill-color (fill color for specified text) PS: If used with color, will overwrite color

<style>

@-webkit-keyframes BGP {
0% {background-position:0 0;}
100% {background-position:-100% 0;}
}
. text{
-webkit-mask-image:linear-gradient (to right, red, orange, yellow, green, cyan, blue, purple);
Background-image:-webkit-linear-gradient (left, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, ye Llow, orange, red);
Background-image:-o-linear-gradient (left, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, Orange, red);
Background-image:linear-gradient (to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow , orange, red);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-background-size:200% 100%;
ANIMATION:BGP 5s infinite linear;
}

</style>

Two, skeleton text

<style>

. stroke{
-webkit-text-fill-color:transparent;
-WEBKIT-TEXT-STROKE:1PX Red;
font-size:75px;
}

</style>

Three, the reflection of the text

<style>

. reffect{
font-size:50px;
text-shadow:5px 5px 5px #eee;
-webkit-box-reflect:below 0-webkit-linear-gradient (transparent,transparent 50%,rgba (255,255,255,.3));
}

</style>

CSS3 Text effects