이따금 블로깅 열성팬이 특정 주제를 중심으로 합체하는 것 같고 마치 내 책갈피 폴더에 저장된 글들이 대화를 나누는 것 같다. 지금 거기에 있는 대화는 모두 CSS Gradients에 관한 것이며 더 흥미로운 부분을 연결해야 한다고 생각했습니다.
- 22일차: 원추형 기울기 — Manuel Matuzovic은 최신 CSS에 대한 21일 시리즈의 100일차에서 색상, 각도, 배치 및 색상 정지점에 대한 멋진 고급 보기를 제공하는 원뿔형 그래디언트를 살펴봤습니다. 그런 다음 일 22, 그는 그것을 사용합니다
::backdrop의사 요소. (그런데 트위터가 의외로 계정 정지 — 우리가 할 수 있다면 그 배를 바로잡도록 돕자.) - CSS 방사형 그라디언트를 정말로 이해하고 있습니까? - 패트릭 브로셋 여기에서 가이드 가치가 있는 작업을 수행했으며 솔직히 여전히 작업을 수행하고 있습니다. 그러나 나는 방사형 그래디언트의 크기와 모양에 대한 키워드와 같이 내가 여전히 숨막히는 것들에 대한 그의 명확한 설명과 데모에 이미 감사합니다. 나는 이미 이것을 우리 자신의 것으로 연결하고 있습니다. CSS 그라디언트 가이드!
- 고도로 사용자 정의 가능한 배경 그라디언트 — 안녕하세요, 방사형 그래디언트에 대해 말하자면, 스콧 밴디헤이여러 컬러 스톱이 있는 레시피에 대한 의 레시피가 지난주에 돌아왔습니다. 그의 과제는 다양한 색상 변형을 지원할 수 있는 그래디언트 패턴을 만드는 것이었습니다. 일반적으로 CSS 클래스를 사용하지 않을 경우 각 변형에 대한 색상 값과 CSS 클래스가 엉망이 될 것입니다. 사용자 정의 특성. 이렇게 하면 다양한 색상에 대한 사용자 정의 속성과 각 색상 정지점의 배치 값을 할당한 다음 상황에 따라 간단히 값을 업데이트할 수 있습니다. 또한 JavaScript로 사용자 지정 속성을 업데이트할 수 있는 방식을 통해 Scott은 그래디언트 패턴을 사용자 정의하기 위한 도구 구축, 게시물 끝에서 관대하게 공유됩니다.
- CSS 하프톤 패턴 - 미셸 바커 Ana Tudor의 "하프톤" 패턴에 대한 자세한 설명과 함께. 그 효과는 구식 신문의 점선 잉크 인쇄와 비슷합니다. 아나가 사용하는 동안 후디니 애니메이션 및 호버 효과의 내부에서 Michelle은 특히 하프톤 효과 자체와 방사형 그래디언트로 구성되는 방식을 살펴봅니다. 저는 특히 Michelle이 간단한 도트 그리드에서 패턴이 약간 엇갈린 그리드로 가는 방법을 보여주는 방식을 좋아합니다. 그리고 그녀가 어떻게 효과를
mask-image선형 그래디언트를 사용하여 페이딩 효과를 만듭니다. 이 패턴으로 약간의 리핑을 했습니다., 또한 콧물 잉크 얼룩 필터처럼 보이는 깔끔한 것으로 마무리됩니다. - 근사한 Navbar 솔루션 — Eric Meyer는 점선이 "현재 페이지" 링크에서 나와 콘텐츠 컨테이너의 왼쪽 가장자리를 따라 더 큰 점선 테두리의 일부가 되는 메뉴에 대한 흥미로운 디자인 과제를 받았습니다. 에릭은 항상 다음의 좋은 예입니다. 프론트엔드 개발자처럼 생각하는 방법, 그리고 그는 설정의 표준 접근 방식으로 걸림돌에 부딪쳤을 때 선형 기울기를 사용하여 취한 대체 경로를 설명하면서 여기에서 수행합니다.
border-style: dotted요소에. - 마스킹된 그라데이션 파선 — 왼쪽 테두리의 대시를 래스터 이미지의 대시에 연결하는 방법뿐만 아니라 그의 까다로운 디자인 안목으로 인해 낮은 해상도를 모방하기 위해 솔루션을 변경하도록 설득한 마지막 링크에 대한 후속 조치를 포함하는 Eric 두 개의 반복되는 선형 배경 그라데이션을
mask-image배경 그라데이션에. 너무 괴상하고 훌륭합니다!
