프론트엔드 챌린지: CSS Art - 12월 에디션

CSS 아트 챌린지 2024

프론트엔드 챌린지 - 12월 에디션, CSS Art: 12월에 제출한 작품입니다.

영감

CSS 다각형을 활용하여 멸종 위기에 처한 30종을 생성한 Bryan James의 사이트를 우연히 발견한 후 저는 이를 이 멋진 도구로 실험을 시작하라는 신호로 받아들였습니다.

데모

https://emmy-zhang.github.io/css-art/

여행

• 스케치: 12 Days of Christmas라는 노래에서 영감을 받아 삼각형으로 자고새를 스케치했습니다.
• 개요: HTML로 요소의 윤곽을 설정하고 CSS 다각형을 사용하여 대략적으로 원하는 모양으로 만들었습니다.
• 수정: 요소를 수동으로 제자리로 이동했습니다.
• 스타일링: 색상 업데이트, 피자 애니메이션 추가
• 모바일: 글쎄, 그들이 "모바일 우선"이라고 말하는 데는 이유가 있습니다. 작은 화면에서 테스트할 때 요소가 흩어지기 때문에 작은 화면에 맞게 요소의 높이와 너비를 수동으로 업데이트했습니다.

Bryan James 사이트에서는 기존 이미지에 JS 추적 프로그램을 사용하여 다각형을 만들었습니다. 저는 시간과 건강을 위해 덜 정교한 접근 방식을 선택했지만 추적기를 사용하면 다각형이 동적으로 생성될 수 있었고 모바일 스타일과 애니메이션이 훨씬 더 쉬워졌을 것이라고 상상합니다. 아마도 다음 프로젝트를 위한 프로젝트일 것입니다 :) 그래도 이것으로 꽤 많이 배웠습니다!

위 내용은 프론트엔드 챌린지: CSS Art - 12월 에디션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!