Nested Gradients with background-clip / background-clip (한글)

이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다.

 

원문: https://css-tricks.com/almanac/properties/b/background-clip/

       https://css-tricks.com/nested-gradients-with-background-clip/

저작권 정보: https://css-tricks.com/license/

 

※ 번역전 사족

background 속성을 이용해 border에 gradation 을 주는 재미있는 글이 있어 가지고 와봤습니다. :)

해당 글을 이해하려면 background-clip 속성의 이해가 필요해서 이번에는 두개의 포스팅을 번역해봤습니다.

 

사실 border에 gradation 을 주기 위해서는 border-image, slice 속성을 사용해도 됩니다.

하지만 해당 속성들은 border-radius 가 적용 되지 않아 border 에 radius 와 gradation 을 같이 주고 싶은 경우에 아래 방법들을 참고하면 됩니다.

 

 

---

background-clip

---

background-clip 은 배경 이미지 또는 색깔이 요소의 패딩 또는 컨텐츠 보다 넓게 확장되는 정도를 제어를 할수 있게 해줍니다.

.frame {
background-clip: padding-box;
}

Values

• border-box 가 기본 값입니다. 이렇게 하면 배경이 요소의 border 의 바깥쪽 가장자리 까지 확장 됩니다.
• padding-box 는 요소 패딩의 바깥쪽 가장자리까지 나오도록 배경을 자르고, border 로 넘어가지 않도록 해줍니다.
• content-box 는 내용물(content) 상자의 가장자리까지 나오게 배경을 자릅니다.
• inherit 는 부모요소의 background-clip 속성이 적용됩니다.

Demos

background-clip 은 실제로 해봐야 이해가 제일 잘 갑니다. 그래서 어떻게 동작하는지 아래에 2개의 데모를 모아놨습니다.

 

첫번째 데모에서는, 각각의 div 가 안에 한개의 단락을 가지고 있습니다. 각 단락은 div 의 내용물(content) 입니다. 각각의 div는 노란색 배경과 5픽셀의 반투명 연한 청색 border를 가지고 있습니다.

 

See the Pen background-clip by CSS-Tricks (@css-tricks) on CodePen.

 

 

 

 

기본적으로, 또는 background-clip : border-box 설정되면, 노란색 배경은 테두리(border) 바깥쪽 가장자리까지 확장 됩니다. 아래 깔린 노란색 배경 때문에 border 가 초록색처럼 보이는 것에 주목해 보세요.

background-clip 이 padding-box 로 바뀌면, 배경색은 요소의 패딩이 끝나는 지점에서 멈춥니다. 배경이 border 영역 까지 스며드는 것을 허용하지 않기 때문에, border가 파란색이 됩니다.

 

background-clip: content-box 를 사용하면, 배경색은 오직 div의 내용에만 적용되며, 이 경우 단일 단락 요소가 됩니다. div 의 패딩과 border 는 배경색이 없습니다. 그러나, 언급할 가치가 있는 한 가지 작은 세부사항이 있습니다. : 색상은 콘텐츠의 마진까지 확장된다는 것입니다. 다음 content-box 사용한 예제 중 첫 번째와 두 번째 예제 사이의 차이점을 확인해보세요.

 

첫번째 content-box 예를 보면, 브라우저의 기본 margin이 단락에 적용되며, 여백 뒤의 배경 클립이 적용됩니다. 두 번째 예제에서 여백은 CSS에서 0으로 설정되며, 배경은 텍스트 가장자리에서 잘려집니다.

다음의 예제는 배경 이미지가 있는 background-clip 을 보여주고 있습니다. 이 데모에서는 콘텐츠는 빈 div 보다 더 작습니다.

 

See the Pen background-clip interactive example by Timothy Miller (@webinspect) on CodePen.

 

 

 

이 데모에는 클리핑할때까지 배경 이미지가 반복되는 것을 막기 위해서 background-size: cover 그리고 background-repeat: no-repeat 을 추가로 적용했습니다.

 

텍스트

배경을 텍스트에 클리핑하는 데 사용할 수 있는 vendor-prefixed 버전이 있습니다. 동작을 보기 위해서는 텍스트도 투명하게 보여야 합니다. 다행이도, 효과적으로 색상을 오버라이드 할 수 있는 또 다른 vendor-prefixed 텍스트 색깔 속성이 있습니다.

다행히도 효과적으로 재정의할 수 있는 또 다른 vendor-prefixed 텍스트 색상 속성이 있습니다. 폴백을 가질 수 있기 때문에 안전하게 사용할 수 있습니다.

.background-clip-text {

  /* if we can clip, do it */
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;

  /* what will show through the text
      ~ or ~
     what will be the background of that element */
  background: whatever;

  /* fallback text color
      ~ or ~
     the actual color of text, so it better work on the background */
  color: red;

}

파이어폭스, 크롬, 사파리 등이 이를 지원합니다.

 

See the Pen Lit text by Chris Coyier (@chriscoyier) on CodePen.

 

 

Nested Gradients with background-clip

---

제가 background-clip 을 자주 사용한다고는 말할 수는 없습니다. 일상적인 css 작업에서는 거의 사용되지 않는다고 장담합니다. 하지만, Stefan Judis 의 포스트에서 그것을 다시 상기시켰고, 그것은 우연히도 Ana Tudor 포스트의 학습 응답 게시물이였습니다.

 

여기 간단한 설명이 있습니다.

당신은 아마 아래 그림을 몇 만번은 봤을 겁니다.

이것은 요소의 사이즈와 위치를 보여줍니다.

뿐만 아니라 사이즈가 어떻게 만들어지는지도요 : 컨텐츠 사이즈, 패딩, 마진, 그리고 보더까지

 

그것들은 단지 이해와 디버깅을 돕기 위한 이론적인 것이 아닙니다. 요소들은 실제로 컨텐츠 박스, 패딩 박스, 그리고 보더 박스를 가지고 있습니다.아마도 우리는 문자 그대로 box-sizing 의 속성을 설정할 때 가장 자주 마주칠 것입니다. (보편적으로 보더 박스로 설정하는 것은 매우 유용합니다.)

 

저 값들은 background-clip 을 사용할 때에도 똑같습니다!

즉, 당신은 background 를 저런 특정 영역들만 덮을 수 있도록 설정 가능합니다.

여러개의 배경이 하나의 것이기 때문에, 각각의 배경은 서로 다른 클리핑이 가능한 여러 배경을 가질 수 있습니다.

이런식으로요 :

 

See the Pen Multiple background-clip by Chris Coyier (@chriscoyier) on CodePen.

 

 

 

하지만 이건 지루하고, 그런 효과를 거둘 수 있는 많은 방법들이 있습니다. 예를 들어, 보더들, outline, box-shadow 또는 그 어떤 조합도 사용할 수 있습니다.

더욱 흥미로운 것은 그러한 배경들이 그라데이션이 될 수 있다는 사실이고, 그것은 다른 방법으로는 해내기 훨씬 어렵습니다!

 

See the Pen Nested Gradients by Chris Coyier (@chriscoyier) on CodePen.