New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

under construction man in pure CSS #99

Closed
paulirish opened this Issue Oct 3, 2012 · 36 comments

Comments

Projects
None yet
@paulirish
Member

paulirish commented Oct 3, 2012

Awww shuga yeah..

This is a classic piece of the web. But we really need to upgrade him to the modern day. I'm talking a pure CSS version of this.

Using keyframe animations. That means browser support is a fresh "IE10, Opera 12, Chrome, Safari 5, Firefox".

This is for a large web-wide project which currently is in a veil of secrecy, but it won't be for long.

In order to incorporate it well, we don't have much time so this project has a quick deadline of tomorrow EOD (basically 6pm PST).


If you're interested in creating this, chime in below with a codepen, jsfiddle, cssdeck work in progress link.

Cheers and thanks

@darcyclarke

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Oct 3, 2012

Member

Will get to work...

Member

darcyclarke commented Oct 3, 2012

Will get to work...

@akmurray

This comment has been minimized.

Show comment
Hide comment
@akmurray

akmurray Oct 3, 2012

Looking forward to seeing this...

akmurray commented Oct 3, 2012

Looking forward to seeing this...

@joshnh

This comment has been minimized.

Show comment
Hide comment
@joshnh

joshnh Oct 3, 2012

Working on this now!

joshnh commented Oct 3, 2012

Working on this now!

@darcyclarke

This comment has been minimized.

Show comment
Hide comment
Member

darcyclarke commented Oct 3, 2012

@zakkain

This comment has been minimized.

Show comment
Hide comment
@zakkain

zakkain Oct 3, 2012

That is tight! Cannot wait for you wizards to pull it off.

zakkain commented Oct 3, 2012

That is tight! Cannot wait for you wizards to pull it off.

@darcyclarke

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Oct 3, 2012

Member

Again, some testing for the background: http://jsfiddle.net/darcyclarke/PgUv8/19/

Member

darcyclarke commented Oct 3, 2012

Again, some testing for the background: http://jsfiddle.net/darcyclarke/PgUv8/19/

@roman01la

This comment has been minimized.

Show comment
Hide comment
@roman01la

roman01la Oct 3, 2012

Too lazy to code it, but here's a tip: the pic is 266x266px, each pixel of the pic is 7x7px. Now the image is 38x38 picpx. Use single 7x7 div and tons of box-shadows. Maybe some JS can help to generate the background shape.

roman01la commented Oct 3, 2012

Too lazy to code it, but here's a tip: the pic is 266x266px, each pixel of the pic is 7x7px. Now the image is 38x38 picpx. Use single 7x7 div and tons of box-shadows. Maybe some JS can help to generate the background shape.

@darcyclarke

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Oct 3, 2012

Member

Coming together now, using calc (-webkit prefixed only at the moment): http://jsfiddle.net/darcyclarke/PgUv8/32/

Member

darcyclarke commented Oct 3, 2012

Coming together now, using calc (-webkit prefixed only at the moment): http://jsfiddle.net/darcyclarke/PgUv8/32/

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Oct 3, 2012

Member

I tried using image-rendering: optimize-contrast (via) .. in order to fake the pixel scaling but it only works on images and canvases. Otherwise it woulda been really nice to just turn and scale it with 2d transforms.

Member

paulirish commented Oct 3, 2012

I tried using image-rendering: optimize-contrast (via) .. in order to fake the pixel scaling but it only works on images and canvases. Otherwise it woulda been really nice to just turn and scale it with 2d transforms.

@saxamaphone69

This comment has been minimized.

Show comment
Hide comment
@saxamaphone69

saxamaphone69 Oct 3, 2012

I like how you're doing it @joshnh I got to the second row and then realised it would be better to not do it in pixels. Oops.

http://codepen.io/saxamaphone69/pen/ljhwH

What I have so far, but don't think I'll get around to finishing it.

saxamaphone69 commented Oct 3, 2012

I like how you're doing it @joshnh I got to the second row and then realised it would be better to not do it in pixels. Oops.

http://codepen.io/saxamaphone69/pen/ljhwH

What I have so far, but don't think I'll get around to finishing it.

@bennettfeely

This comment has been minimized.

Show comment
Hide comment
@bennettfeely

bennettfeely Oct 3, 2012

Attempting solution using box-shadow... there must be a better way http://codepen.io/bfeelyweb/pen/BLypv

bennettfeely commented Oct 3, 2012

Attempting solution using box-shadow... there must be a better way http://codepen.io/bfeelyweb/pen/BLypv

@akmurray

This comment has been minimized.

Show comment
Hide comment
@akmurray

akmurray Oct 3, 2012

Done: http://jsfiddle.net/wYBmD/9/
It is brute force and runs extra slow in jsfiddle. Quicker when running locally.
Also seems like overkill to have 300KB of css for a 4KB gif...this isn't exactly fulfilling the promise of a brighter future :)

Edit: I didn't realize that the original link would go to the first version...so I guess y'all missed the updates.
http://jsfiddle.net/wYBmD/9/

akmurray commented Oct 3, 2012

Done: http://jsfiddle.net/wYBmD/9/
It is brute force and runs extra slow in jsfiddle. Quicker when running locally.
Also seems like overkill to have 300KB of css for a 4KB gif...this isn't exactly fulfilling the promise of a brighter future :)

Edit: I didn't realize that the original link would go to the first version...so I guess y'all missed the updates.
http://jsfiddle.net/wYBmD/9/

@jonathantneal

This comment has been minimized.

Show comment
Hide comment
@jonathantneal

jonathantneal Oct 3, 2012

Member

I was messing around with this approach, hadn't consolidated elements via :before :after. http://codepen.io/anon/pen/ukGad

Member

jonathantneal commented Oct 3, 2012

I was messing around with this approach, hadn't consolidated elements via :before :after. http://codepen.io/anon/pen/ukGad

@HTMLbyJoe

This comment has been minimized.

Show comment
Hide comment
@HTMLbyJoe

HTMLbyJoe Oct 3, 2012

I believe my method is closest to the original GIF. It even works in IE8! Where's my trophy? :p

HTMLbyJoe commented Oct 3, 2012

I believe my method is closest to the original GIF. It even works in IE8! Where's my trophy? :p

@akmurray

This comment has been minimized.

Show comment
Hide comment
@akmurray

akmurray commented Oct 3, 2012

LOL @JoeAnzalone nice man.

@joshnh

This comment has been minimized.

Show comment
Hide comment
@joshnh

joshnh Oct 3, 2012

Alright, seems to be working perfectly in modern browsers: http://codepen.io/joshnh/pen/ohbHl

The amount of box-shadows is incredible, but it does only use a single element.

joshnh commented Oct 3, 2012

Alright, seems to be working perfectly in modern browsers: http://codepen.io/joshnh/pen/ohbHl

The amount of box-shadows is incredible, but it does only use a single element.

@patrickkettner

This comment has been minimized.

Show comment
Hide comment
@patrickkettner

patrickkettner commented Oct 3, 2012

@joshnh wow. bravo.

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Oct 3, 2012

Member

mr chris coyier pointed me to this tool: http://kushagragour.in/lab/picssel-art/ makes pixel art in CSS

Member

paulirish commented Oct 3, 2012

mr chris coyier pointed me to this tool: http://kushagragour.in/lab/picssel-art/ makes pixel art in CSS

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Oct 3, 2012

Member

holy shit @joshnh. nice work!

Member

paulirish commented Oct 3, 2012

holy shit @joshnh. nice work!

@joshnh

This comment has been minimized.

Show comment
Hide comment
@joshnh

joshnh Oct 3, 2012

@paulirish I first tried this: http://codepen.io/blazeeboy/pen/bCaLE but it wasn't working well enough.

Also, I wrote an article on this very thing recently: http://joshnh.com/2012/08/16/drawing-things-with-box-shadow/

</self promotion>

joshnh commented Oct 3, 2012

@paulirish I first tried this: http://codepen.io/blazeeboy/pen/bCaLE but it wasn't working well enough.

Also, I wrote an article on this very thing recently: http://joshnh.com/2012/08/16/drawing-things-with-box-shadow/

</self promotion>

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Oct 3, 2012

Member

Hah. @joshnh's CSS (with prefix-free) after css minification: a WHOPPING 60k.

... but after gzip: a mere 3k.

🙆

Member

paulirish commented Oct 3, 2012

Hah. @joshnh's CSS (with prefix-free) after css minification: a WHOPPING 60k.

... but after gzip: a mere 3k.

🙆

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Oct 3, 2012

Member

@akmurray nice one. i wonder why it runs so slowly.

Member

paulirish commented Oct 3, 2012

@akmurray nice one. i wonder why it runs so slowly.

@akmurray

This comment has been minimized.

Show comment
Hide comment
@akmurray

akmurray Oct 3, 2012

Seems to run fine once it loads up. Could be the prefixes? I have all but opera in there which makes it a fatty.

On Oct 2, 2012, at 10:29 PM, Paul Irish notifications@github.com wrote:

@akmurray nice one. i wonder why it runs so slowly.


Reply to this email directly or view it on GitHub.

akmurray commented Oct 3, 2012

Seems to run fine once it loads up. Could be the prefixes? I have all but opera in there which makes it a fatty.

On Oct 2, 2012, at 10:29 PM, Paul Irish notifications@github.com wrote:

@akmurray nice one. i wonder why it runs so slowly.


Reply to this email directly or view it on GitHub.

@samarkandiy

This comment has been minimized.

Show comment
Hide comment
@samarkandiy

samarkandiy Oct 3, 2012

@joshnh Nice work, looks great dude!

samarkandiy commented Oct 3, 2012

@joshnh Nice work, looks great dude!

@joshnh

This comment has been minimized.

Show comment
Hide comment
@joshnh

joshnh Oct 3, 2012

@paulirish I have streamlined the code (thanks to a suggestion from Jason Delia) and the size has been reduced significantly. The background colour of the sign is now controlled by a single property.

Also, for those that weren't aware, the pixel size is easily adjustable; it is based entirely on the font-size of the .construction element.

http://codepen.io/joshnh/pen/ohbHl

joshnh commented Oct 3, 2012

@paulirish I have streamlined the code (thanks to a suggestion from Jason Delia) and the size has been reduced significantly. The background colour of the sign is now controlled by a single property.

Also, for those that weren't aware, the pixel size is easily adjustable; it is based entirely on the font-size of the .construction element.

http://codepen.io/joshnh/pen/ohbHl

@redclov3r

This comment has been minimized.

Show comment
Hide comment
@redclov3r

redclov3r Oct 3, 2012

@joshnh Great work! I moved the shared pixels of every frame into the :before pseudo-element. That saves another ~600 lines of keyframes.

http://codepen.io/redclov3r/pen/bloIh

(could be even more effective, because I actually only did it for shared lines)

redclov3r commented Oct 3, 2012

@joshnh Great work! I moved the shared pixels of every frame into the :before pseudo-element. That saves another ~600 lines of keyframes.

http://codepen.io/redclov3r/pen/bloIh

(could be even more effective, because I actually only did it for shared lines)

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish
Member

paulirish commented Oct 3, 2012

@paulirish paulirish closed this Oct 3, 2012

@hkdobrev

This comment has been minimized.

Show comment
Hide comment
@hkdobrev

hkdobrev Oct 3, 2012

@paulirish Joshnh's method is not working in the latest version of Chrome for Android. But JoeAnzelone's does!

hkdobrev commented Oct 3, 2012

@paulirish Joshnh's method is not working in the latest version of Chrome for Android. But JoeAnzelone's does!

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 3, 2012

Joshnh's method does work in in the mobile version of Firefox though.

ghost commented Oct 3, 2012

Joshnh's method does work in in the mobile version of Firefox though.

@hkdobrev

This comment has been minimized.

Show comment
Hide comment
@hkdobrev

hkdobrev Oct 3, 2012

@paulirish I also like that @JoeAnzalone method is working on older browsers.

hkdobrev commented Oct 3, 2012

@paulirish I also like that @JoeAnzalone method is working on older browsers.

@LaurentGoderre

This comment has been minimized.

Show comment
Hide comment
@LaurentGoderre

LaurentGoderre Oct 3, 2012

Will this be accompanied by text because CSS images don't have text alternative?

LaurentGoderre commented Oct 3, 2012

Will this be accompanied by text because CSS images don't have text alternative?

@simoncla

This comment has been minimized.

Show comment
Hide comment
@simoncla

simoncla Oct 3, 2012

The bug with it not working in chrome for mobile is no colour set on the box-shadow and it doesn't seem to have a default.

simoncla commented Oct 3, 2012

The bug with it not working in chrome for mobile is no colour set on the box-shadow and it doesn't seem to have a default.

@tabatkins

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Oct 3, 2012

That's because the default color of box-shadows was actually undefined for a while, until we caught it about 6 months ago and defined it to to be currentColor. (It's not specified quite that way in the draft right now, because we were changing the definition of currentColor as well, and hadn't yet finished.)

tabatkins commented Oct 3, 2012

That's because the default color of box-shadows was actually undefined for a while, until we caught it about 6 months ago and defined it to to be currentColor. (It's not specified quite that way in the draft right now, because we were changing the definition of currentColor as well, and hadn't yet finished.)

@simoncla

This comment has been minimized.

Show comment
Hide comment
@simoncla

simoncla Oct 3, 2012

Awww that makes sense then, how come that sort of problem only exists on chrome mobile and not chrome in general?

simoncla commented Oct 3, 2012

Awww that makes sense then, how come that sort of problem only exists on chrome mobile and not chrome in general?

@tabatkins

This comment has been minimized.

Show comment
Hide comment
@tabatkins

tabatkins Oct 3, 2012

Because we've fixed it in WebKit trunk, but mobile Chrome is currently lagging several versions behind desktop. (It'll be caught up soon!)

tabatkins commented Oct 3, 2012

Because we've fixed it in WebKit trunk, but mobile Chrome is currently lagging several versions behind desktop. (It'll be caught up soon!)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment