Cheers!
I am a newbie in CSS/HTML, but I want to apply a gradient over a text, like that on the image below. How can I implement it with css?
The relevant CSS is on the pseudoelement :after
of the <article>
wrapper I used
article { position: relative; } article:after { position: absolute; bottom: 0; height: 100%; width: 100%; content: ""; background: linear-gradient(to top, rgba(255,255,255, 1) 20%, rgba(255,255,255, 0) 80% ); pointer-events: none; /* so the text is still selectable */ }
<article> <p> Had you stepped on board the Pequod at a certain juncture of this post-mortemizing of the whale; and had you strolled forward nigh the windlass, pretty sure am I that you would have scanned with no small curiosity a very strange, enigmatical object, which you would have seen there, lying along lengthwise in the lee scuppers. Had you stepped on board the Pequod at a certain juncture of this post-mortemizing of the whale; and had you strolled forward nigh the windlass, pretty sure am I that you would have scanned with no small curiosity a very strange, enigmatical object, which you would have seen there, lying along lengthwise in the lee scuppers. </p> </article>
CSS3 text gradients that is only supported by Webkit based browsers like Chrome and Safari. I have used 3 different methods. check this fiddle first http://jsfiddle.net/sarfarazdesigner/pvU7r/ Try this
.article{
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
this is working fine in chrome don't know how other browser react. Reference taken from http://css-tricks.com/snippets/css/gradient-text/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.