14 ms·
CSS text filling with water
- mattbessey 13y agoDigitalOcean will love this haha
- 0x0 13y agoRemove the css line with "@include background clip text" to reveal how it works :)
- nevster 13y agoOr open it in Firefox. In other words, if you're a Firefox user, open it in Chrome to see the actual effect.
- rurounijones 13y agoOoooh, I thought it looked quite good in Firefox... now I see it wasn't what I was supposed to be seeing. Looked at it in chrome, very cool.
- lbebber 13y agoIt still looks water-y in Firefox at least, hahah.
- adam74 13y agoHere I am looking for sine waves in the code. I need to think simpler.
- habosa 13y agoI don't know nearly enough about CSS ... how does this work?
- lbebber 13y agoIt's a wavey background masked by the text, that loops scrolling horizontally, and increases in height to show loading progress. It uses the background-clip:text property that is not very widely supported, though.
- bzbarsky 13y agoIt's not only not widely supported, it's also totally nonstandard. It's nowhere in http://dev.w3.org/csswg/css-backgrounds/ http://dev.w3.org/csswg/css-backgrounds/ or in http://dev.w3.org/csswg/css-backgrounds-4/ http://dev.w3.org/csswg/css-backgrounds-4/
- mfincham 13y agoDoesn't seem to work in Gecko based browsers :(
- lbebber 13y agoYeah, it's a pity. There's a workaround for use in production, though I'd have to use an image instead of text.
- voltagex_ 13y agoIs it a bug that can be raised against Firefox/Gecko?
- mcpherrinm 13y agoThe bug is https://bugzilla.mozilla.org/show_bug.cgi?id=759568 https://bugzilla.mozilla.org/show_bug.cgi?id=759568
- stefan_kendall 13y agoLeft it open, and now my laptop fans are spinning and the laptop is hot.
- lbebber 13y agoHahah, there's that.
- ttty 13y agoAlready in my game loading screen! XD Just some tweaks to include the game name + small loading text. Also added easing and alternate to wave-animation. https://apps.facebook.com/lines-up/ https://apps.facebook.com/lines-up/ Thanks!
- elisee 13y agoI would try it out but is there any reason you're requesting so many permissions? That's scary. http://i.imgur.com/X62OVLt.png http://i.imgur.com/X62OVLt.png
- yesplorer 13y agoWow!! that's an insane amount of permissions required. What's all that for?
- ttty 13y agoI'm asking for all permissions available.. I think it might help in the future when I need something like matching.. I don't know. For now is only using the friends name and online status, if I remeber well.
- lbebber 13y agoI made a version that (should) work on most browsers now (though there's still optimization to be made regarding CPU usage and whatnot).
- NamTaf 13y agoFirefox 25 and chrome 30.0.1599.101 m are both sitting there on the 'loading' text showing nothing. I left each for a couple of minutes and no dice. Win7 x64.
- gunn 13y agoI wonder if background-clip: text; could be used to power a syntax highlighting engine on a simple textarea or contenteditable element?
- neovive 13y agoVery cool! These demos remind me of the early days of Flash when everyone was experimenting with the potential of animation on the web.
- actionscripted 13y agoThe current wave of CSS3 effects are very much akin to the early days of Flash. Oftentimes it's a superfluous effect that hampers readability or usability, and I sincerely hope some lessons were learned from the Flash heyday. Just because you can move your content in 3D, add transitions and effects -- all in browser-native rules -- doesn't mean you should. I'm on a pretty beefy Macbook most of the time and there are a lot of simple-looking sites that are almost impossible to use because of the slow-down from their page effects. The scrolling behavior from parallax or fixed effects really seem to be the worst. If you want to see the next wave of CSS effects, just check out one of the old copypasta providers like DynamicDrive or FlashKit. ;)
- deleted 13y ago[deleted]
- adrianlmm 13y agoDoes't work in IE11, the water overflow the text.
- nej 13y agoToo much water lol
- sdfjkl 13y agobackground-clip? Sometimes I think CSS has gone a bit too far. Sure, at first it was wholly insufficient, but now it seems to have gone overboard the other way, sprouting too many obscure features, with greatly varying support between implementations to boot.
- iLoch 13y agoYeah, fuck having options! Is there SaaS that will let me ship my website in the form of a newspaper to my customers so they don't have to endure my fancy styles?
- lbebber 13y agoWhile I agree that CSS does go too far at times, I don't think this is one of them.
- lambda 13y agoSome people want these effects. Without them, the choice is to write it all by hand using canvas, or use animated gifs or Flash or something. Sure, there are varying levels of support of the most bleeding edge features, but browsers are catching up with each other all the time. For real world sites, you use what's widely available, which corresponds to the gee-whiz demos from 5 years ago (give or take, and depending on how many truly obsolete users you need to support). So yeah, this isn't really all that useful outside of a gee-whiz demo now, but in a few years all of the major browsers will support it and people can use it. This kind of effect is most likely to be used in a game that has a large asset library to load, but the underlying functionality can be useful in a variety of designs.
- ChikkaChiChi 13y agoCSS: We'll add 800 edge-case animation effects but fuck you if you want declarative center positioning.
- aroman 13y agoThis is pretty much how I feel most of the time. It often seems like simple things are hard and hard things are simple, and even after years and lots of different projects, I still end up playing "guess-and-check" with complicated centering stuff.
- lbebber 13y agoHahahah, very true.
- lambda 13y agoActually, they're working on both. Flexbox[1] and grid layout for better layout, CSS animation for animation and effects. Flexbox is usable in the latest versions of most browsers today[2]. Here's an example of declarative centering: http://jsfiddle.net/ac4ug/ http://jsfiddle.net/ac4ug/ [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi... [2]: http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox