CSS 전용 별 등급 구성 요소 등! (1 부)

별 등급 구성 요소 구축은 웹 개발의 고전적인 연습이며 다양한 기술을 사용하여 반복적으로 구현되었습니다. 일반적으로 소량의 JavaScript 코드가 필요하지만 CSS를 사용한 구현은 어떻습니까? 예, 네!

이것은 CSS 만 사용하여 구현 된 별 등급 구성 요소의 데모입니다. 업데이트 등급을 클릭 할 수 있습니다.

멋져요? CSS 만 사용하는 것 외에도 HTML 코드는 단일 요소입니다.

범위 입력 요소는 사용자가 두 경계 (최소 및 최대) 사이의 숫자 값을 선택할 수 있기 때문에 이상적입니다. 우리의 목표는이 기본 요소를 설계하고 추가 태그 나 스크립트없이 스타 등급 구성 요소로 변환하는 것입니다! 또한 마지막에 더 많은 구성 요소를 생성하므로 계속 지켜봐 주시기 바랍니다.

참고 : 이 기사는 CSS 부분에만 초점을 맞 춥니 다. UI, UX 및 접근성 측면에 대해 생각하기 위해 최선을 다했지만 내 구성 요소는 완벽하지 않았습니다. 몇 가지 단점 (오류, 접근성 문제 등)이있을 수 있으므로주의해서 사용하십시오.

요소 입력 요소와 같은 기본 요소를 디자인하는 것은 모든 기본 브라우저 스타일과 다른 내부 구조로 인해 약간 까다로울 수 있습니다. 예를 들어, 범위 입력 요소의 코드를 확인하면 Chrome (또는 Safari, Edge)과 Firefox간에 다른 HTML이 표시됩니다.

<input type="range">

운 좋게도, 우리는 내가 의존 할 공통점이 있습니다. 나는 두 가지 다른 요소를 찾을 것입니다 : 메인 요소

(입력 자체) 및 슬라이더 요소 (해당 요소는 마우스를 사용하여 스 와이프하여 값을 업데이트합니다).

우리의 CSS는 주로 다음과 같습니다 유일한 단점은 슬라이더 요소의 스타일을 두 번 반복해야한다는 것입니다. 다음을 시도하지 마십시오 :

전체 선택기가 유효하지 않기 때문에 작동하지 않습니다. Chrome 등은

부분을 이해하지 못하는 반면 Firefox는 <input type="range"> 부분을 이해하지 못합니다. 단순화를 위해이 기사에서는 다음 선택기를 사용할 것입니다.

그러나 데모에는 반복 스타일의 실제 선택기가 포함되어 있습니다. 소개로 충분합니다. 코딩을 시작합시다!

메인 요소 스타일 (스타) 먼저 크기를 정의합니다

우리가 각 별이 정사각형 영역에 있다고 생각하면 5 성급 등급의 경우 높이의 5 배 같은 너비가 필요하므로 를 사용하십시오. 5 값은 입력 요소의 속성의 값으로 정의됩니다.

따라서 우리는 새로 향상된

함수 (현재 크롬 만)에 의존하여 수동으로 정의하는 대신 값을 읽을 수 있습니다!

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

이제 간단히

속성을 ​​조정하여 별 수를 제어 할 수 있습니다. 이는 속성이 브라우저에서 내부적으로 사용되므로 값을 업데이트하면 구현과 브라우저의 동작을 제어 할 수 있습니다.

이 강화 된 버전의

는 현재 크롬에서만 사용할 수 있으므로 모든 데모에는 지원되지 않는 브라우저를 돕기위한 폴백 체계가 포함되어 있습니다. attr() 다음 단계는 CSS 마스크를 사용하여 별을 만드는 것입니다. 우리는 모양을 5 번 (

값에 따라 더 이상) 반복해야하므로 마스크 크기는

또는 max와 같거나 높이가 기본적으로 100%에 해당하기 때문에 var(--s) var(--s)와 단순화해야합니다. var(--s) 100% var(--s) 속성이 무엇인지 물어볼 수 있습니까? 나는 그것이 약간의 그라디언트가 필요하다고 말하는 것이 놀라운 일이 아니라고 생각하지만 SVG 일 수도 있습니다. 이 기사는 별 등급 구성 요소를 만드는 것에 관한 것이지만, 스타 부분이 다재다능하게 유지되므로 원하는 모양으로 쉽게 교체 할 수 있습니다. 그렇기 때문에이 게시물의 제목에서 "More"라고 말했습니다. 나중에 동일한 코드 구조를 사용하여 다양한 다른 변형을 얻는 방법을 볼 수 있습니다.

여기에는 별 모양을 구현하는 두 가지 다른 방법을 보여주는 데모가 있습니다. 하나는 그라디언트를 사용하고 다른 하나는 SVG를 사용하는 것입니다.

<input type="range">

이 경우 SVG 구현은 더 깨끗해 보이고 코드가 짧아 지지만 그라디언트 구현이 때때로 더 나을 수 있기 때문에 두 가지 방법을 모두 기억합니다.

슬라이더 스타일 (선택된 값) 이제 슬라이더 요소에 집중합시다. 마지막 데모를 사용한 다음 별을 클릭하고 슬라이더의 위치를 ​​확인하십시오. mask-image 좋은 소식은 모든 값 (최소에서 최대)의 경우 슬라이더는 항상 주어진 별의 영역 내에 있지만 각 별은 다른 위치를 가지고 있다는 것입니다. 값에 관계없이 위치가 항상 동일하다면 더 나을 것입니다. 이상적으로는 일관성을 위해 슬라이더는 항상 별의 중심에 있어야합니다.

이것은 위치와 업데이트 방법을 보여주는 그림입니다.

이 라인은 각 값에 대한 슬라이더 위치입니다. 왼쪽에는 슬라이더가 기본 요소의 왼쪽 가장자리에서 오른쪽 가장자리로 이동하는 기본 위치가 있습니다. 오른쪽에서는 양쪽에 약간의 공간을 추가하여 슬라이더 위치를 더 작은 영역으로 제한하면 더 나은 정렬을 얻을 수 있습니다. 이 공간은 별 크기의 절반 또는 입니다. 우리는 이것을 위해 패딩을 사용할 수 있습니다 :

슬라이더 크기에 대해 생각하지 않았기 때문에 더 낫지 만 완벽하지는 않습니다. 즉, 우리가 실제로 중심이 아닙니다. 슬라이더 크기를 매우 작게 만들기 위해 1px와 같은 너비를 사용하기 때문에 이것은 문제가되지 않습니다.

슬라이더는 이제 별 중앙에 위치한 얇은 선입니다. 나는 위치를 강조하기 위해 빨간색을 사용하지만 실제로는 투명하기 때문에 색상이 필요하지 않습니다.

당신은 우리가 여전히 최종 결과와는 거리가 멀다고 생각할 수도 있지만 거의 끝났습니다! 이 퍼즐을 완성하기 위해 속성이 누락되었습니다.

속성을 ​​사용하면 함수를 사용하여 요소 외부에 장식을 그릴 수 있습니다. 이를 위해 슬라이더를 작고 투명하게 만듭니다. 색칠은

를 사용하여 수행됩니다. 나는 소스로 두 개의 단색의 그라디언트를 사용하겠습니다 :

우리는 다음 내용을 작성합니다 :

<input type="range">

위는 요소의 각 측면에서

의 영역을 100px로 확장하고 그라디언트가 해당 영역을 채울 것임을 의미합니다. 다시 말해, 그라디언트의 각 색상은 영역의 절반, 즉 100px를 커버합니다. border-image 논리를 이해하십니까? 우리는 슬라이더의 양쪽에 넘쳐나는 음영을 만들었습니다. 별을 클릭 할 때마다 슬라이더를 논리적으로 따라갈 수있는 음영이 있습니다.

이제 100px 대신 매우 큰 값을 사용해 봅시다 :

우리는 거의 끝났습니다! 색칠은 모든 별을 채우지 만 우리는 그것이 중간에 있고 선택한 별 전체에있는 것을 원하지 않습니다. 이를 위해 50%를 사용하는 대신 기울기를 약간 업데이트하면 50%

를 사용합니다. 우리는 별의 너비의 절반에 해당하는 오프셋을 추가합니다. 이는 첫 번째 색상이 더 많은 공간을 차지하고 별 등급 구성 요소가 완벽하다는 것을 의미합니다!

우리는 슬라이더의 높이를 정의하는 대신 코드를 약간 최적화 할 수 있으며 0으로 유지하고 의 수직

를 고려하여 음영을 확장합니다. var(--s)/2

우리는 또한 원추형 그라디언트를 사용하여 그라디언트를 다르게 쓸 수 있습니다.

나는 border-image의 구문이 이해하기 쉽지 않다는 것을 알고 있으며, 설명하기가 조금 빠릅니다. 그러나 나는 Smashing Magazine에 매우 자세한 기사가 있는데, 여기서이 속성을 많은 예제와 함께 해부하고 그것이 어떻게 작동하는지 더 깊이 이해하기 위해 그것을 읽도록 초대합니다. outset 구성 요소의 전체 코드는 다음과 같습니다.

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

그게 다야! 몇 줄의 CSS 코드를 사용하면 멋진 별 등급 구성 요소가됩니다!

세미 스타 등급

점수를 하프 스타로 설정하는 방법은 무엇입니까? 이것은 매우 일반적이며 약간의 조정을 통해 이전 코드를 완료 할 수 있습니다.

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

먼저, 입력 요소를 전체 단계 대신 절반으로 증가하도록 업데이트합니다.

기본적으로 단계 크기는 1이지만 .5 (또는 모든 값)로 업데이트 한 다음 최소값을 .5로 업데이트 할 수 있습니다. CSS 측면에서 패딩을 border-image에서

로 변경하고 그라디언트의 오프셋에 대해서도 동일하게 수행합니다.

두 구현의 차이는 절반 계수이며, 이는 또한 계단 크기 값이기도합니다. 이것은 우리가 를 사용하고 두 경우 모두에 맞는 공통 코드를 만들 수 있음을 의미합니다.

input[type="range"]::thumb {
  /* 滑块样式 */
}

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 删除默认浏览器样式 */
}

이것은 단계 크기를 수정하는 것이 과립성을 제어하기 위해해야 ​​할 모든 것인 데모입니다. 별 수를 제어하기 위해

속성을 ​​사용할 수도 있다는 것을 잊지 마십시오.

키보드를 사용하여 를 조정하십시오 아시다시피, 키보드를 사용하여 범위 슬라이더에서 입력 한 값을 조정할 수 있으므로 키보드를 사용하여 점수를 제어 할 수도 있습니다. 이것은 좋은 일이지만 경고가 있습니다.

속성을 ​​사용하기 때문에 더 이상 키보드 입력에 의존하는 사용자의 접근성 문제인 키보드의 초점을 나타내는 기본 개요가 없습니다.

더 나은 사용자 경험을 얻고 구성 요소에 더 액세스 할 수 있도록하려면 포커스에 대한 개요를 표시하는 것이 가장 좋습니다. 가장 쉬운 솔루션은 추가 래퍼를 추가하는 것입니다.

내부의 입력이 초점을 맞추면 개요가 있습니다.

키보드를 사용하여 다음 예제 에서이 두 등급을 조정하십시오. 또 다른 아이디어는 요소 주변의 작은 영역을 보관하여 개요를 표시하는 더 복잡한 마스크 구성을 고려하는 것입니다.

<input type="range">

나는 단일 요소 구현을 유지하기 때문에 마지막 메소드를 사용하는 것이 좋습니다. 그러나 HTML 구조를 사용하면 부모 요소에 초점을 추가 할 수 있으며 마스크 구성을 간단하게 유지할 수 있습니다. 그것은 모두 당신에게 달려 있습니다!

더 많은 예!

이전에 말했듯이, 우리는 단순한 별 등급 구성 요소 이상을 만들었습니다. 마스크 값을 쉽게 업데이트하여 원하는 모양을 사용할 수 있습니다.

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

여기 예를 들어, 나는 별 대신 심장의 SVG를 사용하고 있습니다.

왜 나비가 아닌가?

이번에는 PNG 이미지를 마스크로 사용합니다. SVG 또는 그라디언트를 사용하는 데 익숙하지 않은 경우 투명한 이미지를 사용할 수 있습니다. SVG, PNG 또는 그라디언트가있는 한이 방법으로 어떤 형태로든 할 수 있습니다.

우리는 다음과 같은 볼륨 컨트롤 구성 요소를 추가로 사용자 정의하고 생성 할 수 있습니다. 마지막 예제에서는 특정 모양을 반복하는 대신 복잡한 마스크 구성을 사용하여 신호 모양을 만듭니다.

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

결론 우리는 별 등급 구성 요소로 시작하여 많은 멋진 예를 들었습니다. 제목은 우리가하는 일이기 때문에 "범위 입력 요소를 설계하는 방법"일 수 있습니다. 스크립트 나 추가 태그없이 기본 구성 요소를 업그레이드하고 몇 줄의 CSS 코드 만 사용했습니다.

> 당신은 어디 계세요? 동일한 코드 구조를 사용하는 또 다른 아름다운 구성 요소를 생각할 수 있습니까? 주석 섹션에서 예제를 공유하십시오!

기사 시리즈

CSS 전용 별 등급 구성 요소 등! (1 부) CSS 전용 별 등급 구성 요소 등! (2 부) - 3 월 7 일에 출시되었습니다!

위 내용은 CSS 전용 별 등급 구성 요소 등! (1 부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!