paultreny

CSS Swinging Panel Menu

A simple, clean pure CSS menu that uses keyframe animation to create a "swining panel" effect for sub nav. I am having trouble getting it to work in Opera but performs well in Chrome, Safari and Firefox (but getting a weird flicker). And, of course, doesn't work in IE but degrades well.

A Pen by Paul Reny on CodePen.

License.

paultreny

Star Wars opening crawl from 1977

I freaking love Star Wars, but could not find a web version of the original opening crawl from 1977. So I created this one.

I wrote an article where I explain how this works. Watch the Start Wars opening crawl on YouTube.

Stuff I used:

• CSS (animation, transform)
• HTML audio (the opening theme)

paultreny

Don't Overthink It Grids

Writeup on CSS-Tricks : http://css-tricks.com/dont-overthink-it-grids/

A Pen by Paul Reny on CodePen.

License.

paultreny

CSS3 text-shadow effects

A Pen by Paul Reny on CodePen.

License.

paultreny

:focus tooltip

Tooltips folding out on :focus of the input fields. Done with CSS3

A Pen by Paul Reny on CodePen.

License.

paultreny

Text input love

I wanted to play with some input styles that don't rely on hover, don't add clutter, show the label at all times, and show placeholder text when it is actually relevant.

A Pen by Paul Reny on CodePen.

License.

paultreny

Switches

The first 2 are designed with depth and lighting, while the 3rd one is flatly designed with a somewhat "gooey"-ish transition on it.

A Pen by Paul Reny on CodePen.

License.

paultreny

iOS 7 Blurred Header

Realtime blurring like in iOS 7, uses CSS blur, so your browser better support it.

A Pen by Paul Reny on CodePen.

License.

paultreny

Ladda

A UI concept which merges loading indicators into the action that invoked them.

A Pen by Paul Reny on CodePen.

License.

paultreny

SVG Animation

A Pen by Paul Reny on CodePen.

License.