Nice demo of a pure CSS Crossword Puzzle, built using CSS Grid. Be sure to check out the validation rules too, they’re built using the General Sibling Selector (e.g. ~): #item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ .crossword-board–highlight .crossword-board__item-highlight–across-1 { opacity: 1; } UPDATE 2017.06.22: There’s a blogpost available, describing …
Tag Archives: css
Typical display: flow-root; use case
Good display: flow-root; use case by Paul Bakaus: flow-root establishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image. In the image above you can see that the …
Styling React Components with “Glamorous 💄”
Glamorous 💄 is a styled-components 💅 and jsxstyle inspired solution for styling ⚛ React Components. It allows you to do stuff like this: // Create a <Title> react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em const Title = glamorous.h1({ fontSize: '1.5em', textAlign: 'center', color: 'palevioletred', }) // Create …
Continue reading “Styling React Components with “Glamorous 💄””
Learn to work the CSS Grid with Griddy
CSS Grid Template Builder
Grid Garden – A game for learning CSS Grid Layout
Vortex with CSS Variables
Fading text with CSS Blend Modes
Mocking Individual CSS Transform Functions using CSS Variables
In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale by falling back to their default values. This will change when the “CSS Transform Module …
Continue reading “Mocking Individual CSS Transform Functions using CSS Variables”
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline …
Continue reading “Deep dive CSS: font metrics, line-height and vertical-align“