CSS3 웹 사이트의 탐색에 사용되는 찾아보기(스폿라이트) 구현

웹 서비스의 첫 번째 도움말 등을 만들 때마다 사용자의 다음 동작을 표시하는 단추를 제외하고는 어둡게 하고 다음 동작을 명확하게 표시합니다.
이름은 사람에 따라 다르지만 저는'스포트라이트'라고 불렀습니다. 앞으로는'스포트라이트'라는 이름으로 부르고 싶습니다.
이번에 CSS에서 그 스포트라이트를 실시한 샘플을 보고 실제 실현 방법을 설명했다.

CSS 스폿라이트

CSS Spotlight http://codepen.io/potato4d/pen/yaoExv
우선 완성된 것은 이상이다.
Click me!버튼의 주위가 밝아지고 그 외의 부분은 어두워졌다.
알다시피 Click me는 Clickable이므로 hover를 클릭할 수 있습니다.

동작의 구조

그럼 제가 자세히 설명해 드릴게요.
먼저 전제는 평소 CSS를 기술하는 사람들이 알듯이 밝은 부분은 밝은 것이 아니라 큰 div 요소.spotlight로 전체를 둘러싸고 가운데만 통과한다는 것이다.

투명하지 않고 디스플레이를 다시 쓸 때의 모습입니다.전체가 어둠에 휩싸인 것은 .spotlight 요소다.
이를 바탕으로 배경background은 radial-gradient 속성을 사용한다.
이것은 원형 점차적인 변화를 만드는 속성입니다. radial-gradient 와 linear-gradient 의 점차적인 속성은
예를 들어 0~10px를 흰색, 100px~빨간색 등으로 지정하면 완전히 다른 두 가지 색을 표시할 수 있다.

CSS Gradient Double Color http://codepen.io/potato4d/pen/WGybmO
빨간색과 녹색linear-gradient을 사용할 때의 모습입니다.중앙의 50% 를 경계로 두 부분으로 나누다.
또한, CSS에는 투명을 나타내는transparent, 2가지 색상 중 1가지transparent가 있습니다.
여기에 반투명색rgba(0,0,0,0.4)을 1가지 더 지정하면 방금 스폿라이트를 만들 수 있다.
transparent 및 rgba(0,0,0,0.4)를 지정할 때 모양새가 변경되는 경우입니다.
이러한 지식을 결합하여 실제 코드에 넣었을 때.spotlight의 코드는 다음과 같다.
style.css

.spotlight{
  position: absolute;
  left: 0;
  top : 0;

  width: 100vw;
  height: 100vh;

  background: radial-gradient(transparent, transparent 100px, rgba(0,0,0,0.4) 100px, rgba(0,0,0,0.4));

  pointer-events: none;
}

그리고 실제로는 첫 번째 코드펜 거.로 표시됩니다.

사용자 정의

이번에는 타원으로 만든 것radial-gredient에 circle까지 더하면 정원을 만들 수 있다.