Author: Jens Törnell

Page 2 of 13 - 64 posts

  • 2021-04-01

    Invert icons on hover

    Author

    Comments

    Start a discussion

    Hover the icon below and it will be inverted to white. The trick is to use filter: invert(1);.

    HTML

    <figure>
      <img src="http://csspoo.com/assets/images/remixicons/link.svg">
    </figure>

    CSS

    figure {
      display: inline-block;
      padding: 1rem;
      background: #eee;
    }
    
    figure img {
      filter: invert(1);
      vertical-align: top;
    }
    
    figure:hover {
      background: #000;
    }
    
    figure:hover img {
      filter: invert(0);
    }
    Read more
  • 2021-03-01

    Ordered nested list counters

    Author

    Comments

    Start a discussion

    The list numbers are automatically generated.

    <ol>
      <li>Primary 1
        <ol>
          <li>Sub 1</li>
          <li>Sub 2</li>
        </ol>
      </li>
      <li>Primary 2
        <ol>
          <li>Sub 1</li>
          <li>Sub 2</li>
        </ol>
      </li>
    </ol>
    ol {
      counter-reset: section;
      list-style-type: none;
      padding: 0;
    }
    
    li::before {
      counter-increment: section;
      content: counters(section, ".") " ";
      color: #aaa;
      width: 2rem;
      display: inline-block;
    }
    Read more
  • 2021-02-14

    Shadow around multiple elements

    Author

    Comments

    Start a discussion

    The css property box-shadow is not optimal in all situations. For example, when creating a speach bubble, a box shadow will only apply to the box, not the arrow.

    To make both the box and the arrow have the same shadow you can use:

    filter: drop-shadow(.1rem .1rem .1rem rgba(0,0,0,.5));

    Read more
  • 2021-02-01

    Darken image without pseudo element

    Author

    Comments

    Start a discussion

    In the demo below I use mix-blend-mode: multiple;.

    HTML

    <figure>
      <img src="https://csspoo.com/images/s.jpg">
    </figure>

    CSS

    figure {
      background-color: #888;
      width: 150px;
      display: flex;
    }
    
    img {
      mix-blend-mode: multiply;
      width: 100%;
    }
    
    img:hover {
      mix-blend-mode: normal;
    }
    Read more