Use CSS transitions to link Media Queries and JavaScript
With CSS transitionEnd events we can marry up media queries and JavaScript perfectly.
I’m Paul Hayes
I design and build websites that are a pleasure to use. I work at Last.fm and live by the sea in Brighton. I love to experiment with CSS, HTML and JavaScript. The best place to find me is on Twitter.
CSS Modal follow up
A cross browser modal box with CSS animations. Supported in IE7+ it’s now being used to add comments.
CSS Modal
Create a Modal window with :target, animation, transition and transform.
Creating a sphere with 3D CSS
Rotate and combine elements in 3D space to create an awesome sphere using CSS 3D transforms.
Thoughts on Responsive Enhancement
An exploration into truly responsive design using media queries.
CSS Tetrahedron
Use CSS to create triangles then arrange with 3D transforms to create a pyramid.
CSS 3D cube with touch gestures, click and drag
An updated 3D cube that comes with touch gestures and click ‘n’ drag.
Useful CSS snippets
A round up of CSS tricks I’ve recently used or discovered. Including an input type search reset.
A new look, and a new domain
Moving from fofronline.com to paulrhayes.com, with a sparkling new design to match.
Animated CSS3 cube using 3D transforms
Position elements with 3D transforms to build a cube and use transitions to rotate on keypress.
Accordion using only CSS
An animated accordion without JavaScript, using the :target pseudoclass.
Moving markup towards HTML5
A foray into marking up a blog with HTML5
3D Cube using 2D CSS transformations
Emulate 3D using 2D transforms to create a cube-like illusion.
Auto-scrolling Parallax Effect without JavaScript
Recreating the infamous parallax without scripting, using only CSS3.
Time for some CSS debate
Should CSS declare behaviour, or is this strictly the realm of JavaScript?
An analogue clock using only CSS
Use CSS transitions and transforms to rotate clock hands.