소개

아래와 같이 글자를 형광펜으로 칠한 듯한 효과를 주려면 어떻게 해야할까요?

아래와 같이 CSS를 추가하면 됩니다.

<span class="highlight-text">Applications will open in February&nbsp;2024 for three weeks.</span>
.highlight-text {
    background: linear-gradient(104deg, #ffd6b2 0%, #ffc089 100%);
    padding: 0px 0px;
    box-shadow: 1px 2px 0px #ffd6b2, -4px 2px 0px #ffc089;
    border-radius: 4px;
}

 

해설

  1. 백그라운드 색으로 주황색 계열의 선형 그라데이션을 칠합니다.

  2. 두 종류의 박스 그림자(box-shadow)를 추가합니다.
    • 첫 번째 박스 그림자(1px 2px 0px #ffd6b2)는 다음과 같은 형태입니다.

    • 두 번째 박스 그림자(-4px 2px 0px #ffc089)는 다음과 같은 형태입니다.

    • 두 박스 그림자가 합쳐지면(백그라운드는 없을 때) 다음과 같은 형태가 됩니다.
       
    • 참고) box-shadow
      box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

       

  3. 코너 곡선(border-radius) 값을 줘서 끝을 둥글게 만듭니다. 
    border-radius: 4px;

 

출처

문의 | 코멘트 또는 yoonbumtae@gmail.com


카테고리: WEB: Frontend


0개의 댓글

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다.