CSS에서 간단한 Skeuomorphic 단추를 만드는 방법

만약 skeuomorphism의 팬이라면, 이 강좌는 이런 스타일의 단추를 만드는 방법을 소개할 것입니다.야외에서 다양한 모양의 Skeuomorphic 단추를 찾을 수 있지만, 나는 this Pen 에서 사용한 것과 유사한 기본 단추를 만들 것이다.

정상 상태

초기 버튼 상태에서 시작하려면 다음 HTML이 필요합니다.

<button>
    <span tabindex="-1">Button</span>
</button>

<span> 및tabindex을 사용하는 이유는 나중에 키보드 초점만 뽑기 위해서입니다.여기에서 CSS:focus-visible를 사용할 수 있지만 보다 심도 있는 브라우저 지원을 위해 Roman Komarov’s approach를 이미 사용합니다.
Sass(SCSS 구문)를 사용하여 보다 효과적으로 구성하고 효율성을 높이기 위해 모든 스타일 설계를 수행합니다.그리고 우리는 아무런 상태도 없는 평면 컬러 단추와 단추 배경과 텍스트 색깔의 두 변수 $btnColor, $btnTextColor 를 시작합니다.

body {
    background: #c7cad1;
}
button {
    $btnColor: #0053d0;
    $btnTextColor: #fff;
    background: $btnColor;
    border: 0 {
        radius: 0.375em;
    };
    color: $btnTextColor;
    cursor: pointer;
    font: 24px/1.5 sans-serif;
    margin: 1.5em auto;
    padding: 0.5em 1em;
    -webkit-tap-highlight-color: transparent;
    &, span {
        display: block;
    }
}

여기에는 두 가지 관건이 있다.

바디 (또는 부모 요소는 무엇입니까) 의 경우 페이지 배경이 약간 어두워 단추 구멍의 모든 가장자리를 볼 수 있습니다.

애플 기기의 짧은 짙은 색이 튀어나오지 않도록 제거-webkit-tap-highlight-color.

버튼과 텍스트 간격은 모두 display: block 이어야 하므로 끝에 가까운 위치에서 전환할 수 있습니다.

지금까지 우리는 다음과 같은 것을 가지고 있다.

지금 우리는 외관을 응용한다.$btnTextColor 이후에 단추 가장자리, 단추 구멍 가장자리, 음영 색깔, 짙은 색 가장자리, 연한 색 가장자리와 더 많은 단추 색깔을 사용하는 짙은 색 가장자리에 더 많은 변수가 필요합니다.

button {
    . . .
    $btnEdge: 0.2em;
    $btnHoleEdge: 0.1em;
    $dropShadowColor: rgba(0,0,0,0.47);
    $darkEdgeColor: rgba(0,0,0,0.27);
    $lightEdgeColor: rgba(255,255,255,0.27);
    $coloredDarkEdgeColor: darken($btnColor,10%);
    . . .
}

다음은 &, span { } 이전의 어느 위치에서든 대량의 단추를 그리는 상자의 그림자 순서는 다음과 같다.

button {
    . . .
    box-shadow:
        // drop shadow
        $btnEdge $btnEdge 0.5em $dropShadowColor,
        // top, left, and right edges of hole
        0 (-$btnHoleEdge) 0 $btnHoleEdge $darkEdgeColor,
        // bottom edge of hole
        0 $btnHoleEdge 0 $btnHoleEdge $lightEdgeColor,
        // right edge of button
        (-$btnEdge) 0 $btnEdge $coloredDarkEdgeColor inset,
        // top edge of button
        0 $btnEdge $btnEdge $lightEdgeColor inset,
        // left edge of button
        $btnEdge 0 $btnEdge $lightEdgeColor inset,
        // bottom edge of button
        0 (-$btnEdge) $btnEdge $coloredDarkEdgeColor inset;
    . . .
}

우리가 어디에서 그림자를 그리거나 음영처리하는지는 빛의 방향에 달려 있다.이런 상황에서 그것은 왼쪽 상단에서 올 것이다.따라서 그림자는 오른쪽과 위에서 0.2m를 투사해야 한다.모든 내용을 음영처리하는 방법을 설명하려면:

우리는 $darkEdgeColor 빛을 거의 받지 말아야 하는 구멍 가장자리에 위, 왼쪽, 오른쪽 등 어두운 투명도를 추가합니다.

$lightEdgeColor 투명한 흰색을 구멍과 빛을 더 많이 받아들이는 버튼 가장자리에 추가하는 데 사용됩니다. (참고: 음영이 처음에 덮어쓰기 때문에 버튼을 눌렀을 때만 전체 효과를 볼 수 있습니다.)

최소한의 빛을 받는 버튼 가장자리에 대해서는 $coloredDarkEdgeColor 대신 $darkEdgeColor 색상을 사용합니다.

무늬는 이제 역할을 발휘하기 시작했지만 개선해야 할 점이 더 많다.

위에서 아래로 가벼운 음영을 추가하고 현재 배경의 맨 위에 작은 반사를 추가함으로써 흥미를 높인다.

button {
    . . .
    background:
        // top-to-bottom shading
        linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.13)),
        // reflection at top
        radial-gradient(90% 7% at 50% 8%,rgba(255,255,255,0.47) 25%,rgba(255,255,255,0) 50%),
        $btnColor;
}

어떤 각도에서 물체를 볼 때, 때때로 너는 거의 볼 수 없는 음영 과도를 볼 수 있다.플라스틱으로 된 이 사진을 예로 들면:

macOS의 디지털 색상 측정기로 그 옆면을 따라 운행하거나 (또는 당신이 가장 좋아하는 이미지 편집 도구의 파이프로 비슷한 이미지를 클릭할 수 있음) 16진법이 빨간색에서 짙은 빨간색으로 점차 바뀌는 것을 볼 수 있다. (대략 #eb0011에서 #d5000e)이것이 바로 첫 번째 사다리의 목적이다.재료에 따라 상단 모서리에서 반사를 볼 수 있습니다. 두 번째 그라데이션은 이 점을 설명합니다.
마지막으로 버튼의 초기 상태에 추가된 것은 이전 텍스트 섀도우&, span { }입니다.

button {
    . . .
    text-shadow: 0 0 $btnEdge fade-out($btnTextColor,0.53);
    . . .
}

만약 우리가 $btnEdge값과 같고 색깔은 같지만 불투명도가 절반에 달하는 경미한 모호함을 제공한다면 텍스트는 이렇게 뚜렷하게 보이지 않을 것이다.
우리가 지금 가지고 있는 것을 봐라. 우리는 이미 버튼 상태를 계속할 준비가 되어 있다.

: 활성 상태

우리의 하강 상태를 시작하기 위해서는 추가 변수$coloredDarkerEdgeColor와 약간 짙은 파란색이 필요하다.

button {
    . . .
    $coloredDarkerEdgeColor: darken($btnColor,20%);
    . . .
}

버튼을 눌렀을 때 버튼의 짙은 파란색 테두리가 어두워져서 버튼과 구멍 테두리 사이에 빛이 없음을 표시해야 합니다.
그런 다음 동일한 섀도우 스택을 적용하여 :active 매개변수를 변경하고 버튼 텍스트의 경계를 축소합니다.

button {
    . . .
    &:active {
        box-shadow:
            // pull shadow inward
            0 0 0 $dropShadowColor,
            // edges of hole stay the same
            0 (-$btnHoleEdge) 0 $btnHoleEdge $darkEdgeColor,
            0 $btnHoleEdge 0 $btnHoleEdge $lightEdgeColor,
            // darker right shadow with a bit of blue to result from button being deep into hole
            (-$btnEdge) 0 $btnEdge $coloredDarkerEdgeColor inset,
            // similar shadow at top and left
            0 $btnEdge $btnEdge $darkEdgeColor inset,
            $btnEdge 0 $btnEdge $darkEdgeColor inset,
            // same as 4th shadow but coming from bottom
            0 (-$btnEdge) $btnEdge $coloredDarkerEdgeColor inset;
        span {
            transform: scale(0.95);
        }
    }
}

이때 발생한 상황을 요약합니다.

x와 y의 위치를 0으로 바꾸어 음영을 안으로 당깁니다.

아무 일도 일어나서는 안 되기 때문에 우리는 구멍의 가장자리에 두 개의 프레임 그림자만 보존한다.

네 번째이자 마지막 음영은 우리가 사용한 $coloredDarkerEdgeColor 짙은 파란색을 응용한 곳이다.

마지막 그림자 이전의 밝은 그림자는 직접적으로 상반된 색깔, 즉 $darkEdgeColor을 사용해야 한다.

과 동시에 단추 텍스트transform는 위에서 아래로 3차원 투시도를 제공합니다.

요컨대, 우리가 여기서 하는 것은 시각적 착각이다. 왜냐하면 그것은 단지 한 쌍의 프레임 그림자와 텍스트 축소의 변화이기 때문이다.
현재 단추에 필요한 것은 애니메이션들이다.0.1초box-shadow와 transform의 변환을 단추와 경계, will-change: transform에 추가하면 단추의 위아래 움직임을 막을 수 있습니다.

button {
    . . .
    transition-property: box-shadow;
    &, span {
        display: block;
        transition: {
            duration: 0.1s;
            timing-function: linear; 
        }
    }
    span {
        transition-property: transform;
        will-change: transform;
    }
    . . .
}

이 모든 것이 끝난 후에 우리는 우리가 원하는 효과를 얻었다.그러나 버튼을 누르든 누르든 원생 초점 고리가 버튼이나 텍스트를 둘러싸고 있는 것을 보면 이상하게 보인다.이 문제를 해결하는 것이 마지막 단계가 될 것이다.

: 초점 상태

단추와 텍스트에 :focus 의 원본 윤곽이 있어서는 안 되기 때문에, 우리는 그것을 제거합니다 outline: none.

button {
    . . .
    &, span {
        . . .
        &:focus {
            outline: none;
        }
    }
    . . .
}

새로운 초점 스타일에 대해 우리는 단추에 가장 적합한 것을 고려해야 한다.버튼이 LED인 경우 배경색 변경은 버튼 색상의 추가 상자 그림자와 일치합니다.이러한 플라스틱 버튼의 경우 텍스트 색상과 그림자를 변경하는 것이 가장 좋습니다.이것은 변수 $btnTextFocusColor 가 필요합니다. 단추 색깔의 옅은 그림자를 사용합니다.:active 선택기 이후에 우리는 :focus 을 적용할 것이다.

button {
    . . .
    $btnTextFocusColor: lighten($btnColor,40%);
    . . .
    &:focus {
        color: $btnTextFocusColor;
        text-shadow: 0 0 $btnEdge fade-out($btnTextFocusColor,0.53);
    }
}

지금 저희가 완전한 버튼이 생겼어요!만약 네가 지금 그것을 클릭한다면, 그 짜증나는 초점 고리는 나타나지 않을 것이다.또 새로운 관심사는 지속돼서는 안 된다.단추 텍스트를 포함하는 경계가 덮어쓰기 때문입니다.이렇게 하면 이 버튼을 누르거나 누르는 것이 더욱 자연스러워 보인다.따라서 텍스트는 키보드를 통해서만 색상을 바꾸어 사용자가 탭을 어디서 만드는지 표시합니다.

결론

요컨대, 심지어 다른 폼 컨트롤러와 같이 생동감 있게 보이는 단추는 복잡한 HTML 구조를 필요로 하지 않는다.비록 우리는 이곳에서 그것들을 사용하지 않았지만, 만약 당신이 더 많은 원소가 필요하다고 생각한다면, 당신은 심지어 :before 와 :after 를 사용할 수 있습니다. 이것은 내가 this LED switch 에서 한 것처럼 회전 부품에 사용됩니다.그래디언트와 직사각형 섀도우를 효과적으로 스택하는 방법을 배우면 가능한 한 적은 DOM 요소에서 많은 디테일을 얻을 수 있습니다.