

CSS text filling with water - lbebber
http://codepen.io/lbebber/pen/xrwja

======
0x0
Remove the css line with "@include background clip text" to reveal how it
works :)

~~~
nevster
Or open it in Firefox.

In other words, if you're a Firefox user, open it in Chrome to see the actual
effect.

~~~
rurounijones
Ooooh, 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
It still looks water-y in Firefox at least, hahah.

------
ChikkaChiChi
CSS: We'll add 800 edge-case animation effects but fuck you if you want
declarative center positioning.

~~~
aroman
This 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.

------
sdfjkl
background-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.

~~~
lambda
Some 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.

------
mfincham
Doesn't seem to work in Gecko based browsers :(

~~~
lbebber
Yeah, it's a pity. There's a workaround for use in production, though I'd have
to use an image instead of text.

~~~
voltagex_
Is it a bug that can be raised against Firefox/Gecko?

~~~
mcpherrinm
The bug is
[https://bugzilla.mozilla.org/show_bug.cgi?id=759568](https://bugzilla.mozilla.org/show_bug.cgi?id=759568)

------
mattbessey
DigitalOcean will love this haha

------
lbebber
I made a version that (should) work on most browsers now (though there's still
optimization to be made regarding CPU usage and whatnot).

------
neovive
Very cool! These demos remind me of the early days of Flash when everyone was
experimenting with the potential of animation on the web.

~~~
actionscripted
The 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. ;)

------
ttty
Already 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
I 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
Wow!! that's an insane amount of permissions required. What's all that for?

~~~
ttty
I'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.

~~~
goldenkey
'Bend over and unzip your pants - no rape will occur, __trust me __'

------
NamTaf
Firefox 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
I wonder if background-clip: text; could be used to power a syntax
highlighting engine on a simple textarea or contenteditable element?

------
habosa
I don't know nearly enough about CSS ... how does this work?

~~~
lbebber
It'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
It'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/)

------
adrianlmm
Does't work in IE11, the water overflow the text.

~~~
nej
Too much water lol

------
stefan_kendall
Left it open, and now my laptop fans are spinning and the laptop is hot.

~~~
lbebber
Hahah, there's that.

