You’re never too old to learn. Every time I work on a new website, I’m always finding and trying new things. I should probably document these more (mainly to help me remember them, ahem). So, let’s start now…
Details, just little details
<summary> elements as described here. Admittedly, this gives a relatively simple content toggle but it’s ideal for a FAQs section on a site. The simplicity wins for me.
I did a lot more work with Flexbox on a recent project. It’s great. That and Grid Layout means that the era of floats for layout is over. Hurrah for that!
Shaping up nicely
Yay! for triangle shapes using CSS and pseudo elements. Using a tool like this CSS triangle generator it’s easy to create triangles with CSS. Then, it’s possible to use these as list item bullet points by adding them to pseudo elements such as
li a::before or
li::before. See also this post.
I find it really useful to overlay a grid on my layouts when I’m building them. If I’m building a site from a designer’s static visuals, this also helps the designer compare the site build with their designs. This grid overlay article describes how to create a grid with CSS.
What’s the best way to position one element underneath another when they cannot share the same parent? I needed to positioning a banner image underneath an overlapping header/navigation element. I used
position:relative and e.g
top: -150px on the banner image. However, it left me wondering if CSS Grid Layout would be a better approach. I know that’s possible and I’ll try that next time.
- Gradient generator
- Box shadow generator
- Running site speed tests with Lighthouse in non-Chrome browsers using a bookmarklet
- Hero image generator by Sarah Edo
Most of the above were used on a single website project. It was a challenging and rewarding site to work on. I enjoyed it.
One more thing
in recent weeks, I’ve been reading posts from Modern CSS Solutions which is a great site exploring new CSS methods. The site has really re-invigorated my enthusiasm for CSS. Kudos to Stephanie Eckles for creating the site.
Right, that’s it for this post …..
See you next time.
20 Jul 2020 13:17:16Thanks Clive — have just implemented <details> on one of my sites!