Tags » css

• 

  Creating a “simple” three-up image layout in CSS

  A step-by-step breakdown of how I made a one-left, two-right layout for my images.

• A flash of light in the darkness

  If you’re using an image as your background, remember to set a fallback colour as well, especially if you’re in dark mode.

• TIL: How do you write ratios in the aspect-ratio property?

  When you define an aspect ratio as x/y, you can only use numbers for x and y.

• An unexpected lesson in CSS stacking contexts

  While trying to add some simple overlay labels, I stumbled into a sharp edge of a complex CSS feature called “stacking contexts”.

• TIL: Create an animated placeholder box with CSS

• TIL: There are limits on the styles you can apply with :visited

  Because the :visited selector will tell you whether somebody has been to a URL, browsers limit what styles you can apply to such links – to prevent somebody nefarious stealing your browsing history.

• TIL: Drawing a diagonal banner over the corner of an image

• TIL: Making an “under construction” element in pure CSS

  Using a repeating-linear-gradient as the border gets you something that looks a bit like hazard tape.

• Two examples of hover styles on images

  When I hover over an image, I can add a border to a link, or change the colours of an SVG icon.

• TIL: Create solid-colour image placeholders to show before an image loads

• TIL: How to embed an inline SVG in a CSS rule

  Modern browsers allow you to embed the SVG almost as-is, with just a couple of characters that need escaping – no base64 required!

• TIL: How to create a footer that’s always at the bottom of the page

• TIL: How to style a <details> element differently depending on whether it’s open or closed

• Prevent accidentally copying the prompt character in console code snippets

  When I include console commands in a blog post, I don’t want somebody to accidentally copy the command prompt. CSS lets me avoid that.