1
To accomplish a pure CSS text gradient we will need to introduce you to -webkit-mask-image. Becuase this method for creating text gradients isn't an actual CSS property so we will we will be using several other CSS properties to accomplish it. There are several reasons to use this method instead of images, but most important reason is because it's cool. Actually we would not suggest this method simply because of compatibility reasons, but if you do decide to use it you will be happy to know that it degrades gracefully in all browsers. The following is an example of the text gradient technique:
- [h1][span]Text Gradient[/span][/h1]
- h1 span {
- color: #666;
- -webkit-mask-image: -webkit-gradient
(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(80%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
- }
You will notice the use of -webkit-mask-image. -webkit-mask accepts a variety of inputs, including images. In this case we will be tricking the selector to use the -webkit-gradient value as a mask. Because we cannot use the CSS gradients property on the text directly we have to get crafty and use the RGBa properties. By using the RGBa property we are able to make part of the top text layer transparent. The next step will be to the second color.
h1:after{
content : 'Text Gradient';
color: #fff;
}
To get our second color and we use the CSS pseudo-selector ":after" and the CSS "content" property to place the second colored version of text gradient in the markup. The second color in this case is white and now we can stack our two colors to create the gradient text effect. It should be noted that in this case we could have chosen not to use the pseudo-selector because our page background is white.
Leave a comment and and get an answer. If we don't answer it we're sure someone can. As a Western web design company in Shenzhen, China, we understand how important it is to have a strong development community behind you and we believe it is just as important to contribute to that community. So please leave a comment or send us an email if you have any questions.
Let's get into contact so you learn more about us and we can create solutions for you!