그림자 복싱 : 이미지 프리, CSS3, 광택 버튼

CSS3 버튼 스타일 : Box-Shadow를 사용하여 멋진 버튼 효과를 만듭니다

이 기사에서는 CSS3 : CSS3 Gradient 및 Box-Shadow를 사용하여 버튼을 만드는 두 가지 방법을 탐색합니다. CSS3 그라디언트는 버튼 스타일에서 점점 더 인기를 얻지 못하고 구성하기 쉽고 버튼 영역으로 확장 할 수 있지만 브라우저 지원이 제한되어 있으며 (주로 Firefox, Chrome 및 Safari) 구문은 다른 브라우저간에 일치하지 않습니다.

대조적으로, 화가 오버레이 안료와 마찬가지로 상자 쉐이 도우 속성을 사용하여 색상 레이어를 오버레이하는 데 사용하면 그림이없고 확대 가능하며 완전 구성 가능한 부드러운 버튼을 만들 수 있습니다. 이 방법은 언뜻보기에 박스 쉐이딩 색상을 겹치는 데 복잡해 보일 수 있지만 더 유연합니다.

순수한 CSS3 그라디언트의 지원이 중요한 UI 요소와 이미지 기반 버튼의 유연성 부족에 완벽하지 않다는 점을 감안할 때 웹 디자이너는 CSS3 그라디언트 및 Box-Shadow 특성을 사용하여 버튼을 만드는 방법을 마스터하는 것이 중요합니다.

메소드 1 : Box-Shadow는 다층 효과를 만듭니다 기본 플랫 오렌지 버튼으로 시작하겠습니다. 다음 단계는 Box-Shadow를 사용하여 광택 버튼 효과를 만드는 방법을 단계별로 보여줍니다.

1 단계 : 표준 그림자 추가

를 추가하십시오 Box-Shadow의 기본 구문은 다음과 같습니다

우리는 쉼표로 분리 된 여러 그림자를 오버레이 할 수 있습니다. 예를 들면 :

첫 번째 그림자는 20% 투명도로 검은 그림자를 생성하며 오른쪽 하단에 3 픽셀로 오프셋되며 반경은 6 픽셀입니다. 두 번째 그림자는 오프셋이 없으므로 버튼을 더욱 질감으로 만드는 미묘한 어두운 빛을 제공합니다.

2 단계 : 기본 색상을 추가하십시오 키워드는 버튼 안에 그림자가 나타날 수 있습니다. 우리는 그것을 사용하여 기본 색상을 만들 수 있습니다.

이것은 버튼의 하단 절반에 부드러운 연한 주황색 영역을 남겨두고 유리 표면의 빛의 반사를 시뮬레이션합니다.

box-shadow: X偏移量 Y偏移量 模糊半径 颜色 3 단계 : 하이라이트 색상을 추가하십시오

단단한 가장자리의 하이라이트를 만들어 더 작은 블러 반경으로 버튼 상단에 라이터 오렌지 그림자를 추가하십시오.

새로운 박스 샤 두가 이전 그림자 아래에서 겹쳐지게되므로 하이라이트 색상은 어두운 색상 앞에 배치해야합니다.

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

4 단계 : 반사 조정

하이라이트를 더 자연스럽게 만들려면 흐릿한 어두운 오렌지 그림자가 버튼 상단에 겹쳐질 수 있습니다.

5 단계 : 호버 상태를 추가하십시오 마우스가 호버링되면 섀도우 매개 변수를 조정하여 버튼을 3 차원으로 보이게 할 수 있습니다.

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

브라우저 호환성

이 방법은 사파리와 크롬에서 완벽하게 작동합니다. Firefox의 CSS 구문은 거의 동일합니다. Opera와 IE9는 또한 Box-Shadow를 지원하지만

접두사를 제거해야합니다. 구형 IE는 Box-Shadow를 지원하지 않습니다. 요약

예제에 사용 된 주황색 버튼은 약간 치즈 맛이 좋을 수 있지만, Box-Shadow를 사용하여 색상 레이어를 오버레이하는이 방법은 매우 실용적이며 다양한 쿨 버튼 효과를 만들 수 있습니다. 이 접근법은 CSS3 그라디언트에 비해 더 나은 브라우저 호환성과 유연성을 제공합니다. 이 기사가 UI 디자인에 새로운 아이디어를 제공 할 수 있기를 바랍니다.

-webkit-box-shadow (단계 1-5의 렌더링은 여기에 삽입되어야하지만 그림을 직접 삽입 할 수 없으므로 설명에 따라 그림을 추가하십시오. 그림 링크를 실제 그림 링크로 바꾸십시오) -moz-box-shadow.

위 내용은 그림자 복싱 : 이미지 프리, CSS3, 광택 버튼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!