Excellent demo by Rachel Andrew: Using CSS Grid Layout and a touch of flexbox to build a more forgiving hero image block that can cope with additional content or additional boxes. CSS Grid: Multiple image hero block (CodePen) → Related: A Complete Guide to CSS Grid Layout →
Tag Archives: css
Feature Detection in CSS (CSS @supports)
There’s a good introduction to @supports on Mozilla Hacks: With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. Progressive enhancement in it’s finest form: /* fallback code …
Pure CSS Twitter Heart Animation
Ana Tudor has recreated the Twitter Heart Animation in pure CSS: See the Pen no sprite, no JS heart animation – click it! by Ana Tudor (@thebabydino) on CodePen. Easy to follow step-by-step instructions in the original post. The most surprising part – to me – is that the particles are rendered using box-shadow. Recreating …
You don’t need JavaScript
CSS is powerful, you can do a lot of things without JavaScript. A quite commonly known example is usage of the Adjacent Sibling Selector (viz. +) to build custom radio buttons/checkboxes or tab interfaces. See the Pen CSS Custom Checkboxes / Radio Buttons by Bramus! (@bramus) on CodePen. With a few more CSS tricks such as …
Is Houdini ready yet‽
“Is Houdini ready yet‽” is a dedicated page to tracking the status of Houdini. But what is Houdini? Here’s a snippet from Smashing Magazine: Imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. …
AOS – Animate on Scroll
AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down. By setting data-aos-* attributes on your HTML elements, you can define which animation to use, what timing to use, etc. …
CSS Only Scroll Indicator
There’s a pen embedded in this post. Visit this post on the Bram.us website, or see the Pen CSS only scroll indicator on CodePen. I was interested to see if I could make a scroll indicator with just CSS. You can! But maybe you shouldn’t. This is an interesting consequence of a bunch of hacks …
CSS vs. SVG Gradient Angle
CSS Code Review by Jonathan Snook
Some time last week Brad Frost asked on Twitter for some feedback on a bit of markup he had built: Hey web forms and BEM aficionados, anyone care to review some form markup I've been writing? https://t.co/SyACn1LZ9s — Brad Frost (@brad_frost) July 15, 2016 Jonathan Snook took the time to give Brad some feedback, which …
CSS at BBC Sport
The core CSS architecture of BBC Sport is based around three key tools: BEM OOCSS ITCSS The combination of these three tools, a long with a clear set of principles was worked really well for us. Next to those techniques, they also follow a few CSS Principles – such as the “Single Responsibility Principle” for …