CSS 빙산

Source: Dev.to

개요

CodePen은 매주 코딩 챌린지를 진행하는데, 이번 주 테마는 Winter이며 Ice and Snow에 초점을 맞추고 있습니다. 저는 바다에 떠 있는 빙산을 그려서 참여하기로 했습니다.

온라인에서 마음에 드는 빙산 이미지를 찾아 CSS로 재현하면 재미있을 것 같다고 생각했습니다. 여러 요소를 실험해 본 뒤, 추가 HTML 요소 없이 오직 CSS만으로 구현하는 단일‑요소 솔루션에 최종적으로 결정했습니다.

CodePen에 제로‑요소 그림을 공유할 때마다 작은 면책 조항을 넣습니다: HTML 패널이 비어 보이더라도 실제로는 약간의 HTML이 존재합니다. 구체적으로 저는 “ 요소와 그 ::before 및 ::after 의사‑요소를 활용해 작품을 만들고 있습니다.

:root에 스타일을 직접 적용하고 브라우저가 CSS를 강제로 렌더링하도록 하면(이는 Apache와 Firefox에서만 작동) 진정한 제로‑HTML 설정을 구현할 수도 있습니다. 따라서 기술적으로 이 그림은 순수 CSS만으로, HTML 요소 전혀 없이도 구현될 수 있습니다.

구현 세부 사항

• body – 선형 그라디언트를 사용해 하늘을 그리고 두 개의 conic-gradient 그림자를 추가합니다.
• body::before – clip-path로 형태를 만든 뒤 원뿔형 그라디언트로 음영을 입혀 빙산을 그립니다.
• body::after – 반복되는 수평 방사형 그라디언트와 깊이를 위한 선형 그라디언트를 조합해 물과 파도를 만듭니다.

데모

실시간 데모를 확인하고 소스 코드를 탐색하려면 CodePen에서 확인하세요.