일반적인 UI 문제를 위한 스마트 CSS 솔루션

오늘날 CSS로 무엇을 할 수 있는지 보는 것은 놀라운 일입니다. 특히 한때 스택 컨텍스트를 파악하는 것이 얼마나 어려웠는지 또는 여백이 축소된 이유와 top: float 가 작동하지 않는 이유를 여전히 기억한다면 더욱 그렇습니다. 이 게시물에서는 CSS로 할 수 있는 흥미롭고 재미있는 일 , 작업에서 우리 모두가 직면해야 하는 일반적인 문제 및 사용 사례를 탐구합니다.

CSS로 더욱 풍부하고 실제와 같은 그림자

그림자는 의미를 전달하고 UI에 추가 가치를 추가하는 데 도움이 됩니다. 그러나 오늘날 웹에서 볼 수 있는 많은 그림자는 잠재력을 최대한 활용하지 못합니다. 바꿔보자!

모든 그림자에 대한 포괄적인 심층 분석은 Rob O'Leary가 제공합니다. CSS Tricks에 대한 그의 기사에서는 빛이 그림자에 미치는 영향과 광원을 정의하는 방법(진짜 그림자 효과 생성의 기초)을 탐구합니다. 베이스가 설정되면 그림자를 사용하여 깊이를 불러일으키고, 요소를 높이고, 삽입하는 방법, 그림자를 레이어링하는 방법, 물론 어떤 사용 사례에 사용할 CSS 속성을 배울 것입니다. Rob은 또한 그림자가 가져오는 접근성 및 성능 영향과 그림자를 애니메이션하는 방법을 살펴봅니다.

주제에 대한 또 다른 환상적인 기사는 Josh W Comeau의 것입니다. Josh는 웹에 있는 대부분의 그림자의 현재 상태를 설명하면서 "그림자와 거의 비슷하게 보이지 않는 흐릿한 회색 상자"를 끝내기 위해 일반적인 상자 그림자를 아름답고 실물과 같은 그림자로 변환하는 방법을 보여줍니다. . 모든 UI를 훨씬 더 촉각적으로 만드는 약간의 디테일.

CSS 종이 잘라내기 효과

제목에 대해 종이 자르기 효과를 만들고 싶다면 꽤 고생했을 것입니다. 아마도 두 개의 개별 div 를 설정해야 할 것입니다. 그러면 서로 겹쳐질 것입니다. 간격은 물론 상대 단위로 정의해야 하므로 화면을 가로질러 바로 이동하기가 약간 어려울 수 있습니다.

Stephanie Eckles의 CSS Paper Cut-Out Effect는 CSS 사용자 정의 속성, CSS 그리드, CSS 변환 및 훌륭한 구식 CSS 함수 attr() 으로 문제를 완벽하게 해결합니다. Stephanie는 h1 내부의 span 와 함께 data 속성을 사용하고 있습니다. attr() 은 data -attribute의 값을 선택하여 :after -pseudo 요소의 content -property에 사용됩니다. 그런 다음 CSS 사용자 정의 속성을 사용하여 하이라이트, 그림자 및 색상을 조정할 수 있습니다. 재사용이 가능하고 유지 관리가 간편합니다!

Stephanie와 CSS를 사랑하는 다른 훌륭한 사람들의 더 많은 마술에 관심이 있다면 현대 CSS가 각광받는 곳인 StyleStage를 살펴보세요.

또한, SVG가 더 합리적일 수 있는 시기와 실제 시나리오에서 구현하는 방법을 결정하는 모든 세부 사항에 대해 설명하는 컷 아웃 효과에 대한 생각에 대한 Ahmad Shadeed의 글을 살펴보십시오. 이 기사는 또한 시작하는 데 도움이 되는 많은 코드 예제를 제공합니다!

웹용 미니맵

우리는 전에 그것을 본 적이 있습니다. 일반적으로 페이지 상단에 있는 작은 수평 막대입니다. 사용자가 아래로 스크롤하면 가로 막대가 채워지므로 사용자는 실제로 스크롤할 수 있는 부분이 얼마나 남았는지 알 수 있습니다.

하지만 좀 더 상황에 맞게 만들면 어떨까요? 아마도 페이지에 일부 이미지와 비디오 또는 인용문과 별개의 섹션이 포함되어 있을 수 있습니다. 독자가 페이지에서 위치를 고정하고 필요한 경우 뒤로 이동할 수 있도록 하면서 다르게 강조 표시하는 것은 흥미롭지 않을까요? 글쎄요, Rauno Freiberg도 그렇게 생각했습니다.

Rauno의 웹용 미니맵(현재 Firefox에서만 작동)을 사용하면 전체 페이지의 미니맵 표현을 쉽게 만들 수 있을 뿐만 아니라 독자가 페이지의 섹션을 고정하고 페이지 사이를 탐색할 수 있습니다. 이를 달성하기 위해 Rauno는 실험적인 CSS 속성 element() 를 사용하여 임의의 HTML 요소(현재 Firefox에서만 사용 가능)의 라이브 이미지를 표시합니다.

CSS의 조건부 테두리 반경

카드를 디자인할 때 다른 카드와 함께 표시하기에 충분한 공간이 있을 때 border-radius 에 상당한 값을 주기를 원할 수 있습니다. 그러나 더 작은 화면의 경우처럼 카드에 공간이 없고 여백이 없을 때 border-radius 를 0 으로 줄이는 것이 좋습니다. 당신은 그것을 어떻게 달성하겠습니까?

Ahmad Shadeed는 CSS의 Conditional Border Radius에 대한 자신의 기사에서 이 문제를 상당히 자세히 조사했습니다. 원래 Heydon Pickering과 Naman Goel이 제안한 아이디어는 한 상태 또는 다른 상태를 트리거할 수 있을 만큼 충분히 큰 숫자를 사용하는 것입니다. 작은 화면에서 100vw 와 100% 의 차이가 0 이면 반경도 0 이 됩니다. 그러나 차이가 더 크면 더 큰 값이 사용됩니다. CodePen도 살펴볼 수 있습니다.

CSS 거친 그라디언트

이미지에 약간의 질감을 주기 위해 약간의 노이즈를 추가하고 싶다면 어떻게 하시겠습니까? 물론 이미지를 PNG, WebP 또는 AVIF로 내보낼 수 있지만 이상적으로는 SVG 위에 "노이즈"를 추가하여 원할 경우 항상 노이즈를 켜고 끌 수 있습니다.

거친 그라디언트에 대한 CSS-Tricks 기사에서 Jimmy Chion은 CSS 및 SVG의 반짝임으로 그라디언트에 텍스처를 추가하기 위해 다채로운 노이즈를 생성하는 방법을 설명합니다. Jimmy가 설명했듯이 아이디어는 SVG 필터를 사용하여 노이즈를 생성한 다음 해당 노이즈를 배경으로 적용하는 것입니다. 그런 다음 그라디언트 아래에 레이어를 추가하고 밝기와 대비를 미세 조정합니다. 짜잔~ 점진적으로 디더링되는 그라디언트가 생깁니다.

문제가 해결되었습니다! Jimmy가 설정한 Grainy Gradient 놀이터를 탐색할 수도 있습니다.

여러 줄 배경 그라데이션

어떤 것들은 CSS로 불가능해 보일 수 있습니다. 누군가가 그것을 가능하게 하는 해킹을 찾기 전까지는 말이죠. 이 경우와 같이: 각 줄에 대해 재설정되지 않는 그래디언트가 있는 여러 줄 패딩 텍스트를 얻을 수 있습니까?

예, Matthias Ott가 보여주듯이. Matthias의 솔루션은 약간 해키하지만 텍스트 위에 추가된 의사 요소 덕분에 원하는 결과로 이어집니다. 만질 수 있는 흥미로운 아이디어.

윤곽선이 없는 양식 필드 포커스

누가 양식이 지루해야 한다고 말했습니까? Hakim El Hattab은 이름, 이메일 및 비밀번호를 묻는 양식과 같이 단순한 것이 상자 밖에서 생각하고 기쁨의 불꽃을 수용할 수 있는 기회임을 증명하는 데모를 만들었습니다.

이를 달성하기 위해 Hakim은 필드 자체에 대한 포커스 아웃라인 없이 진행되는 미묘하지만 놀라운 애니메이션에서 형식 포커스와 유효성 검사를 결합합니다. 대신 점은 초점이 맞춰진 필드를 표시합니다. 포커스가 다른 필드로 전환되면 애니메이션이 트리거되고 점이 새 활성 필드로 점프하여 둘 사이의 연결을 그립니다. 양식 필드 유효성 검사도 원활하게 통합되어 점이 확장되고 확인 표시가 표시됩니다. 코드에 대해 더 자세히 알고 싶다면 Hakim이 Codepen에 데모도 게시했습니다. 영감을주는!

CSS 그라디언트 전환

CSS에서 그라디언트를 전환하려고 시도한 적이 있다면 실제로 작동하지 않는다는 것을 알았을 것입니다. 한 그라디언트에서 다른 그라디언트로 점차적으로 사라지는 대신 변경이 즉시 갑자기 발생하며 둘 사이의 부드러운 전환이 없습니다.

Keith J. Grant가 발견했듯이 영리한 해결 방법 으로 전환을 달성할 수 있습니다. 이를 위해 의사 요소 및 불투명도 변환을 사용합니다. 먼저 요소에 하나의 그라디언트를 적용한 다음 의사 요소를 배치하여 요소를 채우고 두 번째 그라디언트를 요소에 적용합니다. 그리고 우리는 의사 요소의 불투명도를 전환하여 두 그라디언트 사이를 "전환"합니다. CodePen에서 전체 작업 예제를 확인할 수 있습니다.

image-set() 이미지 성능 향상

이미 image-set() 에 대해 들어 보셨습니까? img 태그의 HTML srcset 속성에 해당하는 CSS 배경으로 생각할 수 있습니다. Chromium 기반 브라우저와 Safari는 몇 년 동안 이를 지원했으며 Firefox는 최근에 그 뒤를 이었습니다. Ollie Williams는 오늘날 우리가 할 수 있는 것과 할 수 없는 것을 살펴봅니다.

Ollie가 설명한 대로 image-set() 한 가지 사용 사례는 배경 이미지의 여러 해상도를 제공하고 브라우저가 사용자에게 제공할 이미지를 결정하도록 맡기는 것입니다. 예를 들어 연결 속도가 느리거나 픽셀 밀도가 낮은 화면의 경우 저해상도 이미지입니다.

또 다른 매우 유망한 사용 사례는 불행히도 여전히 브라우저 지원이 부족합니다. AVIF, WebP 또는 HEIF와 같은 새로운 이미지 형식을 사용하면서 이전 브라우저에 대한 대체를 추가하는 아이디어입니다. 오늘 이미 이와 같은 것을 달성하고 background-image 가 필요하지 않은 경우 <picture> Ollie가 제안한 것처럼 요소는 고려할 가치가 있는 대안이 될 수 있습니다. 이미지 성능을 향상시키는 데 도움이 되는 훌륭한 글입니다.

클립 경로 팝업 효과

주요 브라우저에서 지원하는 clip-path: path() 를 사용하면 창의력을 발휘할 시간입니다. Mikael Ainalem은 버터처럼 부드러운 팝업 효과라는 다소 새로운 기능의 아름다운 사용 사례를 보여줍니다.

Mikael은 clip-path: path() 를 사용하여 사람의 사진을 원 모양의 배경과 분리합니다. 그 위로 마우스를 가져가면 원 안쪽에서 사람이 솟아오르는 것 같아 멋진 3D 느낌을 줍니다. "회사 소개" 페이지에 적합합니다.

기발한 3D 버튼

세부 사항이 중요합니다. 멋진 버튼을 디자인하는 것은 그리 복잡한 노력이 아닌 것 같습니다. 여기저기에 약간의 여백, 펑키한 색상, 접근 가능한 텍스트 및 몇 가지 버튼 상태가 있습니다. 글쎄요, Josh Comeau는 당신이 두 번 이상 클릭하고 싶을 수도 있는 정말 기발한 3D 버튼을 디자인하기 위해 최선을 다했습니다.

아이디어는 간단합니다. 처음에는 두 개의 레이어를 만들고 전경 레이어를 약간 오프셋합니다. 호버에서 앞 레이어를 아래로 이동합니다. 그런 다음, outline-offset 을 사용하여 포커스 윤곽선을 조정하거나 :focus:not(:focus-visible) 을 사용하여 버튼에 포커스가 있고 사용자가 포인터 장치를 사용할 때 윤곽선을 숨깁니다.

그런 다음 버튼이 호버링할 때 버튼을 몇 픽셀 위로 이동하고, 변형을 약간 애니메이션으로 만들고, 애니메이션을 위해 베지어 곡선을 조정하고, 더 부드럽고 자연스러운 그림자를 위해 약간의 흐림을 추가합니다. 그리고 짜잔 — 우리는 액세스할 수 있고 모바일과 데스크탑에서 작동 하며 탭하고 클릭하는 즐거움을 주는 기발한 3D 버튼을 가지고 있습니다. 물론 Josh의 블로그에서 전체 코드 스니펫을 찾을 수 있습니다.

CSS 차트

세로 막대형 차트, 막대형 차트, 다중 데이터 집합 세로 막대형 차트 또는 누적 세로 막대형 차트를 디자인해야 할 수도 있습니다. 어디에서 시작합니까? 아마도 CSS 유틸리티 클래스를 사용하여 HTML 요소를 차트로 스타일을 지정하는 CSS 데이터 시각화 프레임워크 인 Charts.css를 사용할 수 있습니다.

Lana Gordiievski와 Rami Yushuvaev가 만든 이 프레임워크는 많은 차트 유형을 지원하고 종속성이 없으며 매우 가볍습니다. 또한 구성 요소 및 내장 차트 유형에 대한 철저한 문서가 포함되어 있으며 소스 코드는 GitHub(MIT 라이선스)에서 사용할 수 있습니다. 그리고 좀 더 창의적인 접근 방식이 필요한 경우 Preethi는 CSS-Tricks에서 흥미로운 모양으로 CSS 차트를 만드는 방법도 설명합니다.

새로운 CSS 재설정

브라우저에서 스타일을 표준화 하기 위해 무엇을 사용합니까? 최근에는 전역 CSS 재설정의 크기를 줄이는 새로운 접근 방식이 있었고 아마도 프로젝트에도 좋은 후보가 될 것입니다.

Andy Bell은 Modern CSS Reset을 통해 상자 크기 규칙을 추가하고 기본 여백을 제거하고 핵심 루트 기본값 및 본문 기본값을 설정하여 CSS 재설정을 최소로 줄였습니다. 이와 함께 Andy는 보기를 원하지 않는 사람들을 위해 모든 애니메이션, 전환 및 부드러운 스크롤을 제거하고 기본적으로 scroll-behavior 및 text-decoration-skip-ink 와 같은 최신 속성을 추가했습니다.

Elad Shechter의 New CSS Reset은 약간 더 공격적인 접근 방식을 취합니다. Elad는 display property 제외한 특정 HTML 요소에서 얻는 모든 기본 스타일을 제거합니다. 두 가지 접근 방식 모두 살펴볼 가치가 있습니다!

CSS를 사용한 안정적인 스크롤바 거터

아, 좋은 레이아웃이 바뀌었습니다! Bramus Van Damme이 설명하는 것처럼 레이아웃 이동에 대한 약간 더 모호한 이유 중 하나는 웹 의 다양한 유형의 스크롤바 때문입니다. iOS/macOS에서 오버레이 스크롤바가 콘텐츠 위에 배치되는 동안(기본적으로 표시되지 않음), 다른 스크롤바는 "스크롤바 거터", 즉 내부 테두리 가장자리와 외부 패딩 가장자리 사이의 공간에 배치됩니다.

상자의 내용이 너무 커지면 브라우저는 기본적으로 스크롤바를 표시합니다. 후자의 경우 레이아웃 이동이 발생합니다. 다행히도 이 문제는 곧 사라질 수 있습니다. 반짝이는 새로운 scrollbar-gutter 속성을 만나보세요. 이 속성을 stable 로 설정하면 상자가 넘치지 않아도 브라우저가 항상 스크롤바 거터를 표시하도록 할 수 있습니다.

그리고 대칭을 유지하기 위해 scrollbar-gutter: stable both-edges 를 사용할 수 있습니다. 이 기능은 아직 사용할 수 없지만 곧 다른 렌더링 엔진과 함께 Chromium에 제공될 예정입니다.

CSS가 애니메이션으로 만들 수 있는 놀라운 것들

CSS 속성에 애니메이션을 적용하면 어떤 것이 떠오르나요? Will Boyd는 다른 관점에서 질문을 살펴보고 즉시 마음에 들지 않는 속성, 일반적으로 애니메이션과 관련이 없지만 애니메이션할 수 있는 것으로 판명된 속성을 탐색하기로 결정했습니다.

Will은 "The Surprising Things That CSS Can Animate"라는 글에서 이러한 예기치 않게 애니메이션 가능한 속성에 대해 자세히 설명합니다. 예를 들어 z-index 는 계층화된 애니메이션에 사용할 수 있으며 opacity 는 CSS만으로 모달을 페이드 아웃하는 데 도움이 됩니다. CSS가 얼마나 강력한지 일깨워줍니다.

학습 자료

배움은 절대 멈추지 않죠? 아래에서 우리는 유용하고 재미있는 몇 가지를 모았습니다! — CSS 기술을 다음 단계 로 끌어올리는 데 완벽한 리소스입니다. 그리고 이미 CSS 전문가라면 지식을 테스트하는 데에도 어려움이 있습니다. 즐기다!

CSS 어휘 및 치트시트

당신은 전에 거기에 있었을 수도 있습니다. 촉박한 마감 시간 에 작업할 때 빠르게 무언가를 찾아보아야 합니다. CSS의 경우 CSS Tricks Almanac이 잘못되지 않으며 핀란드의 Ville V. Vanninen이 수집한 CSS 어휘도 찾을 수 있습니다.

Flexbox 재미있는 방법 배우기

개구리, 좀비, 타워 의 공통점은 무엇입니까? 글쎄, 그들은 Flexbox를 배울 때 가장 친한 친구입니다. 왜냐하면 Flexbox는 일단 이해하면 매우 강력하지만 거기에 도달하는 것은 상당히 어려울 수 있기 때문입니다. 그럼 좀 더 재미있게 배워봅시다.

Flexbox Froggy 게임에서 여러분은 CSS를 작성하여 어린 개구리와 그 친구들 이 lilypads를 찾 도록 도와줍니다. 이 게임은 Flexbox 포지셔닝의 가장 기본적인 것부터 고급 도전 과제로 안내하는 24개의 레벨로 구성되어 있습니다.

좀비가 골목 아래에 있다면 Flexbox Zombies가 적합합니다. 게임의 각 섹션은 줄거리의 일부를 풀고 새로운 Flexbox 개념을 소개하며 새로운 기술을 강화하는 데 도움이 되는 소위 "좀비 생존 챌린지" 를 제시합니다.

마지막으로 Flexbox Defense를 살펴보고 싶을 수도 있습니다. 타워 디펜스 게임에서 영감을 받은 여러분의 임무는 물론 CSS로 타워를 배치하여 들어오는 적들이 방어선을 지나치지 못하도록 막는 것 입니다. 세 가지 게임 모두 브라우저에서 바로 실행됩니다. 행복한 플렉스박스!

CSS 그리드, CSS 선택기 및 기타 경쟁

CSS 기술을 한 단계 끌어올리고 싶으십니까? 이 세 가지 작은 게임은 말 그대로 그렇게 하는 데 도움이 됩니다. Grid Garden에서 당신은 당근 정원 의 자랑스러운 주인이 될 것입니다. CSS 그리드의 도움으로 작물을 잘 관리해야 하는 28개의 레벨이 여러분을 기다리고 있습니다.

CSS 선택기 기술에 약간의 연마가 필요하다고 느낀다면 CSS Diner가 적합합니다. 접시, 사과, 피클 — 32개의 각 챌린지에서 테이블의 특정 항목을 선택하려면 다른 CSS 선택기를 사용해야 합니다.

그리고 경쟁이 치열하다면 CSSBattle도 확인하십시오. CSS 골프 게임 에서 CSS 기술을 사용하여 가능한 가장 작은 코드로 대상을 시각적으로 복제하여 순위표의 상단에 도달하게 됩니다. 각 도전 과제는 visibility , display , transition 또는 z-index 과 같은 특정 주제에 전념합니다.

마무리

최근에 특정 과제에 접근하는 방식을 바꾼 CSS 리소스나 기술을 접한 적이 있습니까? 아래 의견에 알려주십시오! 우리는 그것에 대해 듣고 싶습니다.