HTML 및 CSS의 퀴어 아이 텍스트 효과

Queer Eye의 에피소드가 충분하지 않습니다.

😭

다음 시즌이 방영될 때까지 저를 붙잡아두기 위해 로고를 다시 방문하여 HTML과 CSS로 다시 만들 수 있는지 확인하고 싶었습니다.

로고

로고 효과에는 알아내야 할 몇 가지 다른 요소가 있습니다.

글꼴 일치

색상 고르기

색상 오프셋

글꼴

사용된 글꼴은 맞춤 산세리프 글꼴일 가능성이 높습니다. 흥미로운 점은 e가 스타일상 소문자e이고 Q가 대문자라는 것입니다. 하지만 시각적으로 같은 굵기, 획 굵기 등을 가지고 있습니다. 어울리는 무료 글꼴을 찾는 것이 어려울 수 있으므로 일단은 같은 분위기의 서체를 찾는 데 집중하겠습니다.

Google Fonts의 Kumbh Sans은 제가 원하는 현대적인 모양을 가지고 있으므로 가능한 한 나중에 e를 수정하겠습니다. <h1> 태그에 "QE"가 있으면 CSS는 다음과 같이 표시됩니다.

h1 {
     font-family: 'Kumbh Sans', sans-serif;
     font-weight: 300;
}

이와 같은 것을 렌더링합니다.

그림 물감

위의 로고를 보면 파란색, 분홍색, 노란색, 검은색으로 이루어진 것 같고, 노란색과 파란색은 약간의 투명도가 있어 밝은 녹색을 만든다.

색상을 CSS 변수로 설정해 보겠습니다.

 :root {
     --blue: rgb(0, 191, 255);
     --pink: rgb(255, 20, 147);
     --yellow: rgb(255, 255, 0);
     --black: rgb(0,0,0);
 }

색상 변수를 사용하면 다음과 같이 참조할 수 있습니다color: --var(yellow) .

색상 오프셋

재미있는 부분!

각 색상은 본문에서 약간 오프셋되지만 왼쪽과 오른쪽에만 있습니다. text-shadow를 사용하여 이 효과를 얻을 수 있습니다.

첫 번째 색상을 만들어 봅시다.

h1 {
     ...
     text-shadow: 5vw 0 var(--pink);
}

이제 다른 색상을 위해.

여러 효과text-shadow를 쉼표로 구분하여 한 번에 지정할 수 있습니다.

나머지 색상을 추가하고 어떻게 보이는지 봅시다.

h1 {
     ...
     text-shadow: 
          5vw 0 var(--pink), 
          10vw 0 var(--blue), 
          15vw 0 var(--yellow);
}

트리피.

우리가 원하는 효과는 아니지만 점점 가까워지고 있습니다. text-shadow 인수를 약간 조정하여 너무 멀리 벗어나지 않고 검정색 텍스트의 왼쪽과 오른쪽으로 이동합니다.

기본적으로 첫 번째 값인 X 좌표는 text-shadow가 오른쪽으로 얼마나 멀리 시작하는지 나타냅니다. 그림자가 왼쪽에서 시작하도록 음수 값을 사용할 수 있습니다.

그리고 대부분의 색상이 겹치기 때문에 text-shadow 속성의 순서를 재정렬하면 모든 색상을 볼 수 있습니다.

h1 {
     ...
     text-shadow: 
          2vw 0 var(--pink),
          -2vw 0 var(--blue),
          -5vw 0 var(--yellow);
}

멋진!

이 시점에서 반투명의 파란색과 노란색이 함께 혼합되어 생성된 일부 녹색만 누락되었습니다. 불투명도는 약간의 조정이 필요할 수 있으므로 --blue 변수에서 참조할 수 있는 다른 CSS 변수로 추가하겠습니다.

:root {
    --opacity: .75;
    --blue: rgb(0, 191, 255, var(--opacity));
    --pink: rgb(255, 20, 147);
    --yellow: rgb(255, 255, 0);
    --black: rgb(0,0,0);
}

함께 모아서

최종 결과는 다음과 같습니다.


기본 탭

야스!

Antoni, Tan, Karamo, Bobby, Johathan은 자랑스러워할 것입니다.

자원

https://htmlcolorcodes.com/color-names/

https://stackoverflow.com/questions/14492695/css-color-names-alpha-transparency

https://css-tricks.com/snippets/css/css-text-shadow/

게시물 Queer Eye Text Effect in HTML & CSS이 Shannon Crabill — Front End Software Engineer에 처음 나타났습니다.