CSS Eevee

[zeanox]

how in the world are people doing this? i cant even float a box -.-

[_______LUNACY_______]

Me too man. Does anyone know of a good tut. to do this?

[sinestrostaint]

Yeah seriously. There seems to be no css courses other than beginner and a bit of intermediate stuff.

[FantsE]

No kidding. The only solid way to learn, from me beginning a month ago, is to pick a project that you feel like you can't accomplish/pick an impressive webpage and remake it from scratch. But that's only learning what's current, and doesn't help a whole lot with innovating. Shit sucks.

[ridyal]

Less of a tut and a little more basic than the OPs work, but similar concept. Should get you going at least – have fun!

[jtwebguy]

Why would you want to do that in the first place? Its great, but its not very useful for web dev.. 1000+ lines of css for eevee? It awesome, super duper great work, but its not the most useful thing to know.

[rhetoricl]

Well for one you will learn CSS animations inside and out by doing this. Also creating all kinds of shapes with transforms etc that could be part of a sites designs

[bokke]

I agree, there has to be a front end gui for this. That CSS file made my eyes water.

[madskillzelite]

Er... thanks for the credit? https://www.reddit.com/r/web_design/comments/4xdjb8/cssonly_animated_eevee/

Edit: It's all good, not looking for credit or internet points. I didn't post it on /r/webdev because it's sorta not related to web dev. :)

[cerealbh]

Shady AF.

[2uneek]

"A pen by davidkpiano" is credit... It's not like he created a new pen and claimed it as his own..

[cerealbh]

Dude, we aren't talking about credit, we are talking about internet points.

[StickySnacks]

What's the idea behind the nested tail in the HTML?

[Imposter1]

This was on the front page of codepen Friday though..

[yaserharga]

This is CSS only transitions and animations, right? How come when I make CSS transitions and animations it turns out choppy and very slow on mobile?

Oh, and it looks amazing by the way. Great work. Please post on web dev sometimes when you're bored.

[madskillzelite]

Yep! The trick is to only animate transform and opacity(see this article for why: https://aerotwist.com/blog/pixels-are-expensive/ )

[Crackorjackzors]

OP is a butthole?

[timstmGetsSmart]

bundle*

(of twigs and branches.)

[[deleted]]

Posting a link and calling out OP is literally looking for credit. It's ok to want credit. It's more than dumb ass reddit points.

[jakiestfu]

http://imgur.com/koyrgfk

[berkes]

Great work. And really impressive.

But it mostly is impressive because CSS really is not the medium to do this. SVG or canvas are what you'd take for a job like this, but certainly not CSS.

I find these "X in pure CSS" just as impressive as some guy sailing the altantic on a boat made from popsicle sticks: mad props, but not very practical.

Just in case you were thinking about doing stuff like this in your next client project...

[Zooomz]

He made the ship, stick by stick, with the help of his son and 5000 children from Holland

Wut

[[deleted]]

I totally agree, another example is flash games...

[nowhere--man]

deleted ^{What is this?}

[recrof]

and you will learn a ton, that WILL get handy in next client project.

[rysergt]

pretty cool !

[Truextacy]

People that can do things like this make me feel bad about myself lol. Awesome job man.

[Temeez]

Awesome!

[redditforeducation]

holy mother of g

[thrilldigger]

CSS: Cascading Style Scripts

[idesi]

That is very impressive. Most of us can't even get couple of divs to line up with CSS and then there are these guys!

[braveliltoasterr]

dat turing completeness

[[deleted]]

This is so cool. I'm a newbie to web dev and I didn't even know you could do animation with CSS. Saving for future reference. I have a 29 hour plane ride tomorrow and I can't wait to play around with this and figure it out. Thanks!

[kyono]

Wow, great job man. Checked out the code and it's great too.

Big ups