A rather geeky/technical weblog, est. 2001, by Bramus
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”
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 …
So when it comes to changing the size of a component [of a framework], for example making a Slider bigger for touch input, it might get tedious fiddling with all the widths/heights, border-radi.. etc. So how can we make it easier? Well, by sneaking a Trojan horse into your components and use it to control …
Continue reading “Sizing (Web) components by adding a Trojan horse into your CSS”
Wielding the tools from CSS and browser layout can enable stunning visualizations for web content. Using web features like CSS filters, WebGL, HTML5 video, SVG, canvas and evolving future tech like CSS Regions, CSS Shapes and CSS Custom Filters promises a hugely expanded creative landscape. National Geographic: Forest Giant (Demo) → Next Generation Web Layout: …