Sobeck: Opacity is useless here
Jaeschke: Just trying to wrap my brain around it ;
Barthel: So instead doing that – just put a dummy white rectangle above the text
Weld: And fade it with a linear background
Abramian: Lemondom: http://codepen.io/anon/pen/qOgreQ/
Rolla: I’m not that experienced. but wouldn’t putting a dummy white rectangle on top of the text. just still make it cut hard
Wireman: See this animation? I want to nowrap the word, and make the white box align accordingly
Farace: Http://codepen.io/danneniko/pen/wKOQNX
Peary: So the text is the background
Burgas: No, #container is the background
Polashek: And the overlaying white box. is gradiant ?
Fonner: Talking about my own issue ; . not yours
Likio: P3nnyw1se: in an ideal world you would just use this stack overflow thing – but only Chrome/webkit support it for now
Schurer: Can only handle 1 at a time
Rundell: Oh ok lol P3nnyw1se sry
Spataro: P3nnyw1se: but what is with other browsers.
Hardey: So – instead you use the other trick
Waack: It is not perfect, a trick, a workaround
Hockenbrock: I only need this to work on 1 browser and I don’t realy care which it is ;
Dys: And it is supported by all browsers
Mancine: P3nnyw1se: then do it for chrome
Blaich: P3nnyw1se: ok, read the stackoverflow then
Werstein: Http://stackoverflow.com/questions/15597167/css3-opacity-gradient
Shekey: Apply that on the text/content container
Tavera: And it won’t work with IE is that it ?
Russum: You said only 1 browser 😛
Shrimplin: Http://caniuse.com/#search=mask
Mench: So, no, no IE, no Edgelol
Blanchfield: Interesting, all others can do it apparently, at least the partial thing
Harbick: So IE will be the bad boy here
Maj: Well, you could use modernizr to detect support for that mask thing.
Eblen: And then you use the rectangle over text trick only for the IE/Edge combo
Kemner: And achieve the same _visual_ effect in all browsers
Traverso: Brajt: this is not progressive enhancement though :O
Belote: You could do it with pure css, pseudoelements
Perrish: I thought rectangle over text trick is using pseudoelements
Hawkinson: But only when modernizr whines about the mask thing
Tellez: Otherwise use the mask thing
Gilkey: The majority / real browsers support it anyway
Malicoat: Profpatsch the answer is “it depends”
Appert: So guys. lets just ***UME!:. I changed my mind and wanna use IE. and I just made a pseudo element. and positioned it using z-index correctly ontop of my other div.
Neiling: How do I gradiant the underlaying div into it ? :
Kurland: P3nnyw1se z-index? why?
Wigg: I don’t see any attribute that statically sets its size.
Splane: P3nnyw1se set element to relative, pseudoelement to absolute, set top 0 left 0 width 100% height 100% and simply apply background with linear-gradient
Starling: Okay thx, will change that then. do you also know how I would gradient this with the underlying element ? :
Tropea: And remember about pointer-events none if you want the text inside to be clickable
Karhoff: Profpatsch i’m watching football, can’t really dig through source code sorry
Pabelick: It would be nice if you could click on the size display in Chromium and see where it comes from.
Rasulo: I’d have to install Chromium for that to happen
Bartholemew: Nope sry. I dont get it, brajt . how do I apply the linear gradiant and make the underlying element half of it ? :