A rather geeky/technical weblog, est. 2001, by Bramus
Michael Scharnagl: I am currently building a book section for this site and thought it would be cool to show the books in 3D and also to make it visible how many pages a book has. In this article I would like to show you how to use CSS custom properties to adapt the thickness …
Continue reading “Make the page count of a 3D book visible using CSS Custom Properties”
Ana Tudor recently shared a trick on how to make an image partially greyscale: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes. background: url(cat) 50%/ cover, linear-gradient(-45deg, transparent 50%, grey 0);background-blend-mode: luminosity Many variations possible. — Ana Tudor 🐯 (@anatudor) January 20, 2021 …
Continue reading “Animated Greyscale to Color Image Reveal Effect”
Recently, Stephanie Eckles sent out a call to revive the use of CSS border-image. Not to use it with images — which requires a pretty nasty syntax — but to create Gradient Borders in CSS. 🎉 Time to revive an old CSS property! When `border-image` was announced, I was off-put b/c the syntax was so …
:focus-visible Is Here
With Chromium 86 and now recently Firefox 85 supporting :focus-visible, it’s a good time to refer to this post by Matthias Ott: The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. You use :focus-visible …
Ahmad recently encountered an issue where a CSS Grid column grew too large: .wrapper { display: grid; grid-template-columns: [main] 1fr [aside] 16em; grid-gap: 2em; } The main column has a 1fr value. That means it will take the available space minus the sidebar and the gap. However, the minimum content size of a grid item …
:not(:focus):not(:placeholder-shown):invalid, not :invalid
The built-in browser form validation mechanism can be frustrating as it will mark fields invalid while still entering text. Using only CSS this can be circumvented, so that validations happen afterwards.
Ooh I like this demo, making clever use of position: sticky;: See the Pen Sticky Photostack by Bennett Feely (@bennettfeely) on CodePen. There’s also some clever sizing going on in there to create the whitespace around the images, avoiding the need for a wrapper div per photo. img { width: 100vmin; height: 100vmin; transform: scale(0.6) …
Nice demo by Jhey: See the Pen 3D CSS Birthday Card (Tap to open! 👇) by Jhey (@jh3y) on CodePen. Contains a little bit of JavaScript to make the card respond your mouse movement and to play the audio. The opening/closing of the card and the confetti are done using only CSS.
Mads Stoumann, writing for CSS-Tricks, starts off with a simple idea: set a Custom Property to either playing or paused to control animation-play-state. [data-animation] { /* … */ animation-play-state: var(–animps, running); } /* Use a checkbox to pause animations */ [data-animation-pause]:checked ~ [data-animation] { –animps: paused; } But one of the listed use cases is …
Continue reading “How to Play and Pause CSS Animations with CSS Custom Properties”
clip-path
Ahmad Shadeed is at it again, this time covering CSS clip-path. In this article, I aim to provide you with a clear explanation of how clip-path works in detail when to use it, and how you can use it today in your web development projects. Are you ready? Let’s dive in. As per usual: tons …