Home

Page 2 of 13 - 62 posts

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