A rather geeky/technical weblog, est. 2001, by Bramus
min(), max(), clamp() in CSS
Ahmad takes a look into the CSS min(), max(), and clamp() functions. As with all his articles, he also provides some practical use cases and examples. Regarding the clamping of the font-size of a page, you don’t really need clamp(): This is how to accessibly set a viewport relative scaling `font-size` with a min AND …
Continue reading “Everything I Learned About min(), max(), clamp() in CSS”
100vh in Safari on iOS
Update 2021.07.08: There are new viewport units on the way that will finally solve this issue. 100dvh is the one you’re looking for. When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for …
UPDATE 2020.10.22: Masonry Layout founds its home in the CSS Grid Module Level 3 Draft Spec! A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal. 🤔 Masonry Layout? Masonry …
Continue reading “CSS Grid Layout Module Level 2: Masonry Layout”
Fun pen by Jakob Eriksen in which he combines Emoji and CSS Custom Properties to create an Emoji Customizer. The reason that this works is because of the fact that emoji can have modifiers. Skin Tone and Hair, as used in the demo above, are such modifiers. Using the ZWJ (“\u200d”) you can glue all …
Continue reading “Emoji Customizer created with CSS Variables”
The CSS Color Module Level 4 spec introduces a new way to define colors in CSS: Space-Separated Functional Color Notations. Start using them today!
Will Boyd digs into the user-select CSS property: CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in! His posts includes a very nice hack to make user-select: all; work only at …
In The Quest for the Perfect Dark Mode, Joshua W Comeau extensively explains how he has implemented the Dark Mode Toggle on his Gatsby-powered website. It follows the system’s light/dark mode preference, but also allows for an override which he persists in localStorage. The flow to decide if Dark Mode should be used or not …
Continue reading “The Quest for the Perfect Dark Mode Toggle, using Vanilla JavaScript”
Robin Rendle writing for CSS-Tricks, on leveraging Variable Fonts when implementing a Dark Mode: Oddly enough, these two bits of text [shown above] are actually using the same font-weight value of 400. But to my eye, the white text looks extra bold on a black background. How do we fix this? Well, this is where …
98.css is a CSS library for building interfaces that look like Windows 98. 😂 98.css → UPDATE 2020.04.28: Jordan Scale, the author of the library, has done a write-up on 98.css.
The key property for the parallex effect itself is the perspective set on the .parallax-wrapper, in combination with the height and object-fit: cover; set on its containing img element. The shadow is injected using ::after ⚠️ Doesn’t seem to work in Safari …