How to apply stroke and fill color to text?

1.	How to apply stroke and fill color to text?
Answer» The will-CHANGE property inform the browser which properties are expected to change via css or by javascript HTML <a class='DEMO' href='#'>Demo url</a> CSS .demo { transition: opacity .2s; opacity: 1; font-family: Arial, Helvetica, Sans-serif; font-size: 35px; font-weight: bold; color: black; } .demo:hover { will-change: opacity; } .demo:active { opacity: .2; } DEMO: The ANCHOR will appear as below. With the css declaration .demo:hover the browser has been informed in advance that opacity will change and set up optimizations in advance. And when the hyperlink is clicked, the TEXT will have 20% opacity during the transition.

Answer»

The will-CHANGE property inform the browser which properties are expected to change via css or by javascript

HTML

CSS

.demo { transition: opacity .2s; opacity: 1; font-family: Arial, Helvetica, Sans-serif; font-size: 35px; font-weight: bold; color: black; } .demo:hover { will-change: opacity; } .demo:active { opacity: .2; }

DEMO:

The ANCHOR will appear as below. With the css declaration .demo:hover the browser has been informed in advance that opacity will change and set up optimizations in advance.
And when the hyperlink is clicked, the TEXT will have 20% opacity during the transition.

Discussion

No Comment Found

Related InterviewSolutions

Explain the rule set in CSS?
What is specificity?
Explain Gradients in CSS?
Mention types of selectors?
What are pseudo-elements? Explain with an example.
What are CSS combinators?
<div id="outer"> <div id="inner"></div> </div>
Write the style to display inner div in center for the below HTML code?
How to draw a triangle using CSS?
body { margin: 0; font-family: Arial; background-color: #f2f2f2; } .box { color: #fff; padding: 1em; text-align: center; background-color: #efefef; } .a { background-color: purple; } .b { background-color: violet; } .c { background-color: burlywood; } .d { background-color: gainsboro; } .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100vh; }