CSS 드로잉 기술

들어봤어cssBattle?이것은 웹 사이트로 사용자가 최소한의 css 코드를 사용하여 그것을 재구성해야 하는 간단한 형상도를 제공합니다.최근에 나는 이미 80장의 도면을 완성했다. 나는 여기서 css 제도 기술을 공유할 수 있다고 생각한다.이러한 기교를 배우는 것은 당신의 일상적인 인코딩 작업에 큰 도움이 되지 않을 수도 있지만, 적어도 css에서 약간의 즐거움을 찾을 수 있다.
우선, 다음은 제가 이 80가지 도전에서 자주 사용하는 기교들입니다.

background

border

border-radius

box-shadow

drop-shadow

clip-path

-webkit-box-reflect

내가 새로운 도전을 시작할 때, 어떤 css를 작성하기 전에, 나는 먼저 원시 도형을 분석해서, 이것challenge No.52을 예로 들자.내가 이 그림을 보았을 때, 나는 이 그림에서 단지 두 개의 형상, 한 개의 원형과 한 개의 직사각형만 있다는 것을 알 수 있었다. 그리고 나는 이 형상들이 같은 각도와 같은 비례를 가지고 있다고 생각한다. 왜냐하면 우리는 네모난 그림자를 사용하여 크기를 늘리거나 줄일 수 있을 뿐, 우리는 네모난 그림자의 각도를 단독으로 바꿀 수 없기 때문이다.네, 원의 각도는 중요하지 않습니다. 모든 직사각형은 같은 각도와 크기를 가지고 있습니다.그래서 이런 상황에서 나는 쉽게 테두리 음영을 사용하여 모양을 재구성할 수 있다.

한번 해보자.
위의 코드 예시에서 css box-shadow 속성을 사용하는 모든 원을 만드는 데div만 사용할 수 있습니다.직사각형에 대해서도 우리는 같은 일을 할 수 있다. 우선 직사각형을 우리의 기초로 만들고, 그 중에서 우리는 상자의 음영을 사용하여 다른 직사각형을 다시 만들 수 있다.
이렇게 해서 우리는 이미 도전을 완성했다.나는 여기서 위조류:before를 사용한다. 단지 html에 다른 div 표시를 작성하고 싶지 않기 때문이다. 그러나 당신은 다른 html 표시를 사용하여 직사각형을 만들 수 있다.
다른 예를 들어 box-shadow와 -webkit-box-reflect를 사용하면 더 많은 코드를 작성하는 시간을 절약할 수 있습니다.
이것은 css 시트의 challenge No.45입니다.

앞의 예와 같이, 내가 이 그림을 볼 때, 나는 그것이 일부 직사각형으로 구성된 것을 알 수 있다.그러나 두 개의 각도, 수직, 수평이 있기 때문에, 나는 반드시 두 가지 모양을 사용하여 그것들을 만들어야 한다.그리고 좌우 양측이 대칭이기 때문에 나는 절반의 도형을 만들고 -webkit-box-reflect 속성을 사용하여 다른 절반을 만들 수 있다.먼저 사각형 섀도우를 사용하여 수평면을 작성했습니다.
그리고 수직을 추가했습니다.
너는 그림의 반이 이미 그려진 것을 볼 수 있다. 지금 나는 단지 첨가하기만 하면 된다

-webkit-box-reflect:right -20px

봐라, 도전은 이미 끝났다.
이것은 또 다른 예이다. 나는 완전히 같은 기술을 사용하여 도형을 만든다(challenge No.66). 그러나 이런 상황에서 너는 반드시 마이너스 공간에 주목해야 한다.
cssbackground 속성을 사용하여 모양을 만드는 방법을 두 가지 예를 들어 보겠습니다.
Challenge No.6
Challenge No.30
보시다시피 cssbackground는 매우 강력한 도구로 서로 다른 크기의 원형과 직사각형을 동시에 만들 수 있습니다.우리가 백그라운드를 사용할 때 유일하게 기억해야 할 것은 백그라운드 속성이 하나 이상의 배경층으로 지정되어 쉼표로 구분되어 있다는 것이다.다음 층은 위 층의 아래에 있을 것이다.
그래서 도전6에서 저는 먼저 배경을 그렸습니다. 그 안에 투명한 동그라미가 있고 2층에 색바퀴를 그렸습니다. 이렇게 하면 우리는 conic-gradient 중간에 동그라미가 있는 것을 볼 수 있습니다.만약 배경층을 흐트러뜨린다면, 배경색이나 원형이 아닌 원추 점변층이 전체 화면을 차지하는 것만 볼 수 있을 것이다.
다음은 내가 배경 층을 사용하여 도전을 완성한 또 다른 예이다.
Challenge No.33
그래서 box-shadow와 background는 내가 발견한 두 가지 가장 유용한 속성으로 내가 도전에서 도형을 만드는 데 도움을 줄 수 있다.다른 속성에 대해서는 그것들의 사용이 매우 간단하기 때문에 나는 여기서 그것들을 상세하게 설명하지 않을 것이다.