재미있는 시간 스타일링 확인란 상태

웹 디자인에서는 텍스트 입력 상자, 링크 및 버튼 스타일을 무시할 수 있지만 확인란은 다릅니다. 따라서 확인란의 스타일 디자인은 항상 신선도를 가져옵니다.

체크 박스 설계는 복잡하지 않지만 상태 변경을 나타내는 간단한 배경색 변경 또는 경계를 추가/제거 할 필요는 없습니다. 훌륭한 디자인 기술 없이는 훌륭한 결과를 쉽게 달성 할 수 있습니다. 이 기사에서는 몇 가지 방법을 보여줍니다.

기본 지식

다음 예에서 확인란은 기본적으로 3 층 레이아웃을 채택합니다. 하단은 확인란이고 상단은 두 개의 중첩 요소 또는 의사 요소입니다. 표시되는 요소에 따라 확인란의 선택 또는 확인되지 않은 상태를 나타냅니다.

코드에서 모든 레이아웃 (확인란 포함)은 그리드를 사용합니다. 실제 상황에 따라 다른 적절한 레이아웃을 선택할 수 있습니다. 코드 및 디자인에 대한 더 많은 지침은 코드 주석에 있습니다.

또한 확인란 상단에 중첩 된 모든 요소에는 pointer-events: none .

이제 첫 번째 접근 방식을 살펴 보겠습니다.

방법 1 : 배경을 상태 표시기로 혼합하십시오

CSS의 하이브리드 모드는 다양한 기술입니다. 둘 이상의 요소 또는 배경에 대한 색상 조작은 예기치 않은 시나리오에서 매우 유용합니다.

확인란이 예입니다.

 <label for="un">un</label>

 입력 [type = checkbox] :: 이전,
입력 [type = checkbox] :: 이후 {
  믹스 블렌드 모드 : 하드 라이트;
  포인터 이벤트 : 없음;
  /*더 많은 스타일*/
}
입력 [type = checkbox] :: 이전 {
  배경 : 녹색;
  내용 : '✓';
  색상 : 흰색;
  /*더 많은 스타일*/
}
입력 [type = checkbox] :: 이후 {
  배경 : 파란색;
  내용 : ';';
  /*더 많은 스타일*/
}
입력 [type = checkbox] : Checked :: 이후 {
  믹스 블렌드 모드 : UnSet;
  색상 : 투명;
}

이 예에서는 확인란의 의사 요소를 각각 녹색과 파란색으로 설정하고 함께 중첩하고 각 요소의 mix-blend-mode 값을 설정합니다. 이것은 각 요소의 배경이 배경색과 혼합되어 있음을 의미합니다.

최상위 색상이 어둡거나 빛인지에 따라 곱셈 또는 필터링 효과를 시뮬레이션하는 hard-light 값을 사용했습니다. MDN의 다른 하이브리드 모드를 깊이 파고들 수 있습니다.

확인란이 선택되면, pseudo element ::after 의 mix-blend-mode 값이 unset 설정되어 다른 시각적 효과가 발생합니다.

방법 2 : 3D 애니메이션을 만듭니다

컬러 블록 애니메이션은 재미 있습니다. 그것이 3D를 보이면 더 좋을 것입니다. CSS는 3D 공간 렌더링 요소를 시뮬레이션 할 수 있습니다. 따라서 3D 상자를 만들고 회전하여 확인란 상태의 변경 사항을 표시 할 수 있습니다.

<div>
  <div>
<i></i><i></i><i></i><i></i>
</div>
</div>
<label for="un">un</label>

 .c-checkbox> div {
  전환 : .6S 입방-베 지어 (.8, .5, .2, 1.4) 변환;
  변환 스타일 : Preserve-3D;
  포인터 이벤트 : 없음;
  /*더 많은 스타일*/
}
/*앞쪽*/
.c-checkbox> div> i : 1 차 자녀 {
  배경 : #ddd;
  변환 : translatez (-10px);
}
/*뒤쪽에*/
.c-checkbox> div> i : 최후의 자식 {
  배경 : 파란색;
  변환 : Translatez (10px);
}
/*옆*/
.c-checkbox> div> i : nth-of-type (2),
.c-checkbox> div> i : nth-of-type (3) {
  변환 : rotatex (90deg) rotatey (90deg);
  위치 : 상대;
  높이 : 20px;
  상단 : 10px;
}
.c-checkbox> div> i : nth-of-type (2) {
  배경 : 해군;
  오른쪽 : 20px;
}
.c-checkbox> div> i : nth-of-type (3) {
  배경 : DarkSlateGray;
  왼쪽 : 20px;
}

확인란 후<div> 요소는 3D 우주 컨테이너가됩니다. <code>transform-style: preserve-3d; 수 있습니다 transform<i></i> 요소 (회색과 파란색), 그들 사이에는 일정 거리가 있습니다. 다른 두 가지 요소가 왼쪽과 오른쪽을 덮고 그들 사이에 끼워졌습니다. 상단과 하단을 제외하고 상단과 하단으로 덮인 판지 상자와 같습니다.

확인란이 선택되면이 회색과 파란색 상자는 다른쪽으로 옆으로 회전합니다. 나는 이미 이후로<div> 전환이 추가되어 회전이 애니메이션됩니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 입력 : 확인 된 div { 변환 : Rotatey (180deg); }</pre><div class="contentsignin">로그인 후 복사</div></div> <h3> 방법 3 : 둥근 모서리를 사용하십시오</h3> <p> 확인란의 둥근 모서리를 변경 하시겠습니까? 흥미로운 것은 없습니다. 근처의 다른 체크 박스의 둥근 모서리를 바꾸시겠습니까? 이것은 조금 흥미 롭습니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;label for=&quot;un&quot;&gt;un&lt;/label&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 입력 { 배경 : #ddd; Border-Radius : 20px; /*더 많은 스타일*/ } 입력 : NOT (: First-Type) :: 이전 { 콘텐츠: ''; 변환 : Translatey (-60px); /*한 줄을 이동* / 포인터 이벤트 : 없음; } 입력 : 확인 된 * 입력 :: 이전, 입력 : 마지막 유형 : 점검 { Border-Radius : 20px; 배경 : 파란색; } 입력 : 확인 된 * 입력 : 확인 * 입력 :: 이전 { 경계-왼쪽-라디우스 : unset! 중요; 국경-오른쪽-라디우스 : Unset! 중요; } 입력 : Checked :: 이전 { 국경-바닥-왼쪽-라디우스 : Unset! 중요; 국경-오른쪽-래디 우스 : unset! 중요; } /* 두 번째 및 마지막 확인란 사이*/ 입력 : nth-of-type (4) : Checked * 입력 : Checked { 국경-왼쪽-라디우스 : Unset; 국경-오른쪽 라디우스 : unset; }</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 이전에 데모와 상호 작용 한 경우 확인란을 클릭하거나 클릭하면 자체 테두리뿐만 아니라 앞면 및 후면 확인란의 경계를 변경할 수 있습니다.</p> <p> 이제 이전 요소를 선택할 선택기가 없으며 다음 요소 만 선택할 수 있습니다. 따라서 이전 확인란의 모양을 제어하는 ​​방법은 확인란의 의사 요소를 사용하여 이전 확인란을 스타일링하는 것입니다. 첫 번째 확인란을 제외한 서로 확인란은 그 앞에있는 확인란 상단으로 이동하는 의사 요소가 나타납니다.</p> <p> 확인란 A, B 및 C가 하나씩 배열된다고 가정합니다. B를 클릭하면 B의 의사 요소를 설정하여 A의 모양을 변경하고 C의 의사 요소를 설정하여 B의 모양을 변경하고 D의 의사 요소를 설정하여 C의 모양을 변경할 수 있습니다.</p> <p> B에서 시작하여 B, C 및 D의 의사 요소는 다음 요소 선택기가 레이아웃에서 이들 사이에 사용할 수있는 한 액세스 할 수 있습니다.</p> <p> 각 체크 박스의 네 모서리는 처음에 선택되고 선택되지 않은 경우 둥글게됩니다. 그러나 확인란이 선택되면 다음 확인란의 상단 모서리와 전면 확인란의 하단 모서리가 직선이됩니다 (둥근 모서리를 덮어 쓰고 삭제하여).</p> <h3> 방법 4 : CSS 마스크를 사용하십시오</h3> <p> 토글 버튼… 코드에 관한 한, 확인란이기도합니다. 따라서이 확인란을 토글 버튼으로 설계 할 수 있으며 CSS 마스크를 사용하여 수행 할 수 있습니다. 요컨대, 이것은 이미지를 사용하여 배경 부분을 필터링하는 기술입니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.one.skin { 배경 : 비 반복 센터 -40px URL ( 'photo-1584107662774-8d575e8f3550? w = 350 &amp; q = 100'); } .two.skin { 배경 : 비 반복 센터 -110px URL ( 'Photo-1531430550463-9658D67C492d? W = 350 &amp; Q = 100'); -마스크 : Radial-Gradient (45px 45px, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 40px); 마스크 이미지 : var (-webkit-mask-image; }</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 두 개의 스킨 (풍경 사진 표시)이 확인란 상단에 있습니다. 상단에는 일반적인 토글 버튼 모양의 <code>mask-image 가 생깁니다. 왼쪽에는 투명한 원이며 나머지는 완전히 불투명합니다. 투명한 원을 통해 아래 사진을 볼 수있는 반면, mask-image 의 나머지 부분은 상단에 사진을 표시합니다.

확인란을 클릭하면 투명 원이 오른쪽으로 이동하여 원을 통해 상단의 이미지를 볼 수 있고 나머지는 아래쪽에 사진을 표시합니다.

 입력 : 확인 ~ .two.skin {
  -마스크 : Radial-Gradient (305px 45px에서 원, RGBA (0,0,0,1) 40px, RGBA (0,0,0,0) 40px);
  마스크 이미지 : var (-webkit-mask-image;
}

방법 5 : 상자 섀도우를 사용하십시오

마지막으로, 가장 쉬운 일을 살펴 보겠습니다. 그러나 그것은 또한 가장 효과적인 접근법 : 애니메이션 내부의 그림자입니다.

 <label for="un">un</label>

 입력 {
  전환 : Box-Shadow .3s;
  배경 : Lightgrey;
  /*더 많은 스타일*/
}
입력 : 확인 된 { 
  Box-Shadow : 삽입 0 0 20px blue;
}

일부 CSS 속성은 기본적으로 애니메이션 할 수 있으며 그 중 하나는 box-shadow 입니다. 이 미묘한 애니메이션은 미니멀리스트 테마에 적합합니다.

그게 다야! 다음에 확인란에서 작업 할 때 이것이 영감을주기를 바랍니다. CSS는 주에서 변화를 나타내는 많은 가능성을 제공하므로 흥미로운 아이디어가 있으면 재미와 공유를하십시오.