A rather geeky/technical weblog, est. 2001, by Bramus
Ahmad Shadeed digs into CSS Logical Properties The basic idea of CSS logical properties is that we won’t use physical directions in CSS properties. Instead, we will use properties that depend on the direction of the HTML document. Those properties are called logical properties. As I said before: Exciting stuff. This will have a huge …
outline-offset
In this demo Kevin Powell created some buttons that — so it seems — have animated borders. The trick however, is that it’s not the borders but the outline that’s being animated. See the Pen Animating outlines by Kevin (@kevinpowell) on CodePen.
blurhash-to-css
If you want to display Blurhash Placeholder Images on your site you need a JavaScript solution to do so. The blurhash-to-css package bypasses that, as it allows you to convert a Blurhash to a set of CSS properties that need to apply. import { blurhashToCss } from "blurhash-to-css"; const css = blurhashToCss( "eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" ); { …
Continue reading “Display a BlurHash using only CSS thanks to blurhash-to-css“
Crazy work by Jamie Coulter: Build your own 3D CSS and HTML models, export them to CodePen and share with the community. Simply Draw, Extrude, Paint and export! VoCSSels — Easily create 3D CSS & HTML Voxel Models → ❤️ Be sure to give his work a heart on CodePen there.
transition.css
transition.css is a handy stylesheet by Adam Argyle, full of transitions you can apply on your page. Simply import the stylesheet and set a transition-style attribute on the elements you wish to animate for the effect to kick in: <link rel="stylesheet" href="https://unpkg.com/transition-style" /> <div transition-style="in:wipe:up">👍</div> Not explicitly mentioned on the demo page (but is in …
Continue reading “Drop-in CSS transitions with transition.css“
@property and its Animating Powers
Over at CSS-Tricks Jhey Tompkins has written a solid piece on the amazing @property and the possibilities it opens: We can give the browser the information is needs to transition and animate those properties! Covered in the post, amongst many other interesting demos, are Jhey’s own Pure CSS Stopwatch and my own animated gradient border …
Continue reading “Exploring @property and its Animating Powers”
@scroll-timeline (Part 2)
For his post How to Map Mouse Position in CSS on CSS-Tricks, Amit Sheen created this lovely demo: The demo does use CSS Custom Properties for the X/Y position of the mouse, but they’re not injected using JavaScript. Instead, Amit uses the same technique as used in CSS-Only Direction Aware Hover: capture the hover on …
::before and ::after Pseudo-Elements
@scroll-timeline (Part 1)