Check out this Pen! In this project I will build a 3D model of the Macintosh Plus and display it in a three dimensional setting. Using CSS Keyframe animation we’ll make it move on screen to show off the 3D effect better. Great explanatory post on how to actually make this kind of stuff. Touches …
Tag Archives: css
Type Scale
High Performance Animations
Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop …
Cargo Cult CSS
Case against the modularization of CSS: Cargo Cult CSS: Selectors should communicate useful information to developers. The purpose is the same but a contextual selector is far more informative to the developer than a class selector, as it communicates context. It’s a lot easier to understand the purpose behind a rule if the selector tells …
ionicons
CSS Animations: Using animation-fill-mode
Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. …
Continue reading “CSS Animations: Using animation-fill-mode”
Fixed-sticky: a CSS position:sticky; polyfill
CSS position: sticky; is really in its infancy in terms of browser support. In stock browsers, it is currently only available in iOS 6. In Chrome it is locked behind a chrome://flags setting. Fixed-sticky is a polyfill to enabling this in browsers that don’t support it yet. position: sticky; is one very handy addition to …
Continue reading “Fixed-sticky: a CSS position:sticky; polyfill”
Auto-hiding scrollbars in IE10
Live filter using CSS selectors
Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript. Clever use of data-* attributes. A shame though the title of the original post, namely Client-side full-text search in CSS, is poorly chosen though, as it’s …