By randomly changing the opacity and adding a little text-shadow, one can create this old typewriter effect: Makes good use of currentColor for the shadow, so it can be applied on any coloured text. Old Typewriter Text Effect → 💁♂️ Don’t confuse this effect with a typing carousel which types the letters one-by-one.
Tag Archives: css
CSS Grid Demo: “Kandinsky zum 60. Geburtstag”
Nice work by Tatiana Mac, in which she recreated “Kandinsky zum 60. Geburtstag” by Herbert Bayer using CSS Grid. For comparison, here’s the original: Kandinsky Geburstag Invite on CodePen →
The State of CSS 2019
Despite being over 20 years old, there’s signs that CSS might be going through the same tumultuous teenage years that JavaScript just went through. Flexbox! Grid! CSS-in-JS! In 2019, CSS is finally dyeing its hair pink and getting a tattoo just like it’s always secretly wanted. Parenting books won’t help much with this one, but […]
Relearn CSS layout with “Every Layout”
As just announced (on stage) at CSS Day by Heydon himself: If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. […]
Reducing motion with the <picture> element
Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element <picture> <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> <img src="animated.gif alt="brick wall" /> </picture> Yes, that actually works! Reducing motion with the <picture> element → 💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables
Indicating focus to improve accessibility
Great article by Hidde. It totally rhymes with my Building Better Forms™ by not taking away affordances post. It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use. Indicating focus […]
Creating Pixel Art with CSS
Using box-shadow, it’s possible to create a pixels on screen: See the Pen Pixel Art 3: Side-by-Side Box-Shadow by Jacque (@jschrag) on CodePen. As you can define multiple box-shadow entries – comma-separated – it’s possible to draw multiple pixels on screen … Creating Pixel Art with CSS →
CSS Grid Level 2: Subgrid
Good news! Firefox 69 will support subgrid. As Rachel Andrew explains: In terms of new syntax, and new things to learn, this is a very small change for web developers who have learned grid layout. A grid defined as a subgrid is pretty much the same as a regular nested grid, albeit with its own […]
Optimize Rendering with CSS Containment
The folks at Igalia has been recently working on the implementation of CSS Containment in Chromium – which already shipped in Chrome 52, back in 2016 – by providing some fixes and optimizations based on the standard. Their post forms a nice intro on the subject: The main goal of CSS Containment standard is to […]
CSS Grid Generator
Sarah Drasner (@sarah_edo), now at Netlify, created a handy tool to visually create CSS Grid Layouts. Handy if you’re not all to familiar with it, yet. CSS Grid Generator →CSS Grid Generator Source (GitHub) →