はてなブックマーク

Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment 12 Feb 2012: Modal experiment updated for Firefox 10 which has better transform, transition and animation performance. Also supports 3D transforms. In this experiment, clicking an ‘open’ link pops up a di

An accordion effect can be achieved using CSS3’s :target pseudo-class, without requiring JavaScript. Using the proprietary -webkit-transition property this accordion can also be animated. Result CSS3 Accordion Works in browsers that support the :target pseudo-class, see the Quirks Mode compatibility tables. Animation works in recent WebKit based browsers. 12 Feb 2012: Experiment updated. Transitio

Last week WebKit included the much anticipated (at least on my part) 3D transforms in its latest nightly build, announced practically alongside the awesome Snow Stack demo that provides a 3D interface for browsing Flickr images (use left, right and space-bar). Today the Surfin Safari blog has updated with some more exciting demos, including Morphin Power Cubes and Poster Circle. It is now possible

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Posts DALL·E, disability, and diversity 3 August 2022 Illustrating a case study with AI – When things got silly for Millie 1 August 2022 Keeping a design history 29 September 2020 Plastic Free July 1 August 2019 Improving accessibility with accessibility acceptance criteria 24 January 2018 A greener Christmas 1 January 2018 Going green 12 February 2017 Migrating a GOV.UK format to a new frontend 2

Top cube face The top face is nested in an extra div tag to give correct rotation of skewed rectangle. This face is also scaled, so the font size has been reduced to accommodate. Left cube face Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est l

The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object. Currently only supported in recent WebKit and Gecko based browsers, most importantly Firefox 3.5+ -moz-transform (document

Here’s another quick CSS3/WebKit transitions project in the controversial realm of CSS animation. This time I have opted to recreate the popular parallax effect using multiple background images on a single element and the -webkit-transition property. I have based this on Chris Coyier’s parallax tutorial, reusing the star images with permission, the technique itself was coined by Paul Annett (expla

Having read the blurb around Safari’s CSS transitions I opted to familiarize myself with a quick project — the aim of which was to create a functional, CSS only, analogue clock. Result Experiment: CSS Analogue Clock Experiment works in Safari 4 Beta and Google Chrome. A working clock that optionally resorts to JavaScript to grab the current time (can be achieved by other means). 12 Feb 2012: Exper