CSS3로 멋진 이미지 캡션 6

CSS3는 정말 강력합니다. 이전에는 간단한 전환 효과를 내기 위해 이미지 나 여러 JavaScript 코드 라인이 필요했습니다. 요즘에는 CSS3만으로도 동일한 작업을 수행 할 수 있습니다..

이 튜토리얼에서는 CSS3를 사용하여 다양한 장면 전환으로 이미지 캡션을 만드는 방법을 보여줍니다.

데모
소스 다운로드

브라우저 지원

이 캡션은 비교적 새로운 기능인 변환 및 전환 속성에 크게 의존하므로 캡션을 원활하게 실행하는 데 필요한 브라우저 지원을 기록하는 것이 좋습니다.

다음은 이미 변환과 변환을 지원하는 브라우저입니다.

Internet Explorer 10 이상 (아직 출시되지 않음)
Firefox 6+
Chrome 13+
사파리 3.2+
오페라 11+

이제 자습서를 시작해 보겠습니다..

HTML 구조

우리는 6 개의 이미지를 가지고 있습니다. 캡션 스타일이 다른 각 이미지.

     간단한 캡션
  
     전체 캡션
 Lorem ipsum dolle 앉아서, adipiscing elit, sid diam, 깔끔하게 섞어서,.
  
     페이드 캡션
 Lorem ipsum dolle 앉아서, adipiscing elit, sid diam, 깔끔하게 섞어서,.
  
     슬라이드 캡션
 Lorem ipsum dolle 앉아서, adipiscing elit, sid diam, 깔끔하게 섞어서,.
  
      이것은 회전 캡션입니다.
 Lorem ipsum dolle 앉아서, adipiscing elit, sid diam, 깔끔하게 섞어서,.
  
 
     무료 스타일 캡션
 Lorem ipsum dolle 앉아서, adipiscing elit, sid diam, 깔끔하게 섞어서,.

기본 CSS

요소를 스타일링하기 전에이 CSS 재설정을 사용하여 모든 속성을 재설정하고 기본 스타일 값을 제공하는 것이 항상 좋은 출발이므로 모든 브라우저는 동일한 결과를 렌더링합니다 (IE6 제외).

스타일은 style.css 파일로 분리되므로 HTML 파일이 깔끔하게 보입니다. 그러나 head 태그 안에 링크 스타일을 추가하여 파일에 스타일 규칙을 적용하는 것을 잊지 마십시오..

이제 html 태그와 기본 래퍼 ID부터 시작하여 요소의 스타일을 지정해 보겠습니다.

 html 배경색 : #eaeaea;  #mainwrapper font : 10pt normal Arial, sans-serif; 높이 : 자동; margin : 80px auto 0 auto; 텍스트 정렬 : 가운데; 너비 : 660px;

이미지 상자 스타일

이미지를 포함하는 상자에 몇 가지 공통된 스타일을 적용합니다. 왼쪽 플로트를 사용하여 상자가 나란히 표시됩니다. overflow : hidden 속성도 추가했습니다. 이렇게하면 div를 통과하는 모든 객체가 숨겨집니다..

나중에 이미지 전환이 필요한 경우에 대비하여 상자 안의 모든 이미지에 전환 속성도 선언합니다..

 #mainwrapper .box 테두리 : 5 픽셀 단색 #fff; 커서 : 포인터; 높이 : 182px; 왼쪽으로 뜨다; 여백 : 5px; 위치 : 상대적; 오버플로 : 숨김; 너비 : 200px; -webkit-box-shadow : 1px 1px 1px 1px #ccc; -moz-box-shadow : 1px 1px 1px 1px #ccc; 상자 그림자 : 1px 1px 1px 1px #ccc;  #mainwrapper .box img 위치 : 절대; 왼쪽 : 0; -webkit-transition : 모든 300ms 완화; -moz-transition : 모든 300ms 완화; -o-transition : 모든 300ms 완화; -ms-transition : 모든 300ms 완화; 트랜지션 : 모든 300ms 완화;

캡션 일반 스타일

캡션에는 일반적인 스타일과 전환 속성이 있습니다. opacity 속성을 사용하는 대신 알파 채널에 0.8을 사용하는 RGBA 색상 모드를 사용하여 내부 텍스트에 영향을주지 않고 캡션을 약간 투명하게 만듭니다..

 #mainwrapper .box .caption background-color : rgba (0,0,0,0.8); 위치 : 절대; color : #fff; z- 지수 : 100; -webkit-transition : 모든 300ms 완화; -moz-transition : 모든 300ms 완화; -o-transition : 모든 300ms 완화; -ms-transition : 모든 300ms 완화; 트랜지션 : 모든 300ms 완화; 왼쪽 : 0;

자막 1

첫 번째 캡션에는 캡션에 일반적으로 사용되는 간단한 전환 효과가 있습니다. 이미지 위로 마우스를 가져 가면 캡션이 아래에서 위로 올 것입니다. 이 문제를 해결하기 위해 캡션의 높이는 30px로 고정되며 하단 위치는 이미지 아래에 숨기기 위해 30px로 적용됩니다.

 #mainwrapper .box .simple-caption height : 30px; 너비 : 200px; 디스플레이 : 블록; 하단 : -30px; 라인 높이 : 25pt; 텍스트 정렬 : 가운데;

자막 2

두 번째 유형은 이미지 / 상자 크기의 전체 너비와 높이 (200x200px)를 가지며 전환은 슬라이딩 도어 효과와 같을 뿐이며 위에서 아래로 슬라이드합니다.

 #mainwrapper .box. 전체 캡션 width : 170px; 높이 : 170px; 상단 : -200px; 텍스트 정렬 : 왼쪽; 패딩 : 15px;

캡션 3

세 번째 캡션에는 페이딩 효과가 있습니다. 그래서 우리는 불투명도를 추가했습니다 : 초기 상태는 0입니다..

 #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity : 0; 너비 : 170px; 높이 : 170px; 텍스트 정렬 : 왼쪽; 패딩 : 15px;

캡션 4

네 번째 캡션은 왼쪽에서 오른쪽으로 미끄러 져 왼쪽에 200px (왼쪽 : 200px)를 초기 위치로 고정했습니다..

 ** 캡션 4 : 슬라이드 ** / #mainwrapper .box .slide-caption width : 170px; 높이 : 170px; 텍스트 정렬 : 왼쪽; 패딩 : 15px; 왼쪽 : 200px;

자막 5

다섯 번째 캡션은 회전 효과가 있습니다. 회전 할 캡션이 아니라 이미지도 캡션입니다. 그것은 회전에 의한 위치 변경과 비슷합니다..

따라서, 캡션을 읽기 위해 모니터를 회전시키지 않는 한 -180도 회전의 변형 속성을 추가합니다..

 #mainwrapper # box-5.box .rotate-caption width : 170px; 높이 : 170px; 텍스트 정렬 : 왼쪽; 패딩 : 15px; 상단 : 200 픽셀; -moz-transform : rotate (-180deg); -o-transform : 회전 (-180deg); -webkit-transform : rotate (-180deg); 변형 : 회전 (-180 도로);  #mainwrapper .box .rotate width : 200px; 높이 : 400px; -webkit-transition : 모든 300ms 완화; -moz-transition : 모든 300ms 완화; -o-transition : 모든 300ms 완화; -ms-transition : 모든 300ms 완화; 트랜지션 : 모든 300ms 완화;

캡션 6

마지막 캡션에는 크기 변환이 있습니다. 그러나 이전 캡션에서는 그 안에있는 텍스트가 .caption 전환 시프트와 함께 실제로 표시됩니다. 이 섹션에서는 조금 다른 것으로 만들 것입니다..

전환 시프트가 완료되면 텍스트가 나타납니다. 따라서 텍스트에 transition-delay를 추가합니다.이 경우 h3 및 p 태그.

 #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p 위치 : 상대적; 왼쪽 : -200px; 너비 : 170px; -webkit-transition : 모든 300ms 완화; -moz-transition : 모든 300ms 완화; -o-transition : 모든 300ms 완화; -ms-transition : 모든 300ms 완화; 트랜지션 : 모든 300ms 완화;  #mainwrapper .box .scale-caption h3 -webkit-transition-delay : 300ms; -moz-transition-delay : 300ms; -o-transition-delay : 300ms; -ms-transition-delay : 300ms; 천이 지연 : 300ms;  #mainwrapper .box .scale-caption p -webkit-transition-delay : 500ms; -moz-transition-delay : 500ms; -o-transition-delay : 500ms; -ms-transition-delay : 500ms; 천이 지연 : 500ms;

그들을 움직여 보자.

다음 섹션에서는 이미지 나 상자 위로 마우스를 가져갈 때 캡션의 동작을 정의합니다.

캡션 동작 1 : 표시.

첫 번째 캡션의 경우 상자 위로 마우스를 가져 가면 아래에서 위로 표시됩니다. 이 이동을 처리하기 위해 우리는 변형 속성을 사용하고 아래의 CSS 코드는 캡션이 무게의 100 %를 맨 위로 이동 시키도록 지시합니다.

 #mainwrapper .box : 마우스로 가리 키기. 간단한 캡션 -moz-transform : translateY (-100 %); -o-transform : translateY (-100 %); -webkit-transform : translateY (-100 %); 변형 : 번역 Y (-100 %);

translateY에 대해 음수 값을 얻지 못하면이 튜토리얼을 먼저 읽고 통찰력을 높일 수 있습니다..

캡션 동작 2 : 아래로 이동.

반대로 두 번째 자막은 맨 위에서 아래로 이동합니다. 따라서 우리는 translateY에 긍정적 인 가치를 부여합니다..

 #mainwrapper .box : 마우스를 올리면. 전체 캡션 -moz-transform : translateY (100 %); -o-transform : translateY (100 %); -webkit-transform : translateY (100 %); 변형 : 번역 Y (100 %);

캡션 동작 3 : 페이드 인.

세 번째 캡션은 실제로 가장 쉬운 캡션입니다. 상자를 가리키면 캡션 불투명도가 1로 바뀌고 캡션 클래스에 전환 속성이 추가되었으므로 전환이 부드럽게 실행되어야합니다.

 #mainwrapper .box : 마우스를 올리면 .fade-caption opacity : 1;

캡션 동작 4 : 왼쪽으로 밉니다..

이전에 언급했듯이이 캡션은 왼쪽에서 슬라이드되지만 이미지는 오른쪽으로 슬라이드됩니다. 그래서 여기에 2 개의 CSS 선언문이 있습니다..

아래의 CSS 코드는 상자 위로 마우스를 가져 가면 캡션이 너비의 100 %를 왼쪽으로 밀어냅니다. 슬라이드를 오른쪽에서 왼쪽으로 수평 이동하기 때문에 translateX를 사용합니다..

 #mainwrapper .box : 마우스를 가져 가면 .slide-caption background-color : rgba (0,0,0,1)! important; -moz-transform : translateX (-100 %); -o-transform : translateX (-100 %); -webkit-transform : translateX (-100 %); 불투명도 : 1; 변형 : translateX (-100 %);

상자 위로 마우스를 가져 가면 이미지가 왼쪽으로 밀려납니다..

 #mainwrapper .box : 마우스를 올리면 img # image-4 -moz-transform : translateX (-100 %); -o-transform : translateX (-100 %); -webkit-transform : translateX (-100 %); 변형 : translateX (-100 %);

캡션 동작 5 : 회전.

이 캡션은 나머지 부분과는 다르며, 오른쪽에서 왼쪽으로 이동하지 않고 회전합니다. 상자가 마우스를 올리면 이미지와 캡션이 포함 된 div가 -180을 시계 반대 방향으로 회전시켜 이미지를 숨기고 캡션을 표시합니다..

 / ** 캡션 회전 : 마우스를 올리면 동작 ** / #mainwrapper .box : 마우스를 가져다 대면 회전 할 수 있습니다. background-color : rgba (0,0,0,1)! important; -moz-transform : rotate (-180deg); -o-transform : 회전 (-180deg); -webkit-transform : rotate (-180deg); 변형 : 회전 (-180 도로);

캡션 동작 6 : 크기 조정.

이 캡션은 여러 가지 변형 효과를 결합합니다. 상자를 가리키면 이미지가 초기 크기에서 140 % (1.4) 확장됩니다.

 #mainwrapper .box : hover # image-6 -moz-transform : scale (1.4); -o-transform : 스케일 (1.4); -webkit-transform : scale (1.4); transform : 스케일 (1.4);

위의 CSS를 본 경우 캡션 6 heading, 우리는 200px만큼 왼쪽에 텍스트를 숨겼습니다. 아래의 CSS 코드는 텍스트가 초기 위치로 이동하도록 지시합니다. 따라서 텍스트가 왼쪽에서 오른쪽으로 동시에 슬라이드됩니다..

 #mainwrapper .box : 호버. 스케일 캡션 h3, #mainwrapper. 박스 : 호버. 스케일 캡션 p -moz-transform : translateX (200px); -o-transform : translateX (200 픽셀); -webkit-transform : translateX (200 픽셀); 변형 : translateX (200 픽셀);

데모
소스 다운로드

개요

이 CSS 기능은 멋지지만 이전에 언급 한 브라우저 지원 제한으로 인해 아직 널리 적용되지 않습니다. 그러나 이러한 새로운 기능을 계속 실험 해보십시오. 이것이 앞으로 웹 페이지를 형성하게 될 것입니다..

크레딧

튜토리얼의 이미지 축소판은 다음 웹 사이트 (스크린 샷)에서 가져옵니다.

별개의 서적
Archiduchesse
동영상 블로그
홍 키아 트
인사말 농장
마크 에코