CSS: 글자를 형광펜으로 칠한 듯한 효과 주기

소개

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

아래와 같이 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;

 

출처

• https://developer.apple.com/swift-student-challenge/