최근에 나는 예술적 재능이 부족한 코딩 영감을 찾았습니다. 내 접근? 깨끗하고 간결한 코드에 중점을 둔 다른 사람들의 시각적으로 매력적인 창조물을 복제합니다. 이 캔디 유령 버튼은 내 눈을 사로 잡았습니다!
그들은 빠른 프로젝트에 완벽 해 보였다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!