A rather geeky/technical weblog, est. 2001, by Bramus
: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 …
Adam Argyle, writing for web.dev: In today’s GUI challenge we create a responsive, accessible slide out side navigation user experience using CSS and JS. The sidenav works on multiple browsers, screen sizes and input devices. Rad right? Follow as we employ grid, transforms, pseudo classes and a dollop of JavaScript to handle this UX. On …
Remember that HTML Tags Memory Test from before? Šime Vidas recently joked that a similar Memory Test but for CSS Properties should exist. Of course I couldn’t resist, so here is the CSS Properties Memory Test 🤪 See the Pen CSS Properties Memory Test by Bramus (@bramus) on CodePen. In total there are 653 properties …
Good little collection of tips for creating responsible (= responsive + accessible) web applications by Joy Heron. With modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software development, I have learned some HTML and CSS tips and tricks, and I want to present …
Two part series by Stephanie Eckles on CSS Selectors In this two-part mini-series, we’ll explore some of the more advanced CSS selectors, and examples of when to use them. Even if you’re doing frontend but not primarily writing CSS you should learn these, along with the basic CSS vocabulary. This knowledge will allow you read …
Last summer Kilian Valkhof did a wonderful write-up on the Polypane blog covering CSS Media Queries. Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and …