Home

Page 3 of 13 - 64 posts

  • 2020-12-01

    Line through headings

    Author

    Comments

    Start a discussion

    For this to be short and sweet, grid is used.

    HTML

    <h2>A headline</h2>

    CSS

    h2 {
        display: grid;
        width: 100%;
        align-items: center;
        text-align: center;
        grid-template-columns: minmax(1rem, 1fr) auto minmax(1rem, 1fr);
        grid-gap: 1rem;
        color: #333;
    }
    
    h2:before,
    h2:after {
        content: '';
        height: 2px;
    }
    
    h2:before {
      background-image: linear-gradient(to right, #fff 0%, #aaa 100%);
    }
    
    h2:after {
      background-image: linear-gradient(to left, #fff 0%, #aaa 100%);
    }
    Read more
  • 2020-10-14

    CSS only modal

    Author

    Comments

    Start a discussion

    It's possible to make a pure CSS modal. In this case we use an anchor trick.

    A downside to use CSS is that you can't click on the background to close the modal.

    Read more
  • 2020-10-01

    Author

    Comments

    Start a discussion

    It may be tempting to use outline-offset.

    Unfortunately outline does not work with border radius, so you need a ::before element.

    Read more