CSS-ing Candy Ghost 버튼

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

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

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

초기 설정

간단한 버튼 요소는 기본을 형성하여 이모티콘 삽입을위한 data-ico 속성과 스타일 속성의 정지 목록에 대한 사용자 정의 CSS 속성 --slist 통합합니다.

 <code>boo!</code>

항아리 이후 완료, 나는 Safari의 상당한 클리핑-텍스트 제한을 발견했습니다. 버튼 요소, display: flex (및 아마도 그리드) 요소 및 하위 요소 텍스트에 실패합니다. 결과적으로, 여기에 설명 된 기술은 사파리-무적이다. 해결 방법은 a<span></span> 버튼 내에서 모든 버튼 스타일을<span></span> , 부모의 국경 박스를 덮는 것. 실제 Apple 장치 액세스가없는 Linux 사용자의 경우 주현절을 권장합니다 (감사합니다, Brian!).

CSS는 아이콘에 대한 ::after 요소와 텍스트/아이콘 정렬에 대한 그리드 레이아웃을 사용합니다. 테두리, 패딩, 국경-라디우스, 대각선 기울기의 --slist 슬랫 스톱리스트 및 글꼴 스타일도 적용됩니다.

 <code>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) } }</code>

위의 코드에 대한 설명 : background-origin 및 background-clip border-box 로 설정됩니다. background-origin 핀은 지정된 상자의 왼쪽 상단에 background-position 의 0,0 점을 배경으로 background-size 에 대한 참조를 결정합니다. border-box 그라디언트가 전체 테두리 박스에 걸쳐 보장합니다. 기본 padding-box 그라디언트가 패딩 영역을 덮는 것만 커버합니다.

크롬-특이 적 용액 (비표준)

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

우리는 두 개의 층으로 시작합니다 : 테두리 박스 (Alpha = 1)를 덮는 완전히 불투명 한 층과 1 초, 또한 패딩 박스 (alpha = 1)로 제한된 완전히 불투명 한 층도 있습니다.

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

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

코드 :

 <code>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); }</code>

세부 사항 : 적색 구배는 간결하게 사용됩니다. 그라디언트는 배경 클립 제한으로 인해 두 층에 사용됩니다. 표준 mask-composite 비표준 버전이 무시와 함께 포함되어 있습니다.

이것은 그라디언트 테두리를 생성하지만 텍스트가 부족합니다. 텍스트 (투명 텍스트 포함)로 제한 된 세 번째 마스크 레이어를 추가하고 이전 결과로 Xoring 텍스트가 다시 추가됩니다. 그러나 이것은 mask-clip 의 비표준 text 값으로 인해 크롬에 따라 다릅니다. @supports 블록은 크로스 브라우저 호환성을 보장합니다 (지원하지 않는 브라우저에서 텍스트 마스킹없이).

 <code>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; } }</code>

이는 간단한 접근 방식이지만 비표준 기능에 대한 의존은 브라우저 호환성을 제한합니다. 대안적이고 더 광범위하게 지원되는 방법을 살펴 보겠습니다.

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

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

위 내용은 CSS-ing Candy Ghost 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!