제로 라인의 JS로 대화형 CSS 아바타 편집기 만들기

이 게시물은 JavaScript 없이 간단한 아바타 편집기를 만드는 데 사용할 수 있는 몇 가지 기술을 보여줌으로써 CSS 상호 작용을 탐구합니다. 구현하는 것이 즐거웠고 읽고 시도하는 것도 똑같이 재미있기를 바랍니다. 즉, 프로덕션에서 실제로 이것을 사용하는 사람은 누구에게도 권장하지 않습니다. 😊

CSS를 사용한 상호작용

CSS:checked 의사 클래스 선택기를 사용하여 JavaScript를 사용하지 않고 페이지에 기본 수준의 상호 작용을 추가할 수 있습니다. 사용자가 체크박스나 라디오 버튼을 전환할 때 켜고 끌 수 있다는 점에서 특별한 선택기입니다. 예를 들어, 다음 스니펫은 선택된 체크박스를 선택되지 않은 체크박스의 두 배로 만듭니다.

input:checked {
    transform : scale(2);
}

다음과 같습니다.


id 및 for 를 사용하여 확인란 또는 라디오 버튼에 레이블을 연결하면 레이블을 클릭하여 확인란을 토글할 수도 있습니다.

<input type="checkbox" id="box" />
<label for="box">Click label to toggle</label>

CSS sibling combinators을 사용하면 확인란이 전환될 때 레이블에 영향을 줄 수 있습니다.

input:checked + label {
    background : orangered;
}

그런 다음 확인란을 숨기면 여전히 레이블을 사용하여 전환할 수 있습니다. CodePen에서 찾을 수 있는 CSS 전용 예제와 같이 흥미로운 가능성을 열어줍니다.

Tabs

Hamburger menu

Block stacking game

CSS 전용 범위 컨트롤 만들기

상단에 표시된 아바타 편집기는 일련의 범위 컨트롤을 사용하여 아바타의 모양에 영향을 미칩니다. JavaScript를 사용하지 않고 이를 허용하려면 <input type="range">를 사용할 수 없습니다. 대신 위에서 설명한 기술을 사용하여 직접 굴려야 합니다.

범위의 각 세그먼트는 라디오 버튼과 레이블로 표시됩니다. 레이블은 범위 컨트롤의 세그먼트처럼 보이도록 스타일이 지정됩니다. 아래는 4개의 세그먼트로 범위 컨트롤을 정의하는 HTML입니다.

<div class="range">
    <input type="radio" id="range4" name="range">
    <label for="range4"></label>
    <input type="radio" id="range3" name="range">
    <label for="range3"></label>
    <input type="radio" id="range2" name="range" checked>
    <label for="range2"></label>
    <input type="radio" id="range1" name="range">
    <label for="range1"></label>
</div>

스타일이 없으면 아무도 속이지 않습니다.



약간의 CSS를 추가하여 범위 컨트롤의 트랙처럼 보이게 만들 수 있습니다.

.range {
    display : flex;
}

/* Hide the radio buttons */
.range input {
    display : none; 
}

/* Style labels to look like a solid range control track */
.range label {
    width : 16px;
    height : 6px;
    background : #efefef;
    border-block : 1px solid #b2b2b2;
    display : flex;
    cursor : pointer;
    align-items : center;
}

.range label:first-of-type {
    border-radius : 6px 0 0 6px;
    border-inline-start : 1px solid #b2b2b2;
}

.range label:last-of-type {
    border-radius : 0 6px 6px 0;
    border-inline-end : 1px solid #b2b2b2;
}

결과:



현재 값을 강조 표시하기 위해 :checked를 활용하고 레이블이 엄지손가락 역할을 하도록 의사 요소 스타일을 지정합니다.



이제 까다로운 부분으로 이동하여 트랙에서 엄지손가락 앞의 부분을 강조 표시하고 싶습니다. 문제는 이전 형제를 대상으로 하는 CSS 결합자가 없다는 것입니다(어쨌든 아직은 아닙니다). DOM에서 요소 순서를 반대로 하면 ~ 결합자를 사용하여 시각적으로 이전 형제처럼 보이는 대상을 대상으로 지정할 수 있습니다 😵‍💫

.range {
    /* Reverse element order */
    flex-direction : row-reverse;
    /* Move them back to the left */
    justify-content : flex-end;
}

엉망:



이제 첫 번째 세그먼트가 마지막 세그먼트이고 그 반대의 경우도 마찬가지입니다. 모양이 다시 올바르게 되려면 :first-of-type 및 :last-of-type 선택기의 위치를 ​​전환해야 합니다.



그리고 마지막으로 트랙 하이라이트를 추가합니다(위의 반전으로 가능).

.range :checked ~ label {
    background : #0075ff;
    border-color : #4b76bb;
}

범위 제어처럼 보입니다!

상호 작용을 위한 범위 컨트롤 사용

위의 범위 컨트롤이 멋지고 상호 작용하는 동안 다른 것을 조작하는 데 사용해야 합니다 🤔. (현재) 다시 한 번 ~ 결합자를 사용하여 형제 요소에만 영향을 줄 수 있습니다. 따라서 다른 요소를 외부.range 요소에 넣어야 합니다.

<div class="range">
    <!-- Existing range markup -->

    <div class="avatar"></div>
</div>

그리고 CSS 변수를 사용하여 범위 값에 따라 아바타의 크기를 조정하려면 여기에서 좀 더 CSS 마법을 사용하십시오.

/* Represent the leftmost value, since we reversed the elements */
:nth-of-type(4):checked ~ .avatar {
    --avatar-size : 0.5;
}

:nth-of-type(3):checked ~ .avatar {
    --avatar-size : 0.75;
}

:nth-of-type(2):checked ~ .avatar {
    --avatar-size : 1;
}

/* Rightmost value */
:nth-of-type(1):checked ~ .avatar {
    --avatar-size : 1.25;
}

.avatar {
    /* Lots of CSS here to make the avatar look like a dog */

    transform : scale(var(--avatar-size));
}

시도해 보세요:



그게 다야! 🎉 게시물의 기술을 사용하여 상단에 표시된 전체 아바타 편집기를 만들 수 있습니다. CodePen에서 확인하십시오. 응용 프로그램에서 이미 유사한 트릭을 사용하고 있다면 우리는 그것에 대해 듣고 싶습니다.

추신. 그리 멀지 않은 미래에 우리는 :has() 선택기를 사용하여 직계 형제가 아닌 요소에 영향을 미칠 수 있을 것입니다(이를 사용하여 요소를 뒤집는 것도 피할 수 있음). 이를 사용하여 향후 업데이트를 계속 지켜봐주십시오 ⭐