Learn the principles behind the interface
Build websites without code
Learn how to turn your design work into live websites with Webflow, a visual, no-code website builder.
Lea Verou · Jan 9, 2014
When a CSS animation is applied from the beginning of the page load, things are easy. You just use the animation property with appropriate parameters, and you’re done. However, what if the animation is applied on a certain state, e.g. :hover, :active, :focus or a JS-triggered class change? A naïve approach would be to.
Heydon Pickering · Nov 30, 2013
.test-button, .test-button-2 { cursor: pointer; border: 0; font-family: inherit; display: inline-block; margin: 1.5em auto; font-size: 1.5em; border-radius: 0; background-color: #802626; padding: 0.25em 1em; color: #fff; outline: 2px solid transparent; outline-offset: 50px; -webkit-transition: 1s ease all; -moz-transi.
Heydon Pickering · May 10, 2013
Please note: The following should be considered an experiment. There is rarely a good reason not to use a element for button-like controls, especially if it means loading a javascript resource just to polfill the behaviors that already offers. How many of the elements that users can click on in your web pages and appl.
Heydon Pickering · Mar 30, 2013
What if I told you there was a way to radically alter your web pages without using images, javascript, proprietary CSS3 or any extra markup? What if I told you you didn't have to be an experienced typographer, you could do it for little more than 6Kb and that it would work in Internet Explorer 7? For free? Welcome to.
Heydon Pickering · May 15, 2012
My 'Heydings Icons' font has been doing the rounds for some time now, and I am proud to have been one of the early innovators to release a completely free, embeddable icon font for web UI designers. However, until now I have singularly failed to promote the availability of Heydings Icons' companion font, 'Heydings Con.
Heydon Pickering · Dec 29, 2011
Rock and roll has always been a contrary form of music. At once 'the devil's music' and the soundtrack to the American Dream , it has leant itself to as much commercial dogma as rebellious transgression. Rock and roll is both savage and servile. It's sexual awakenings and automobile sales. This moral and ideological d.
Heydon Pickering · Oct 18, 2011
In a previous article , I addressed the many advantages of using a web font (in place of images) to render icons into your UI design. In the same article I mentioned a frustrating deficit of high quality, free icon web fonts available for embedding and conceded my own failure at building one with Fontstruct (less a fo.
Heydon Pickering · Sep 6, 2011
Update: Since writing this post, I was finally able to create a web font to my liking. You can read about it and download it in this subsequent article . Prefixing (or occasionally suffixing) hyperlinks with little icons can be helpful for qualifying the type of action the link offers the user. A classic example is th.
Heydon Pickering · Jul 11, 2011
Following my post regarding the SEO and accessibility issues invoked when using display:none , I am now going to address the text replacement scenario, since I believe this is the only situation where one would legitimately want to hide text from the unassisted visitor (reading visually ) but not from a screen reader.
Heydon Pickering · Jun 6, 2011
The display:none property is common and has may uses, as well as misuses. It's not always obvious what effect its use has on SEO and its impact on accessibility can be problematic. I hope this post helps to clarify the situation. Types of invisibility 'Display none' means exactly that. It removes the element (and its.
