CSS Sans – A pure CSS font

Re:CSS Sans – A pure CSS font by _7siz on Saturday March 14, 2015 @07:12PM (#9204596)

This is really well done and polished. Great stuff. About a year ago when I was bored, I made a quick and dirty codepen [1] of the exact same thing you have here. I added a transition to it so you can type to switch the letters.

I also made it so you can type with pure CSS letters [2]. It's nothing great like what you've done, but I'd thought I would share anyways.

[1] http://codepen.io/ncerminara/pen/yFcfn

[2] http://codepen.io/ncerminara/pen/cEbGC

[ Parent | on HN ]

Re:CSS Sans – A pure CSS font by xasos on Saturday March 14, 2015 @10:11PM (#9205075)

Woah the on keypress animations look awesome!

[ Parent | on HN ]

Re:CSS Sans – A pure CSS font by runeks on Tuesday March 17, 2015 @02:37PM (#9220232)

Very cool! FWIW, it feels more responsive to react on keydown rather than keyup, IMHO: http://codepen.io/runeks/pen/PwxdEm

[ Parent | on HN ]

Re:CSS Sans – A pure CSS font by cs- on Sunday March 15, 2015 @07:02AM (#9206076)

transitions are really nice, apply those to this font and you got something

[ Parent | on HN ]

Re:CSS Sans – A pure CSS font by shdon on Sunday March 15, 2015 @08:12AM (#9206215)

The non-webkit-transform is missing on the .t::before.

[ Parent | on HN ]

Re:CSS Sans – A pure CSS font by saidajigumi on Sunday March 15, 2015 @01:01PM (#9207158)

I've come to love autoprefixer[1] on a current project for just this reason. It's a CSS preprocessor that deals with prefixing and property syntax changes across browser versions. Usage:

    1. Write unprefixed CSS
    2. Tell autoprefixer what browser versions to support
    3. It adds the correctly prefixed properties for you

Interestingly, autoprefixer uses the property support data from caniuse.com to determine what prefixes to apply.

[1] More info and link to interactive demo at: https://github.com/postcss/autoprefixer

[ Parent | on HN ]