제퍼넷 로고

CSS 바둑판 배경… 그러나 둥근 모서리와 호버 스타일 사용

시간

한편으로는 CSS로 간단한 체크 무늬 배경을 만드는 것이 쉽습니다. 반면에 CSS-gradient-ninja 중 하나가 아닌 한 기본 패턴에 고정되어 있습니다.

적어도 그것은 내 화면의 체크 무늬 배경을 응시하고 사각형의 모서리를 조금 둥글게하려고하면서 생각한 것입니다 ... 내가 가장 좋아하는 글 머리 기호를 기억할 때까지 - — 패턴의 모든 교차점에 배치할 수만 있다면 원하는 디자인을 확실히 얻을 수 있을 거라고 생각했습니다.

가능한 것으로 밝혀졌습니다! 여기 증거가 있습니다.

기본 패턴부터 시작하겠습니다.

div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

우리에게 주는 것은 분홍색에서 파란색으로 바뀌는 사각형의 반복적인 배경입니다. 5px 그들 사이의 하얀 틈. 각 사각형의 너비는 XNUMX픽셀이며 투명합니다. 이것은 다음을 사용하여 생성됩니다. repeating-linear-gradient, 포함하는 영역 전체에서 그라디언트가 반복되는 선형 그라디언트 이미지를 만듭니다.

즉, 해당 시퀀스의 첫 번째 그라데이션은 흰색 가로 줄무늬를 만들고 두 번째 그라데이션은 흰색 세로 줄무늬를 만듭니다. 함께 레이어링되어 체크 무늬 패턴을 형성하고 세 번째 그라디언트가 나머지 공간을 채웁니다.

이제 배경 패턴 위에 앞서 언급한 별 모양을 추가합니다. 우리는 그것을 같은 것에 포함함으로써 그것을 할 수 있습니다 background 모양에 인코딩된 SVG를 사용하는 동안 속성을 그라디언트로 사용합니다.

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    
      
        
" ), repeating-linear-gradient( to right, transparent, transparent 50px, white 50px, white 55px ), repeating-linear-gradient( to bottom, transparent, transparent 50px, white 50px, white 55px ), linear-gradient(45deg, pink, skyblue); /* more style */ }

분해해 보겠습니다. 첫 번째 키워드, repeat, 반복되는 배경 이미지임을 나타냅니다. 그 다음은 각각의 반복 단위의 위치와 크기입니다(left -17px top -22px/55px 55px). 이 오프셋 위치는 글리프와 패턴의 크기를 기반으로 합니다. 글리프 크기가 ​​어떻게 지정되는지 아래에서 볼 수 있습니다. 오프셋이 추가되어 체크 무늬 패턴의 각 교차점 위에 반복 글리프의 위치를 ​​정확히 다시 지정합니다.

SVG에는 HTML이 있습니다.

글리프를 들고. 내가 선언했음을 주목하라 font-size 그 위에. 이는 궁극적으로 바둑판 패턴에서 사각형의 경계 반경을 결정합니다. 글리프가 클수록 사각형이 더 둥글게 됩니다. 데이터 URL에서 펼쳐진 SVG는 다음과 같습니다.


  
    

이제 CSS 패턴이 설정되었으므로 다음을 추가해 보겠습니다. :hover 를 사용하여 글리프가 제거되고 흰색 선이 약간 반투명해지는 효과 rgb() 알파 투명도가 있는 색상 값.

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

우리는 거기에 갈! 이제 둥근 모서리가 있을 뿐만 아니라 다음과 같은 효과에 대한 패턴을 더 많이 제어할 수 있습니다.

다시 말하지만, 이 전체 연습은 둥근 모서리를 지원하는 바둑판 패턴의 사각형 격자, 패턴 전체에 오버레이 역할을 하는 배경 그라디언트 및 대화형 스타일을 얻으려는 시도였습니다. 나는 이것이 작업을 아주 잘 수행한다고 생각하지만, 당신이 어떻게 접근했는지에 대해서도 관심이 있습니다. 댓글로 알려주세요!

spot_img

최신 인텔리전스

spot_img