Chosen is a library for making long, unwieldy select boxes more user friendly. Also supports changing a multiple select list into a tag-style list, and doesn’t break keyboard functionality. Chosen →
Ambition
At the heart of this film is Rosetta, ESA’s real mission to rendezvous with, escort and land on a comet. A mission that began as a dream, but that after decades of planning, construction and flight through the Solar System, has arrived at its goal. Its aim? To unlock the secrets hidden within the icy …
ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and …
Continue reading “ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages”
scrollReveal.js – Easily reveal elements as they enter the viewport
<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute …
Continue reading “scrollReveal.js – Easily reveal elements as they enter the viewport”
RAW – The missing link between spreadsheets and vector graphics
Beautiful Maps
Flexbox Cheatsheet Cheatsheet
I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet…based on cheatsheets. (That’s only an extract, shown above) Flexbox Cheatsheet Cheatsheet →
Axiomatic CSS and Lobotomized Owls
Heydon Pickering: Despite its irreverent name and precarious form, the lobotomized owl selector is no mere thought experiment for me. It is the result of ongoing experimentation into automating the layout of flow content. The owl selector is an “axiomatic” selector with a voracious purview. As such, many will be hesitant to use it, and …
The end of apps as we know it
The idea of having a screen full of icons, representing independent apps, that need to be opened to experience them, is making less and less sense. The idea that these apps sit in the background, pushing content into a central experience, is making more and more sense. That central experience may be something that looks …
Vertical centering is impossible in CSS lol!
JS Bin Great JSBin by Jake Archibald, showcasing 4 ways to vertically center elements in CSS. Technique 2 has my preference: .technique-2 { position: absolute; height: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } The great thing about CSS transforms is that the percentages are referenced to the element’s width/height