80s Typography in CSS

http://codepen.io/boldfacedesign/details/EoGgD

by benoitg • 12 years ago

117 25 12 years ago

mhurron• 12 years ago

Actually your site works just fine without javascript once I get rid of that annoying 'this site does not work without javascript' message.

Edit: the site. Honestly I meant 'your' as in the site owner. I'm just annoyed by sites that block their content that loaded just fine because I'm not running javascript.

milesokeefe• 12 years ago

OP didn't create codepen, chriscoyier did.

ChuckMcM• 12 years ago

Nicely done, that desert chrome takes me back. I can almost hear the disco.

joshferg• 12 years ago

love it

sergiotapia• 12 years ago

Incredibly slow scrolling on my 32GB DD3 RAM, SSD, i7 3770K desktop PC. Using Chrome latest, windows 8.1

Why?

Edit: Doesn't even work on Firefox latest, IE latest.

techwizrd• 12 years ago

It works fine for me on nightly Firefox on Linux.

rmrfrmrf• 12 years ago

Might be a Windows issue; Firefox on Mavericks is working swimmingly.

anigbrowl• 12 years ago

Mine's OK with an i5 and half that amount of ram, although it's not perfectly smooth. OpenGL in software maybe?

jeorgun• 12 years ago

I'm getting similarly horrible performance on Chromium what-I-assume-is-latest (32.0.1700.107) on Arch Linux; Firefox has no performance issues but doesn't actually render all of the CSS being showcased.

barrkel• 12 years ago

Worked smoothly in Chrome 31[1], on 32GB i7 3770K w/ GTX 680 graphics.

Upgraded to Chrome 32, noticed different scroll bars, and now it's jerky when scrolling.

Looks like a Chrome regression.

[1] I disable all 3 auto-update mechanisms Google uses on Windows: HKCU\..\Run, Task Scheduler tasks and gupdate* services. It's almost like a virus.

djs070• 12 years ago

Crashed chrome on iOS7

jbeja• 12 years ago

Cool!

sbarre• 12 years ago

The sparkle animation on Future Cop is pretty great

amiramir• 12 years ago

I was hoping for something a la Neville Brody/The Face. https://en.wikipedia.org/wiki/Neville_Brody

bbx• 12 years ago

This little CSS experiment is usually the kind of irrelevant demonstration that is commonly frowned upon because it has no practical use.

But no matter how apparently futile this showcase can appear, it's still inherently valid because it maintains a clean separation between content (which in this case comprises 14 lines of HTML) and its representation (provided by its CSS styling).

I won't use it but I will learn from it.

lexandstuff• 12 years ago

Who would frown upon such an awesome demonstration?

oscargrouch• 12 years ago

The awful HN crowd

coldtea• 12 years ago

This little CSS experiment is usually the kind of irrelevant demonstration that is commonly frowned upon because it has no practical use.

How does this not have a practical use? This isn't "I designed Twitter's icon with CSS", this is actual text styles.

Anybody doing an 80's style project, for example, could use those.

1000hz• 12 years ago

This is pretty rad. I especially love the scanlines on VECTRO. I saw there was supposed to be an animation on it, but it was commented out so I forked it a little and started tinkering. Here's my attempt at CRT nostalgia:

http://codepen.io/anon/pen/lnCch

themodelplumber• 12 years ago

Whoa, that's even better than I thought it would be. Thanks.

aestra• 12 years ago

Completely screwed up on my mobile browser (Dolphin).

Tloewald• 12 years ago

More like 70's panel van art.

80s typography is probably best exemplified by Neville Brody. Process colors were rarely used (owing to expense) so it tended to rely on a lot of very dramatic and grungy layouts and spot colors.

Look up "Neville Brody" and "The Face".

80s Typography in CSS

Related Stories