Lodrigue: AimerPaddle, http://plnkr.co/edit/GdSvsH1I55fO0YoKcXnK?p=preview
Cordrey: Lodrigue: thank you so much!
Piepenburg: Swist: inset box-shadow
Schiaffino: So just to make sure I understand what you did… you set the column height to 100% and made it relative
Swist: Hapi, yeah i got that, but i’m having the hardest time replicating it exactly or close haha — trying to mimick it from illustrator and having a hard time.
Manring: Lodrigue: the translate part on the img is a little confusing to me
Greff: Swist, if you have photoshop cc, you can recreate there, and that able to copy the layer style as CSS property
Swist: Hapi, what about illustrator cc?
Swist: I have an .ai file and not sure how to bring the input from photoshop without flattening + rasterizing it
Hernon: Http://www.creativebloq.com/illustrator/extract-css-71412440
Witkowski: Any good workaround that would be similar to “overflow-x: visible; overflow-y: scroll”? in other words scrolling overlay that isn’t clipped to the container
Costales: Try it, i think you have good chance
Swist: Hapi, if this concept works i owe you a beer lmao
Seamons: Well, i got your word:
Athayde: Hi, I’m trying to crossfade while changing the src value of an img element Or something equivalent, changing the background doesn’t do it for me because the size of the element MUST be dependent of the size of the image, which is variable. Also, those are two SVG graphics, so layering is not an option as they are transparent.
Swist: Hapi, i tried it, but says background:#ffffff; or rgba255, 255, 255, 1 lol
Lodrigue: AimerPaddle, here is a siplified testcase: http://jsfiddle.net/q5pyu814/
Harklerode: Swist, then you try to reproduce in photoshop, im sure that able to export box-shadow as well
Volentine: Or, maybe will be easier with a generator like this http://www.cssmatic.com/box-shadow
Swist: Yeah i tried playing w the generator
Swist: It’s not easy to make 2 shadows in 1 or whichever
Swist: Oh well maybe i take a break and come back. it’s just a pesky shadow :
Esser: Lodrigue: so it just moves the element 50 percent of the container around it down and to the right?
Lodrigue: Note that, at the testcase the body is the position: reltive parent;
Lodrigue: AimerPaddle, this testcase is more representative: http://jsfiddle.net/q5pyu814/2/
Lodrigue: AimerPaddle, this is same layout with flex : http://jsfiddle.net/q5pyu814/3/
Lodrigue: But transform has better bowsercompatibility with vendor prefixes than flex
Lu: Lodrigue, the flex currently has better support 😀
Hemmeke: But both supported well on every major browser
Skrebes: Yeah i guess flex doesn’t have ie8
Pontremoli: Or ie9 and transform doesn’t have ie9
Baumgarter: Otherwise both support the rest of them
Niehaus: Http://caniuse.com/#search=flex
Kollen: Http://caniuse.com/#search=translate
Negreta: Hmm, shame z-index doesn’t override the overflow clipping mask
Heathershaw: Hapi: looks like we had the same idea haha
Broddy: Thanks for your help guys… much appreciated
Ciarletta: How would you make an a fill its parent
Sankaran: Other than width/height:100%
Ingraham: Width/height:inherit ?
Parone: Argh its still only the size of its inner contents
Timothy: Probably because a a defaults to display:inline and not display:inline-block
Mess: Ah, okay, display:block did it
Braaten: Http://jsfiddle.net/vg1hjycc/ . scrollable list with slide out rows, problem is that the items don’t actually slide out, they’re clipped to the parent; ideas?
Verjan: Anyone actually watching the channel?