최근에, 나는 예술적 재능이 부족한 코딩 영감을 찾았습니다. 내 접근? 깨끗하고 간결한 코드에 중점을 둔 다른 사람들의 시각적으로 매력적인 창조물을 복제합니다. 이 캔디 유령 버튼은 내 눈을 사로 잡았습니다!

그들은 빠른 프로젝트에 완벽 해 보였다. 15 분 안에 나는 이것을 Chromium에서 달성했다 :

이 기술은 공유 할 가치가 있습니다. 이 기사는 내 프로세스를 자세히 설명하고 대체 접근법을 탐색합니다.

초기 설정

간단한 버튼 요소는베이스를 형성하여 data-iCo 속성을 통합하여 이모티콘 삽입 및 사용자 정의 CSS 속성, -슬리트리스트 , 스타일 속성에서 정지 목록

.

boo!

아트릴 후 완료, 나는 Safari의 중요한 클리핑-텍스트 제한을 발견했습니다. 버튼 요소, 디스플레이 : flex (및 아마도 그리드) 요소 및 하위 요소 텍스트에 실패합니다. 결과적으로, 여기에 설명 된 기술은 사파리-무적이다. 해결 방법에는 버튼 내에서 를 중첩하고 모든 버튼 스타일을 에 적용하고 부모의 테두리 박스를 덮는 것이 포함됩니다. 물리적 인 Apple 장치 액세스가없는 Linux 사용자의 경우 에피니를 권장합니다 (감사합니다, Brian!).

CSS는 아이콘에 대한 후 pseudo element를 사용하고 텍스트/아이콘 정렬을위한 그리드 레이아웃을 사용합니다. Border, Padding, Border-Radius, -Slist Diagonal Gradient의 스톱리스트 및 글꼴 스타일도 적용됩니다.

button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}

위의 코드에 대한 설명 : 배경-오리핀 및 Background-Clip 는 Border-Box 로 설정됩니다. 배경-오리핀 은 지정된 상자의 왼쪽 상단에 배경 위치 의 0,0 포인트를 배치하여 배경 크기 에 대한 참조를 결정합니다. Border-Box 는 그라디언트가 전체 테두리 박스에 걸쳐 보장합니다. 기본 패딩-박스 는 그라디언트가 패딩 영역을 덮는 것만으로 만듭니다.

크롬-특이 적 솔루션 (비표준)

이 방법은 3 개의 마스크 층과 합성을 사용합니다. 마스크 컴포팅의 리프레셔는 [Crash Course 링크]에서 찾을 수 있습니다. CSS 마스크 층에서는 알파 채널 만 중요합니다. RGB 채널은 결과에 영향을 미치지 않습니다.

우리는 두 개의 레이어로 시작합니다 : 테두리 박스를 덮는 완전히 불투명 한 레이어 (Alpha = 1 Everywhere)와 1 초, 또한 완전히 불투명 한 층 (Alpha = 1은 패딩 박스 내에서 0, 0 외부).

레이아웃 상자를 중첩 사각형으로 시각화합니다. 하단 층은 테두리 박스를 통해 완전히 불투명합니다. 상단 층은 패딩 박스 내에서 불투명하고 국경 영역에서 투명합니다. 코너 반올림은

Border-Radius (및 Padding-box의 경우 Border-Width

이 레이어는

Exclude 작동 (또는 WebKit의 xor 를 사용하여 합성됩니다. 결과 : 패딩 박스 내에서 알파 = 0 (두 층 모두 알파 = 1), 테두리 영역에서 알파 = 1 (첫 번째 층 알파 = 1, 두 번째 레이어 alpha = 0).

코드 :

button {
  /* same base styles */
  --full: linear-gradient(red 0 0);
  -webkit-mask: var(--full) padding-box, var(--full);
  -webkit-mask-composite: xor;
  mask: var(--full) padding-box exclude, var(--full);
}

세부 사항 : 적색 구배는 간결하게 사용됩니다. 그라디언트는 배경 클립 제한으로 인해 두 층에 사용됩니다. 표준

마스크 복합체 가 포함되어 있으며 비표준 버전이 재정의됩니다.

이것은 그라디언트 테두리를 생성하지만 텍스트가 부족합니다. 텍스트 (투명 텍스트 포함)로 제한 된 세 번째 마스크 레이어를 추가하고 이전 결과로 Xoring 텍스트가 다시 추가됩니다. 그러나 이것은

mask-clip 에 대한 비표준 텍스트 값으로 인해 크롬에 따라 다릅니다. @지원 블록은 크로스 브라우저 호환성을 보장합니다 (지원 브라우저에서 텍스트 마스킹없이).

button {
  /* same base styles */

  @supports (-webkit-mask-clip: text) {
    -webkit-text-fill-color: transparent;
    --full: linear-gradient(red 0 0);
    -webkit-mask: var(--full) text, var(--full) padding-box, var(--full);
    -webkit-mask-composite: xor;
  }
}

이것은 간단한 접근 방식이지만 비표준 기능에 대한 의존은 브라우저 호환성을 제한합니다. 대안,보다 광범위하게 지원되는 방법을 탐색합시다.

대안 접근법 : 의사 요소 및 국경 이미지 솔루션

추가 의사 요소 솔루션은 배경을 텍스트 영역에 클리핑하고 절대적으로 위치 된

:: pseudo element를 사용하여 구배 테두리를 추가하여 마스킹을 피합니다. Border-Image 솔루션은 더 간단하지만 Border-Radius 에 제한이 있습니다. 이 방법은 크롬 특이 적 솔루션보다 더 나은 크로스 브라우저 호환성을 제공합니다. 이러한 방법에 대한 자세한 내용 및 코드 예제는 원본 기사에 제공됩니다. 원래 기사에 설명 된 블렌딩 솔루션은 또 다른 접근 방식을 제공하지만 배경 상호 작용에 관한 한계가 있습니다. 각 방법은 원하는 수준의 크로스 브라우저 지원 및 특정 설계 요구 사항에 따라 강점과 약점이 있습니다.