매우 실용적인 CSS 아트

CSS 예술은 항상 저를 매료 시켰지만, 나는 그것을 직접 시도하지는 않습니다. 많은 기술에 익숙하지만, 제작자가 간단한 상자로 부드럽고 아름다운 이미지를 만들 때마다 여전히 놀랐습니다. 나는 종종 개발자 도구를 사용하여 그 뒤에 미스터리를 연구하지만 창의적인 과정을 본 적이 없습니다.

CSS 예술 작품이 주목을받을 때마다 항상 "이것은 실용적이지 않다"또는 "직접 SVG를 사용"하는 사람들이 있으며, 이와 같은 진술은 발진과 지루합니다. 이러한 주장이 사실이더라도 나쁜 주장입니다. 항상 실용성을 추구하도록 요청받는 사람은 없습니다. 이 경우 세상이 얼마나 지루한 지!

10 월, 나는 내가 가장 좋아하는 CSS 아티스트 Lynn Fisher (Twitter, Codepen)가 단일 DIV Creation Live 방송을 보는 것을 영광으로 생각했습니다. 나는 한때 Single Div Works가 매우 복잡한 상자 그림자, 즉 픽셀 아트 접근 방식에 의존한다고 잘못 생각했습니다. 이 아이디어가 어디에서 왔는지 잘 모르겠습니다. 어쩌면 몇 년 전에 누군가가 그것을하는 것을 보았을 것입니다. 그러나 그녀의 창조적 인 과정은 내가 예상했던 것보다 훨씬 "정상"과 "실용적"입니다. 그녀는 레이어링, 스케일링 및 포지셔닝의 배경 기울기를 영리하게 사용합니다.

잠깐, 나는 그것을하는 방법을 알고있다! 기술 자체에 마법이있는 것이 아니라 몇 가지 그라디언트를 케이크 안에있는 치즈 조각으로 바꾸는 용기가 있습니다!

이 속성을 클라이언트 프로젝트에서 전에 사용했습니다. 다양한 효과에 대한 그라디언트, 레이어 이미지, 크기를 크기 및 위치를 만들었습니다. 이들 중 어느 것도 복잡하거나 급진적이지는 않습니다. 나는 CSS 자체에 대해 새로운 것을 배우지 않았습니다. 그러나 이것은 이러한 간단한 도구가 달성 할 수있는 것에 대한 인식을 크게 바꿨습니다.

몇 주 안에이 기술을 생산 환경에 적용했습니다. 다시 말하지만, 이것에 대해 이상하거나 복잡한 것은 없습니다. 그것은 손가락 끝에서 저지하는 과일과 같습니다.이 경우 커스텀 SVG는 약간 부피가 커집니다. 다음은 몇 가지 사용자 지정 속성을 사용하여 조정을 단순화하는 개인 프로젝트에 대해 만든 효과입니다.

지난 주, 우리는 매우 실용적이고 공식 고객 구성 요소 라이브러리에서 비슷한 트릭을 사용했습니다. 이것은 Stacy Kvernmo의 아이디어이며 매우 잘 작동합니다.

Lynn과 다른 모든 재능있는 CSS 아티스트에게 감사합니다! 우리가 좋아하는 높이와 우리가 매일 사용할 수있는“매우 진지한”도구를 보여 주셔서 감사합니다.

위 내용은 매우 실용적인 CSS 아트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!