Menu
I have noticed in my many years of web design that CSS's box shadow is enormously expensive with resources and causes many old phones to lag severely; but is that is the case with text-shadow? When is it okay to use text-shadow, and how is it rendered?
532
With CSS3 you can create two types of shadows: text-shadow (adds shadow to text) and box-shadow (adds shadow to other elements).
A negative horizontal length value places the shadow to the left of the text. Specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.
they achieve different things. but as an advantage with filter:drop-shadow you can generate shadow around irregular shapes or images, whereas box-shadows generates a rectangular shadow. as you can see , with drop-shadow the pseudo-element also has a shadow around it, whereas with box-shadow it does not.
Each shadow is specified as two or three <length> values, followed optionally by a <color> value. The first two <length> values are the <offset-x> and <offset-y> values. The third, optional, <length> value is the <blur-radius> . The <color> value is the shadow's color.
CSS's box shadow is enormously expensive with resources and causes many old phones to lag severely; but is that is the case with text-shadow?
I guess the short answer is yes: text-shadow is expensive for the same reasons box-shadow is.
It looks like this article confirms that text-shadow can cause performance issues: http://codeincomplete.com/posts/2011/8/11/noglow/.
There is also this question that seems related and has an accepted answer: text-shadow (and other css3) causes scroll lag.
When is it okay to use text-shadow
I guess this depends on your audience and wether they have powerful enough hardware.
…and how is it rendered?
This seems to ask for implementation details which are probably browser/platform-specific, …and probably irrelevant to the question for the most part. :)
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
