A rather geeky/technical weblog, est. 2001, by Bramus
With the introduction of CSS Shapes into the web, wrapping content in custom non-rectangular shapes, and recreating print designs and layouts on the web becomes a piece of cake! In this article we’re going to go over the basics of declaring shapes, and creating some simple layouts using these new CSS technologies. Creating Non-Rectangular Layouts …
Continue reading “Creating Non-Rectangular Layouts with CSS Shapes”
A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view. Check out this Pen! Note that the event handler is not debounced as we need …
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 …
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 …
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 …
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”
position:sticky; polyfillCSS 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”