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,483 other followers

Archive for the ‘CSS’ Category

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

Read the rest of this entry »

Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

html – CSS Display an Image Resized and Cropped – Stack Overflow

Posted by jpluimers on 2021/08/25

[WayBack] html – CSS Display an Image Resized and Cropped – Stack Overflow (thanks [WayBack] roborourke!); see full answer link for runnable snippet and HTML (the WordPress editor keeps fucking up preformatted code blocks with html or XML in it).

You could use a combination of both methods eg.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

You embed the img in a div with class .crop, or in-line the styles in the img and div tags.

–jeroen

 

Posted in CSS, Development, HTML, HTML5, SocialMedia, Software Development, Web Development, WordPress, WordPress | Leave a Comment »

html – How can I scale the content of an iframe? – Stack Overflow

Posted by jpluimers on 2021/08/19

I used [WayBack] html – How can I scale the content of an iframe? – Stack Overflow as starting point to scale some iframes.

In my case, I had to scale up (by a 25% so a factor 1.25) instead of scale down.

What I observed so far in recent Chrome versions is:

  1. The wrapping div is still needed, otherwise the outer size and inner size of the frame mismatches
  2. The wrapping div and the wrapped iframe need to have the same dimensions (so unlike the Stack Overflow answers, no need to scale the width/height of the div; keep the same values as the iframe)

The div uses class calendar_wrap.

The iframe uses class calendar_iframe.

This is part of my CSS:

body {
      margin: 0; /* override browser setting for body `margin: 8px;` */
      overflow: hidden; /* remove scroll bars; does not work for iframes  */
    }

    /* ... */

    iframe {
      border-width: 0; /* override browser setting for iframe `border-width: 2px; */
      height: 100vh;
      width:   50vw;
      overflow: hidden; /* remove scroll bars; does not work for iframes  */
    }

     /* wrap and iframe zoom as per https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe */
    .calendar_wrap {
      float: left;

      height: 70vh;
      width:  35vw; /* calc(35vw / 1.25); */

      padding: 0;
      background-color: blue;
    }

    .calendar_iframe {
      float: left;

      width:  35vw;

      -ms-transform: scale(1.25);
      -moz-transform: scale(1.25);
      -o-transform: scale(1.25);
      -webkit-transform: scale(1.25);
      transform: scale(1.25);

      -ms-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    /* ... */

–jeroen

Posted in Chrome, CSS, Development, HTML, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

css color picker – Google Search

Posted by jpluimers on 2021/08/12

Probably old, but there is an embedded [WayBack] css color picker – Google Search that on each refresh switches colours:

–jeroen

Posted in Color (software development), CSS, Development, Google, GoogleSearch, HTML, Power User, Software Development, Web Development | Leave a Comment »

Simple iframe clock via Free Clocks for Your Website

Posted by jpluimers on 2021/08/11

Using [WayBack] Free Clocks for Your Website, I created this clock for a 1920×1080 web dashboard which is a web page hosted on [WayBack] raw.githack.com with an iframe hosted at www.timeanddate.com

I know that is a risk, but that is OK for now: that site has existed for a very long time and probably will last a while.

There is a truckload of options you can use, despite the clock being simple. Luckily the [WayBack] FAQ: Free Clocks for Your Website explains these options.

This is the gist of the above “this clock” page:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
body {
margin: 0; /* override browser setting for body `margin: 8px;` */
overflow: hidden; /* remove scroll bars; does not work for iframes */
}
.box {
float: left;
width: 100vw; /* Firefox/Chrome outside Mac OS X: force viewport-width */
overflow: hidden; /* remove scroll bars; does not work for iframes */
background-color: azure;
}
iframe {
border-width: 0; /* override browser setting for iframe `border-width: 2px; */
height: 100vh;
width: 50vw;
}
.clock_iframe {
float: right;
height: 30vh;
width: 16vw;
}
</style>
<title>Clock in frame</title>
</head>
<body>
<div class="box">
<iframe class="clock_iframe" src="https://freesecure.timeanddate.com/clock/i6xvy9ve/n16/szw300/szh300/hoc000/cf100/hgr0/fiv0/fas34/fdi74/mqv0/mhc000/mhs3/mhl20/mhw1/mhd84/mmv0/hhs1/hms1/hsc000/hss1" frameborder="0" width="300" height="300">
<!– https://www.timeanddate.com/clocks/free.html –>
</iframe>
</div
</body>
</html>

–jeroen

Posted in CSS, Development, HTML, Power User, Software Development, Web Development | Leave a Comment »

 
%d bloggers like this: