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 ‘HTML’ Category

HTML cleanup tool & simplifier. For basic & clean HTML 🔧

Posted by jpluimers on 2021/10/21

I have used other on-line HTML cleanup tools in the past (especially for including parts of web-pages in a blog post), but so far none beats HTML Washer: [Wayback] HTML cleanup tool & simplifier. For basic & clean HTML 🔧

An online tool that reduces HTML to basic tags and attributes. Removes scripts, CSS, and other non-basic elements like , , etc… Also, corrects errors and formats the HTML doc or a fragment.

–jeroen

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

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 »

 
%d bloggers like this: