Home

Page 2 of 13 - 65 posts

  • 2021-05-01

    List item span all the way

    Author

    Comments

    Start a discussion

    Here we have a list. It's not as straight forward as it seems to make the active list item be selected all the way to the left,

    The trick is to use a pseudo element that spans all the way out.

    Read more
  • 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