Skip to content

Author Archives: Paul Hayes

CSS Modal

Cre­ate a Modal win­dow with :tar­get, ani­ma­tion, tran­si­tion and transform.

Creating a sphere with 3D CSS

Rotate and com­bine ele­ments in 3D space to cre­ate an awe­some sphere using CSS 3D transforms.

Thoughts on Responsive Enhancement

An explo­ration into truly respon­sive design using media queries.

CSS Tetrahedron

Use CSS to cre­ate tri­an­gles then arrange with 3D trans­forms to cre­ate a pyramid.

CSS 3D cube with touch gestures, click and drag

An updated 3D cube that comes with touch ges­tures and click ‘n’ drag.

Useful CSS snippets

A round up of CSS tricks I’ve recently used or dis­cov­ered. Includ­ing an input type search reset.

A new look, and a new domain

Mov­ing from fofron​line​.com to paulrhayes​.com, with a sparkling new design to match.

Posted in Design | Comments Off

Animated CSS3 cube using 3D transforms

Posi­tion ele­ments with 3D trans­forms to build a cube and use tran­si­tions to rotate on keypress.

Accordion using only CSS

An ani­mated accor­dion with­out JavaScript, using the :tar­get pseudoclass.

Moving markup towards HTML5

A foray into mark­ing up a blog with HTML5

3D Cube using 2D CSS transformations

Emu­late 3D using 2D trans­forms to cre­ate a cube-like illusion.

Auto-scrolling Parallax Effect without JavaScript

Recre­at­ing the infa­mous par­al­lax with­out script­ing, using only CSS3.

Time for some CSS debate

Should CSS declare behav­iour, or is this strictly the realm of JavaScript?

An analogue clock using only CSS

Use CSS tran­si­tions and trans­forms to rotate clock hands.