CSS 마스크를 사용하여 스위치 UI를 만드는 방법
이미지 처리, 마스킹 다음과 같은 작업을 수행 할 수있는 기술입니다. 이미지 숨기기 다른 것과. 마스크는 이미지의 일부를 만드는 데 사용됩니다. 투명하게 보는. 속성을 마스킹하여 CSS를 사용하여 마스킹을 수행 할 수 있습니다..
오늘의 포스트에서는 두 개의 PNG 이미지와 CSS 마스킹 기술을 사용하여 마스크 된 이미지를 만들고 사용자가 이미지의 두 상태 (일 과 밤) 스위치 UI의 도움으로.
일부 브라우저 호환성 문제로 인해 모든 브라우저에서 모든 마스킹 속성이 지원되는 것은 아닙니다 (2016 년 6 월 기준). 마스크 추가를위한 두 가지 기술, 하나는 Webkit 기반 브라우저 용이고 다른 하나는 Firefox 용입니다. 이 3 단계 자습서의 두 가지 첫 번째 단계는 모든 브라우저에서 동일하지만 세 번째 단계에서 차이가 있습니다.
1 단계. 기본 스위치 만들기
일반적인 스위치에는 다음과 같은 두 가지 상태가 있습니다. 오직 하나 사용 가능 한 번에 두 개의 라디오 버튼 그룹 스위치의 작동 구성 요소를 만듭니다. 각 라디오 버튼을 부모 요소의 왼쪽과 오른쪽 끝에 놓습니다..
라디오 버튼 그룹은 각 라디오 버튼에 동일한 것을 지정하여 생성됩니다. 이름 속성. 라디오 버튼 그룹, 하나의 라디오 버튼 만 한 번에 확인할 수있다..
다음 HTML과 CSS로 시작합니다.
HTML
CSS
아래의 CSS에서는 절대 위치 지정을 사용하여 원하는 위치에 정확히 라디오 버튼을 배치했습니다..
#outerWrapper width : 450px; 높이 : 90px; 패딩 : 10px; margin : 100px auto 0 auto; border-radius : 55px; 상자 그림자 : 0 0 10px 6px #EAEBED; 배경 : #fff; #innerWrapper 높이 : 100 %; border-radius : 45px; 오버플로 : 숨김; 위치 : 상대적; .radio width : 90px; 높이 : 100 %; 위치 : 절대; margin : 0; 불투명도 : 0; #rightRadio right : 0; .radio : not (: checked) cursor : pointer;
나는 불투명도 : 0 규칙을 .라디오 클래스에 라디오 버튼 숨기기. 아래 코드 블록의 마지막 규칙, 커서 : 포인터; 선택되지 않은 라디오 버튼에 대한 포인터 커서를 보여 주므로 사용자는 클릭하여 스위치 상태를 전환 할 수 있습니다.
2 단계. 스위치에 스킨 추가
이 단계에서는 두 가지를 추가합니다. 저는 Minh Killy Le가 쓴 Dribbble에서 영감을 얻은 "Day"와 "Night"를 전환의 두 주로서 사용하고 있습니다.. HTML CSS 그만큼 pointer-events CSS 속성을 사용하면 그래픽 요소가 될 수있는 환경을 설정할 수 있습니다 마우스 이벤트 대상. 위의 코드에 대한 대안으로 두 Chrome 및 기타 Webkit 기반 브라우저의 경우 일반적으로 마스킹에는 두 가지 종류가 있습니다. 광도 과 알파. Chrome에서 (버전 51.0.2704.103, Win10) 현재 알파 만 작동하는 것 같습니다.. CSS에서, 여기 CSS가 있습니다. 마스크를 추가하다. Webkit 브라우저에서 배경 이미지로 이동 : CSS 나는 밤의 피부는 투명한 원을 만들었고 컨테이너의 나머지 부분은 불투명하게 만들었습니다. 날 피부를 위해, 나는 반대를했다 : 불투명 한 원을 아직 Webkit 브라우저에서는 지원되지 않지만 위에서 볼 수 있듯이 원의 경계선은 부드럽 지 않습니다. 에 거친 가장자리를 숨기다., ~을 추가하다 HTML CSS 그만큼 비록 그래서, 대신에 위의 SVG 이미지는 흰색 직사각형 및 검은 동그라미. 이것을 추가하고 다른 하나는 검은 색 직사각형 및 흰 동그라미 Webkit 버전에서 사용한 HTML의 마스크로 사용. HTML 에 대한 CSS 코드를 바꾸거나 결합하십시오. 이제는 두 가지 마스크 이미지 (CSS 그라디언트 및 SVG), 두 가지 다른 마스크 유형 (알파 및 광도), Webkit 및 Firefox 지원. CSS
#daySkin background-image : url ( 'day.png'); #nightSkin background-image : url ( 'night.png'); .skin width : 100 %; 높이 : 100 %; 포인터 이벤트 : 없음; 위치 : 절대; margin : 0;
포인터 이벤트 : 없음; 규칙이 스킨에 추가되어 스위치의 클릭 이벤트가 그들을 지나치다, 과 라디오 버튼에 도달.
3a 단계. 마스크 추가 (Webkit 버전)
마스크 - 이미지 이 글을 쓰는 현재 CSS 속성은 -웹킷 웹킷 브라우저에서 접두사. 그만큼 마스크 - 이미지 속성을 사용하면 이미지 지정 사용될 ~로서 마스크.알파 과 광도 의 값은 마스크 형 재산.#nightSkin background-image : url ( 'night.png'); 마스크 유형 : 알파; / * 나머지 부분이 불투명 한 투명한 원 * / -webkit-mask-image : 방사형 그라데이션 (45px 45px, rgba (0,0,0,0) 45px, rgba (0,0,0,1) 45px에서 원) ; / * day skin을 선택했을 때 * / #leftRadio : checked ~ # nightSkin mask-type : alpha; * / -webkit-mask-image : 방사형 그라디언트 (405px 45px, rgba (0,0,0,1) 45px, rgba (0,0,0,0) 45px에서 원) ;
-웹킷 마스크 이미지 속성을 사용하여 초기 마스크 이미지를 만듭니다. 그 가치는 방사형 그라디언트 () 사전 정의 된 모양, 방사형 그래디언트 및 그래디언트 중심에서 이미지를 만드는 데 사용되는 CSS 기능.방사형 그라디언트 () 기능을 사용하고 나머지 부분은 투명하게 만들었습니다..마스크 형 나중에 참조 할 수 있도록 CSS에 대한 속성.
#switchBtnOutline width : 90px; 높이 : 100 %; border-radius : 45px; 상자 그림자 : 0 0 2px 2px 회색 삽입, 0 0 10px 회색; 포인터 이벤트 : 없음; 위치 : 절대; margin : 0; / * day 스킨이 선택되면 오른쪽 끝에 #switchBtnOutline을 배치하십시오. * / #leftRadio : checked ~ # switchBtnOutline right : 0;
3b 단계. 마스크 추가 (Firefox 버전)
마스크 - 이미지 CSS 속성은 실제로 수중 속성, 그리고 그것은 속기 속성의 일부입니다. 마스크 마스크로 사용할 이미지도 지정할 수 있습니다. 동안 마스크 - 이미지 아직 Firefox에서는 지원되지 않습니다., 마스크 ~이다..마스크 속성을 사용하여 만든 이미지를 허용해야합니다. 방사형 그라디언트 () CSS 기능은 값처럼 마스크 - 이미지 property는 Firefox에서 아직 지원하지 않습니다..방사형 그라디언트 () 이미지, SVG 이미지를 마스크 유형의 마스크 이미지로 사용 해보자. 광도.
#nightSkin 우리는 다음 코드로 Webkit 버전에서 사용했습니다. 그리고 너 끝났어..#nightSkin background-image : url ( 'night.png'); 마스크 유형 : 광도; 마스크 : url (#leftSwitchMask); #leftRadio : checked ~ # nightSkin 마스크 유형 : 광도; 마스크 : url (#rightSwitchMask);
데모 확인
