CSS3 이미지 반영 [CSS3 팁]
지금까지 우리는 많은 새로운 속성에 대해 논의했습니다. CSS3. 그 외에도 실제로 CSS3 공식 사양에 포함되지 않은 몇 가지 속성이 있습니다. 그 중 하나는 시험해 볼 가치가 있습니다. 상자 반영 에 의해 시작된 속성 웹킷. 이 속성은 지정된 객체에 반영 될 수 있습니다..
기본 반사
기본 구현은 매우 직관적입니다. 예를 들어 실제 물체 아래에서 반사를 원한다고 가정 해 봅시다. 우리는 쓸 수있다:
img -webkit-box-reflect : below;
이 예는 이미지를 반영하는 방법을 보여줍니다. 이하 (위치) 개체. 그러나이 경우에 우리는 권리, 왼쪽, 과 위에.
반사 오프셋
오프셋 반사와 실제 물체 사이의 간격을 정의하는 데 사용됩니다. 아래에서 코드 스 니펫을 보겠습니다.
img -webkit-box-reflect : 10px 이하;
위의 코드에서 우리는 실제 객체로부터의 반사를 10px;
- 데모보기
그라디언트로 마스킹
우리가 흔히 볼 수있는 반향 효과는 맨 아래의 페이드 아웃과 실제 오브젝트의 절반 이하를 표시하는 것입니다. 이러한 종류의 효과를 재현하기 위해 우리는 CSS3 그라디언트 그렇게 물체를 가린다.
-webkit-box-reflect : 0px -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, (투명), (rgba (250, 250, 250, 0.1)));
이 코드는 다음 프리젠 테이션으로 이어집니다.
우리는 또한 컬러 스톱 영상 효과를 조절하고 반사 효과를 좋게보기 :
img -webkit-box-reflect : 0px -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 투명), 컬러 스톱 (70 %, 투명)에서 (rgba (250, 250, 250, 0.1 ))));
- 데모보기
Firefox 대안
그러나이 속성은 현재 Webkit 브라우저 (Safari 및 Chrome을 의미)에서만 작동합니다. 파이어 폭스에서 같은 효과를 내기 위해서는 또 다른 경로가 필요하다 : using -moz-element () 기능. 이 함수는 기본적으로 특정 HTML 요소의 내용을 생성하거나 복제합니다. 다음 예제를 살펴 보겠습니다.
이미지가 그리고 반성을 유지하기 위해 그만큼 불행히도, 아직 쉽게 만들 수있는 방법이 없습니다. 좋은 이 연습을 사용하여 파이어 폭스에서 반사 효과. 위의 코드는 단순히 페이드 효과없이 리플렉션을 생성합니다..모즈 반사 신분증;
:후 의사 요소, 다음과 같이; # moz-reflect : after content : ""; 디스플레이 : 블록; 배경 : -moz-element (# moz-reflect) no-repeat; 너비 : 자동; 높이 : 375px; margin-bottom : 100px; -moz-transform : scaleY (-1);
-모즈 변형 네거티브 스케일을 사용하여 생성 된 오브젝트를 거꾸로 뒤집습니다. 또한 신장 실제 물체에 충분히 정확하다. 신장 반사 배치를 위해 불필요한 여분의 선을 피하기 위해.추가 참고 문헌
