CSS가 다양한 스타일의 드로잉을 허용하는 방식을 좋아합니다. Ben Evans에서 본 것과 같은 사실적인 초상화와 풍경에서 Oscar Salazar와 Jhey Tompkins와 함께 본 재미있는 만화까지.
https://frontend.horse/articles/creating-3d-illustrations-with-css/
제가 좋아하는 스타일 중 하나는 Ricardo Oliva Alonso가 CodePen에서 만든 3D 작업입니다.
Adobe Illustrator에서 그려 지거나 Three.js로 모델링 된 것처럼 보이는 스타일입니다. Ricardo는 종종 Dribbble에서 조각을 찾아 CodePen에서 다시 만들고 HTML과 CSS로 스타일을 지정합니다.
내가 스타일을 좋아하는 동안 나는 그가 어떻게 작품을 만들고 있는지 전혀 몰랐다. 운 좋게도 Ricardo는 그의 기술을 우리와 공유 할만큼 친절했습니다.
주요 트릭?
"모든 것이 큐브입니다!"
사방에 큐브
네, 큐브처럼 보이지 않는 것조차 사실은 수정 된 큐브입니다. 하지만 들어가기 전에 실제로 HTML과 CSS로 3D 큐브를 만드는 방법은 무엇입니까?
변형 스타일
이 모든 부분을 가능하게 하는 하나의 CSS 속성이 있습니다. Ricardo는 그것을 작품의 모든 것에 추가합니다.
*,
*::after,
*::before {
transform-style: preserve-3d;
}transform-style의 기본값은 flat이며, 요소의 모든 자식이 부모와 동일한 평면으로 평평하게 만듭니다. preserve-3d로 변경하면 어린이가 모두 3D 공간에 존재할 수 있습니다.
MDN의 이 예는 이를 잘 보여줍니다.
https://codepen.io/a-trost/pen/ace950c15f4a62dd0abe909f81c8ddc3
이 조각을 만드는 데 preserve-3d가 얼마나 필수적인지 확인하려면 확인란을 전환하십시오. 또한 요소를 회전하고 제자리로 변환하여 CSS 변환을 통해 큐브를 만들고 있음을 확인할 수 있습니다.
Ricardo의 일부 작품에는 이 Boombox처럼 30 개가 넘는 큐브가 많이 포함되어 있습니다.
https://codepen.io/ricardoolivaalonso/pen/JjYqQGQ
6 개의 면을 가진 30 개의 큐브는 180 개의 CSS 클래스를 의미합니다. 네.
다행히 Ricardo는 큐브를 훨씬 더 효율적으로 만들기 위해 Sass 믹스 인의 힘에 의지합니다.
빠른 팁
Sass 믹스 인에 익숙하지 않은 경우 사이트 전체에서 사용할 수 있는 스타일을 정의 할 수 있습니다. 더 좋은 점은 출력을 변경하기 위해 인수를 취할 수 있다는 것입니다. 다음은 Sass 믹스 인에 인수를 전달하는 방법에 대한 훌륭한 기사입니다.
다음은 너비, 높이 및 깊이에 대한 매개 변수를 사용하는 큐브 믹스 인입니다. 이것은 그에게 반복적인 부분이 그를 위해 처리되는 작은 큐브 공장을 제공합니다.
@mixin cube($width, $height, $depth) {
&__front{ @include cube-front($width, $height, $depth); }
&__back{ @include cube-back($width, $height, $depth); }
&__right{ @include cube-right($width, $height, $depth); }
&__left{ @include cube-left($width, $height, $depth); }
&__top{ @include cube-top($width, $height, $depth);}
&__bottom{ @include cube-bottom($width, $height, $depth); }
}각 줄에 @include 문이 있음을 알 수 있습니다. 그것은 다른 믹스 인을 가리킵니다. 예를 들어 큐브 백은 다음과 같습니다.
@mixin cube-back($width, $height, $depth) {
width: $width;
height: $height;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}너비, 높이 및 깊이가 통과되고 믹스 인이 이 얼굴에 대한 CSS를 만듭니다.
다음은 Ricardo의 Sass 믹스 인으로 만든 단일 큐브입니다. 하나의 큐브에 대한 많은 상용구 코드이지만 더 많은 큐브를 만들면 그에 대한 보상을 받습니다.
https://codepen.io/a-trost/pen/d1d333eed2c8e7e5ceaa168e2d3944e0
불규칙한 모양
우리가 만들고 있는 모양이 정육면체가 될 수 없으면 어떻게 됩니까? 이런 모양은 어떻습니까?
이것은 큐브로 시작하지만 약간 변경됩니다. Ricardo는 상황을 더 명확하게 하기 위해 이 GIF를 만들었습니다. 그는 배경 이미지와 선형 그라데이션을 사용하여 측면에 사다리꼴 모양을 만들고 있습니다.
다음은 원근 변경없이 분리 된 유사한 선형 그라데이션입니다. 빨간색 테두리는 요소의 경계를 나타냅니다.
https://codepen.io/a-trost/pen/bf8ec2e1f321b74949a6475229f1899f
10 번 줄이 핵심입니다. 250px를 별도의 값으로 변경하면 우리가 익숙한 대부분의 그래디언트처럼 흐려지기 시작하는 것을 볼 수 있습니다. 동일한 값일 때 어려운 '시작'과 '중지'지점이 있습니다.
그의 작품 중 하나를 보고 있고 큐브가 어디에 있는지 파악할 수 없다면 모두가 좋아하는 CSS 디버깅 기술을 사용해보십시오.
* {
border: 1px solid red !important;
}
앞면의 경우 다른 면과 일직선이 될 때까지 transform : rotateX()를 사용하여 뒤로 기울입니다.
피라미드 나무
그의 Forest 조각에서 나무를 만드는 다른 기술이 있습니다. 각 나무는 정사각형 밑면과 삼각형면이 있는 직사각형 피라미드입니다. Ricardo는 정사각형에서 시작하여 영리한 방식으로 테두리를 사용하여 삼각형을 만듭니다.
https://codepen.io/a-trost/pen/1f47960356859e6404d30dc2bd5a73cc
테두리가 크고 너비나 높이가 없는 div를 만들면 이러한 삼각형을 얻을 수 있습니다. 리카르도는 나무 옆에 하나를 사용하고 다른 하나는 투명하게 만듭니다. 맥락에서 기술을 보여주는 다음 GIF를 확인하십시오.
다음은 전체 내용입니다.
참고로,이 펜은 브라우저에서 렌더링 할 요소가 많기 때문에 리소스 집약적일 수 있습니다.
https://codepen.io/ricardoolivaalonso/pen/RwrdVRx
애니메이션
대부분의 Ricardo 작품에는 모두 CSS로 수행되는 멋진 애니메이션이 있습니다. 여기에서 몇 가지 프로세스 팁을 제공합니다.
먼저 여기에 있는 카세트 도어 및 버튼과 같은 개체의 작은 부분을 애니메이션합니다.
그런 다음 전체 개체를 살펴보고 애니메이션을 적용합니다. 주황색 버튼을 클릭하면 라디오와 그림자가 음악에 맞춰 바운스 되는 것을 볼 수 있습니다.
https://codepen.io/ricardoolivaalonso/pen/ExPpgqG
Shading
Ricardo는 몇 가지 미묘한 기술로 그의 작품에 깊이를 더합니다.
먼저 그는 광원에 대한 점을 선택해야 한다고 말합니다. 이것은 물체가 어떻게 음영 처리 되는지와 그림자가 떨어지는 위치를 알려줍니다.
그런 다음 개체의 면에 대해 동일한 색상의 세 가지 변형을 선택합니다.
장면에서 빛이 반사되기 때문에 '어두운'면은 검은 색이 아니고 세 가지 중 가장 어두운면이 됩니다.
Ricardo가 음영을 사용하여 깊이를 추가하는 방법을 보려면 이 GIF를 확인하십시오. 동일한 어두운 색상으로 버튼 사이의 균열을 음영 처리하고 있습니다.
마무리
Ricardo가 이 스타일로 만든 작품의 전체 컬렉션입니다. 확인하고 영감을 얻고 이 기술을 사용하여 나만의 3D CSS 아트를 만드시기 바랍니다!
등록된 댓글이 없습니다.
