내가 이 리얼한 빨간색 스위치를 어떻게 만드는지 (순수 CSS)

지난주에 나는 공을 드리블할 때 비틀거리며 이 3D Red Switch 디자인의 만년필을 보고 이 만년필을 창작했다.그 이후로 인기를 많이 얻었어요(내가 예상한 것보다 훨씬 많아요!)몇몇 사람들이 나에게 내가 어떻게 이 점을 해냈는지에 관한 교과서를 한 편 쓰라고 했다.
제작 과정에서 저는 점차적인 변화, 3D 변환, 애니메이션과 전환을 포함한 다양한 CSS 기술을 사용했습니다.본 강좌에서 나는 그 중의 일부 기술을 깊이 있게 소개할 것이다.

상태 시뮬레이션

이것은 아마도 책에서 가장 오래된 수작일 것이다.스위치는 켜고 끄는 두 가지 상태가 있지만 CSS에서는 이 상태를 유지할 수 없습니다.
이 문제를 해결하기 위해서 우리는 원본 HTML 요소를 사용할 수 있다.우리는 단지 두 가지 상태를 유지할 수 있기 때문에, 복선상자 요소는 좋은 선택이다.체크 상자를 선택했는지 여부에 따라 :checked CSS 선택기를 사용하여 CSS를 적용할 수 있습니다.
우리는 전체 내용을 <label/>에 포장하여 전체 요소의 클릭 이벤트를 복선상자에 연결하고 CSS로 복선상자 자체를 숨깁니다.

<label class="switch">
  <input type="checkbox" checked/>
</label>

.switch {
  input {
    display: none;
  }
}

그 중 하나는 CSS에 '조상 선택기' 가 없기 때문에 복선상자 상태를 바탕으로 <label/> 자체에 적용할 수 없다는 것이다.따라서 나는 모든 스위치 요소를 복선상자 뒤에 놓고 인접한 동급 선택기+를 사용하여 그것들에 CSS를 적용한다.

<label class="switch">
  <input type="checkbox" checked/>
  <div class="button"></div>
</label>

.switch {
  input {
    display: none;

    &:checked + .button {
      // Apply some CSS to .button when the checkbox is checked
    }
  }
}

두 가지 이상의 상태를 가진 요소를 시뮬레이션하려면 라디오 버튼(<input type="radio"/>과 같은 다른 HTML 요소를 사용할 수 있습니다.어떤 사람들은 이런 기술을 새로운 수준으로 향상시켜 CSS로만 완전한 게임을 만들었다!CodePen에서 이것collection of pure CSS games을 보면 약간의 영감을 얻을 수 있다.

검은 테두리를 만들다

나는 box-shadow 단추를 시뮬레이션하는 프레임워크를 사용한다.box-shadow는 여러 개의 그림자 효과를 쌓아 놓고 쉼표로 구분할 수 있는 매우 강력한 CSS 속성입니다.
나는 다섯 가지 음영 효과를 사용하여 프레임을 만들고 border-radius 속성을 사용하여 음영을 구석에서 둥글게 만들었다.구체적인 상황은 다음과 같습니다.

.switch {
  border-radius: 5px;
  box-shadow: 
    0 0 10px 2px rgba(black, 0.2), // The surrounding shadow (first layer)
    0 0 1px 2px black, // The surrounding shadow (second layer)
    inset 0 2px 2px -2px white, // The top white "shine"
    inset 0 0 2px 15px #47434c, // The light gray frame
    inset 0 0 2px 22px black; // The internal black shadow
}

3D 버튼 형태 만들기

버튼이 3D로 보이도록 CSS 변환 및 변환을 사용합니다.
버튼 자체는 3개의 서로 수직div(정확히 말하면 1개의 div와 2개의 위조 요소)로 구성되어 있으며 다음과 같다.

.button {
  &::before {
    height: 50px;
    width: 100%;
    transform: rotateX(-90deg);
  }
  &::after {
    height: 50px;
    width: 100%;
    transform: translateY(50px) rotateX(-90deg);
  }
}

그리고 나는 전체 단추를 25도 회전시켰고 transform-origin를 사용하여 추축점을div에서 멀리 설정하여 단추를 단추 내부의 더 깊은 점을 중심으로 회전하는 것처럼 보이게 했다.

.switch {
  perspective: 700px;

  .button {
    $rotation: 25deg;
    $pivot-distance: 20px;
    transform-origin: center center -#{$pivot-distance};
     transform: translateZ($pivot-distance) rotateX(-$rotation);
    transform-style: preserve-3d;
  }
}

애니메이션 만들기

나는 CSS를 사용하여 전후 회전 스위치를 변환했다.나는 이 변화가 매우 현실적으로 보이고 천천히 시작하고 신속하게 끝나기를 바란다.나는 본래 본기의 긴장을 풀 수 있는 기능, 예를 들어 ease-in을 사용할 수 있었지만 이것은 정확한 애니메이션을 만들 수 없기 때문에 나는 사용자 정의cubic-bezier()의 긴장을 풀 수 있는 기능을 사용했다.

transition: all 0.3s cubic-bezier(1, 0, 1, 1);

이 곡선은 과도가 매우 느리게 시작되고 빨리 끝난다는 것을 의미한다. 마치 진정한 스위치처럼 천천히 돌고'찰칵'소리가 종점에 가까워질 때까지 돌아간다.

입출력 문자 만들기

다양한 기법을 사용하여 입출력 역할을 생성할 수 있습니다.나는 본래 실제 자모를 사용해서 그것을 양식화하거나 특수한 글씨체를 사용할 수 있었다.그러나 이것들은 모두 매우 간단한 인물화이기 때문에 나는 사다리를 사용해서 그들을 만들기로 결정했다.
CSS의 점차적인 변화는 놀랍지만, 나는 그것들이 얼마나 강한지 모른다. CSS Drawings 에 관한 위대한 문장을 볼 때까지.
그래디언트의 진정한 위력은 CSS가 이를'이미지'로 간주하기 때문에 background 속성의 위력에 이득을 볼 수 있다.CSS의 배경은 그림자와 같이 쌓을 수 있을 뿐만 아니라 위치와 크기도 사용자 정의할 수 있습니다!
이것은 당신이 거의 CSS로 점차적으로 어떤 일을 할 수 있다는 것을 의미한다.얼마나 멀리 갈 수 있는지 알고 싶으면 https://a.singlediv.com/(이 사이트의 모든 예술품은 하나의div로 제작되었다)를 보세요.
문법은 매우 간단하다.

background: <image> <position> / <size>

쉼표를 사용하여 여러 그래디언트를 스택하고 background-repeat: no-repeat를 추가하여 그래디언트가 반복되지 않도록 할 수 있습니다.

.image {
  background:
    <image> <position> / <size>,
    <image> <position> / <size>,
    <image> <position> / <size>;
  background-repeat: no-repeat;
}

나는 두 개의 점차적인 배경으로 이 배역들을 만들었다.
"I"문자에 대해 나는 전백색 linear-gradient() 을 사용하고 좁고 길게 했다."O"문자에 대해 나는 4개의 색 블록을 사용하여 투명에서 흰색으로 다시 투명하게 했다.

background:
  linear-gradient(white, white) 50% 20% / 5% 20%, // White vertical line ("I")
  radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80% / 33% 25%; // White circle ("O")

만약 당신이 radial-gradient()를 보면, 각 색조 사이에 radial-gradient()의 간격이 있다는 것을 알 수 있을 것이다.

radial-gradient(
  transparent 50%, 
  white 52%, 
  white 70%, 
  transparent 72%
)

이것은 선명하고 픽셀화된 과도가 아니라 서로 다른 색을 혼합시켰다.이를 설명하려면 다음 그림을 참조하십시오.

이것은 색상 정지 사이에 간격이 있을 때 색상 사이에 매끄러운 블렌드가 생성되는 고유의 CSS 그래디언트 동작입니다.

제조 LED 그래디언트

위의 그림에서 보듯이 나는 두 개의 점차적인 변화를 겹쳐서 반투명한 빨간색 플라스틱 뒤에 숨겨진 LED 전구의 외관을 얻었다. 플라스틱에는 작은 원형이 돌출되어 있다.
나는 첫 번째 계단은 반드시 중복되지 않고 두 번째 계단은 반드시 중복되어야 하기 때문에 두 개의 요소를 사용해야 한다.그 밖에 나는 불빛을 반짝이고 싶어서 어쩔 수 없이 그것들을 분리했다.
첫 번째 요소는 2% 요소입니다. 저는 빨간색 LED 램프를 하나.light로 보여 주었는데 중심이 더욱 밝습니다(중심은 주황색이고 주위는 빨간색입니다).

.light {
  background-image: radial-gradient(
    adjust-hue(lighten($color, 20%), 35), // Orange
    $color 40%, // Red
    transparent 70%
  );
}

Don't be alarmed by adjust-hue() and lighten(), I will cover those in the next part. For now, just consider them as hex colors.

두 번째 원소는 radial-gradient() 원소입니다. 저는 투명한 중심을 가진 중복 원소.dots를 사용하여 원형의 돌출된 행렬을 만들었습니다.

.dots {
  background-image: 
    radial-gradient(transparent 30%, rgba(darken($color, 35%), 0.7) 70%);
    background-size: 10px 10px;
}

마지막으로 애니메이션을 사용하여 깜박임 효과를 만듭니다.

.light {
  animation: flicker 0.2s infinite 0.3s;
}

@keyframes flicker {
  0% {opacity: 1}
  80% {opacity: 0.8}
  100% {opacity: 1}
}

변수에 의한 색상 제어

이 펜이 갈수록 인기를 끌면서 일부 사람들은 다른 색깔을 보여 달라고 요구한다.처음에 나는 전체 CSS에서 하드코딩된 색을 사용했기 때문에 간단한 설정을 위해 이 색들을SASS 변수로 변경했다.
그러나 나는 주 색을 쉽게 설정할 수 있기를 희망하기 때문에 여러 개의 색 변수를 가지고 있는 것은 부족하다.나는 변수를 통해 모든 색과 음영을 조절해야 한다.
이를 실현하기 위해 저는 SASS의 내장 색 함수를 사용했습니다. radial-gradient(), lighten()와 darken()(SassMe는 이 함수 출력을 시각화하는 좋은 도구입니다).adjust-hue()와 lighten()는 자명하다.주어진 백분율에 따라 주어진 색을 밝게 하거나 어둡게 합니다.예를 들어 darken() 검은색과 50% 흰색을 혼합하여 회색을 낸다.

그러나 LED 램프의 경우 lighten(black, 50%)와lighten()는 부족하다. 램프의 중심은 주황색이고 주위는 빨간색이기 때문이다.이것은 다른 색깔이 아니라 완전히 다른 색깔이다.
이곳이 바로 darken()에 쓸모가 있는 곳이다.그것은 너로 하여금 색깔의 색조 속성을 정해진 정도까지 바꾸게 할 수 있다.
색상의 색조는 색상이 색상 바퀴에 있는 위치이며, 일반적으로 도(0-360) 단위로 단일 수치로 표시할 수 있다.

따라서 adjust-hue()를 사용하여 색상의 색상 특성을 오른쪽으로 35도 회전합니다.

adjust-hue($color, 35)

이것을 만듭니다.

따라서 색상이 빨간색이면 회전된 색상은 주황색입니다.하지만 색깔이 녹색이면 회전된 색깔은 파란색으로 변한다!

이제 스위치의 모든 색상을 단일 변수adjust-hue()로 제어할 수 있습니다.

요약

이 강좌의 편폭은 내가 예상한 것보다 조금 길다. 처음에 전환에 사용되는 모든 다른 기술과 기교를 보면 당황스러울 수도 있다.그러나 그것을 기본 원소로 분해할 때 이런 기술은 이해하기 쉽다.
저는 개발 과정에 대한 견해를 제공할 수 있기를 바랍니다. 저는 당신이 새로운 CSS 기술을 배웠으면 합니다.