CSS로 현실적인 반사를 만듭니다

Lisa Kudrow

풀어 주다： 2025-03-13 11:43:12

원래의

685명이 탐색했습니다.

CSS로 현실적인 반사를 만듭니다

디자인에서 반사는 물체의 양식화 된 거울 이미지입니다. 비록 그림자만큼 인기가 없지만 순간을 가지고 있습니다. MS Word 또는 PowerPoint에서 처음으로 다른 글꼴 형식을 탐색했을 때, 나는 반사가 그림자 옆에 두 번째로 사용되는 스타일, 개요와 빛과 같은 다른 사람들을 포기했습니다. 아니면 애플이 거의 모든 것에 그들을 사용했을 때의 반사가 언제 모든 분노 였는지 기억할 것입니다.

반사는 여전히 시원합니다! 그리고 과거와는 달리, 우리는 실제로 CSS와 반영 할 수 있습니다! 이 기사에서 우리가 할 내용은 다음과 같습니다.

반사 설계에는 두 단계가 있습니다.

원본 디자인의 사본을 만듭니다.
그 사본 스타일.

CSS에서 거울 이미지를 얻는 가장 정통하고 표준화 된 방법은 이제 Election () 속성을 사용하는 것입니다. 그러나 그것은 여전히 실험 단계에 있으며이 기사를 작성할 때 Firefox에서만 지원됩니다. 궁금한 점이 있다면이 기사를 확인할 수 있습니다.

따라서 Element ()가 아니라 동일한 디자인 중 두 가지를 추가하고 내 예제에서 반사로 하나를 사용하겠습니다. 이 부분을 JavaScript를 사용하여 동적으로 코딩하거나 의사 요소를 사용할 수 있지만 데모에서는 디자인 당 동일한 요소 쌍을 사용하고 있습니다.

 <div>
  <div> Trinket </div>
  <div> Trinket </div>
</div>

로그인 후 복사

 .units> * {
  배경 이미지 : url ( 'image.jpeg');
  배경 클립 : 텍스트;
  색상 : 투명;
  /* 등. */
}

로그인 후 복사

원래 디자인은 배경 이미지, 투명 텍스트 색상 및 텍스트 값의 배경 클립 속성의 조합에서 생성 된 녹아웃 텍스트 그래픽입니다.

그런 다음 쌍의 하단 요소가 거꾸로 뒤집히고 Transform을 사용하여 원래 디자인에 가까워집니다. 이것이 반사입니다.

 .units> : 마지막 자녀 {
  변환 : rotatex (180deg) Translatey (15px); 
}

로그인 후 복사

이제 뒤집힌 바닥 요소는 반사에 대한 페이드와 다른 그래픽 효과를 만들기 위해 일부 스타일을 취할 것입니다. 점진적으로 반사의 페이딩은 상승 된 요소의 마스크 층으로 사용되는 선형 구배 이미지로 달성 될 수있다.

 .units> : 마지막 자녀 {
  변환 : rotatex (180deg) Translatey (15px); 
  마스크 이미지 : 선형 그레이드 (투명 50%, 흰색 90%);
}

로그인 후 복사

기본적으로 마스크 이미지 속성의 마스크 모드는 알파입니다. 즉, 이미지의 투명 부분은 이미지가 요소의 마스크 층으로 사용될 때 요소의 해당 영역을 투명하게 돌립니다. 그렇기 때문에 상단에 투명한 그라데이션이있는 선형 그레이드는 끝에서 거꾸로 반사를 사라집니다.

우리는 또한 다른 그라디언트 스타일을 결합하거나 결합하지 않고 시도 할 수 있습니다. 예를 들어 줄무늬로 가져 가십시오. 나는 이전의 페이드 효과와 함께 패턴을 추가했습니다.

 .units> : 마지막 자녀 {
  / * ... */
  마스크 이미지 : 
    반복선 등급 (투명, 투명 3px, 흰색 3px, 흰색 4px),
    선형 등급 (투명 50%, 흰색 90%);
}

로그인 후 복사

또는 이것은 방사형 그레이드가있는 것 :

 .units> : 마지막 자녀 {
  / * ... */
  마스크 이미지 : 방사형 그레이드 (중앙, 흰색, 투명한 50%);
}

로그인 후 복사

또 다른 아이디어는 skew ()를 변환 속성에 추가하여 미러 이미지를 변형시키는 것입니다. 이것은 반사에 약간의 움직임을줍니다.

 .units> : 마지막 자녀 {
  / * ... */
  변환 : rotatex (180deg) translatey (15px) skew (135deg) translatex (30px);
}

로그인 후 복사

반사가 미묘하고 미묘하고 그림자처럼되기 위해서는 그것을 흐리게하거나 밝게하거나 불투명도를 줄이면 트릭을 수행 할 수 있습니다.

 .units> : 마지막 자녀 {
  / * ... */
  필터 : 블러 (4px) 밝기 (1.5);
}

로그인 후 복사

때로는 반사가 그림자 자체 일 수 있으므로 배경 이미지 (원래 디자인) 또는 텍스트의 블록 색상을 사용하는 대신 반사에 원래 디자인과 잘 어울리는 빨간색, 파란색 및 녹색 색상의 일련의 반투명 그림자를 제공했습니다.

 .units> : 마지막 자녀 {
  / * ... */
  Text-Shadow : 
    0 0 8px RGB (255 0 / .4),
    -2px -2px 6px rgb (0 255 0 / .4),
    2PX 2PX 4PX RGB (0 255 255 / .4);
}

로그인 후 복사

그 rgb () 값이 이상하게 보입니까? 그것은 흥미 진진한 새로운 CSS 색상 기능의 일부인 새로운 구문입니다.

이 모든 접근 방식을 하나의 큰 데모로 하나로 모겠습니다.