웹 디자이너는 CSS3가 등장 할 때 그들이 만든 페이지를 오랫동안 제어하려고했습니다. CSS3에 도입 된 새로운 스타일 덕분에 웹 전문가는 Photoshop과 유사한 효과를 페이지에 추가 할 수있었습니다. 여기에는 그림자 및 광선, 둥근 모서리 등의 속성이 포함되었습니다. CSS3는 또한 사이트에서 멋진 인터랙션을 만드는 데 사용할 수있는 애니메이션과 같은 효과를 도입했습니다.
CSS3를 사용하여 웹 사이트의 요소에 추가 할 수있는 아주 멋진 시각적 효과는 불투명도 및 전환 특성을 조합하여 페이드 인 및 페이드 아웃하는 것입니다. 이는 사이트 방문객이 해당 요소 위에 마우스를 올려 놓는 것과 같은 무언가를 수행 할 때 초점이 맞춰지는 변색 된 영역을 만들어 페이지를보다 양방향으로 만들 수있는 쉽고 잘 지원되는 방법입니다.
이 상호 작용하는 시각적 효과를 웹 페이지의 다양한 요소에 추가하는 것이 얼마나 쉬운 지 살펴 보겠습니다.
마우스를 올렸을 때 불투명도 변경
고객이 해당 요소 위로 마우스를 가져 가면 이미지의 불투명도를 변경하는 방법부터 살펴 보겠습니다. 이 예제 (HTML은 아래에 나와 있습니다)의 경우 class 속성이 image 인 이미지를 사용하고 있습니다.
greydout.
회색으로 표시하기 위해 CSS 스타일 시트에 다음 스타일 규칙을 추가합니다. .greydout {-webkit-opacity : 0.25;-moz-opacity : 0.25;불투명도 : 0.25;}
이러한 불투명도 설정은 25 %로 변환됩니다. 즉, 이미지가 일반 투명도의 1/4로 표시됩니다. 투명도가없는 완전히 불투명 한 것은 100 %이고 0 %는 완전히 투명합니다. 다음으로, 마우스를 마우스로 가리키면 이미지가 선명하게 보이도록 (또는 더 정확하게, 완전히 불투명 해 지도록)하려면 : 마우스 오버의사 클래스 : .greydout : hover {-webkit-opacity : 1;-moz-opacity : 1;불투명도 : 1;}
이 예제에서는 이전 버전의 브라우저와의 호환성을 보장하기 위해 공급 업체의 접두사 버전을 사용하고 있습니다. 이것이 좋은 연습이지만 실제로는 브라우저가 불투명도 규칙을 잘 지원하고 있으며 해당 접두사 접두사를 삭제하는 것이 안전합니다. 여전히 이전 버전의 브라우저에 대한 지원을 원할 경우 이러한 접두어를 포함하지 않아도됩니다. 정상적인 접두어가 붙지 않은 스타일로 선언문을 끝내는 가장 좋은 방법을 따르십시오. 이것을 사이트에 배치하면이 불투명도 조정이 매우 갑작스러운 변화라는 것을 알 수 있습니다. 첫째, 회색이고 그 다음에는 그 둘 사이의 중간 상태가 없습니다. 이것은 가벼운 스위치와 같습니다 - 켜기 또는 끄기. 이것은 당신이 원하는 것일 수도 있지만, 좀 더 점진적인 변화를 실험하고 싶을 수도 있습니다. 정말 좋은 효과를 추가하고 점차적으로 페이드를 만들려면 전이
재산을 . 그레이 아웃클래스 : .greydout {-webkit-opacity : 0.25;-moz-opacity : 0.25;불투명도 : 0.25;-webkit-transition : 모든 3s 용이함;-moz-transition : 모든 3s 용이함;-ms-transition : 모든 3s 용이함;-o-transition : 모든 3s 용이함;전환 : 모든 3s 용이함;}
