The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2,482 other followers

Naughty naughty no alt: CSS style to clearly show which images lack an alt-text

Posted by jpluimers on 2021/10/05

The CSS from [WayBack/Archive.is] Naughty naughty no alt that shows the below red moving rendering of images that do not have an alt-text is simple:

  <style>
    body {
      margin: 5vw;
    }

    img {
      max-width: 25vw;
      margin: 1vw;
      box-sizing: border-box;
    }
    img:not([alt]) {
      border: 2px solid red;
      animation: pulse 1.2s ease infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1) rotate(0);
      }
      25% {
        transform: scale(1.3) rotate(15deg);
        filter: blur(2px);
        opacity: 0.8;
        box-shadow: 0 0 2vw 2vw red;
      }
      50% {
        transform: scale(1) rotate(0);
        filter: none;
      }
      75% {
        transform: scale(1.3) rotate(-15deg);
        filter: blur(5px);
        opacity: 0.8;
        box-shadow: 0 0 2vw 2vw red;
      }
      100% {
        transform: scale(1) rotate(0);
      }
    }
  </style>

Less intrusive CSS fragements are

img:not([alt]) {
  filter: blur(5px);
}

and

img:not([alt]) {
  border: 5px solid red;
}

Via:

–jeroen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

 
%d bloggers like this: