CSS3 Box Shadow를 사용하는 10 가지 창조 기술

우리는 지난 몇 년 동안 CSS3 웹 개발에 엄청난 발전을 보았습니다. 인터넷에서 인기있는 웹 사이트는 둥근 모서리 및 모바일 응답 미디어 쿼리와 같은 많은 고유 한 스타일을 통합하기 시작했습니다. 그러나 더욱 중요한 것은 창조적 인터페이스가 몇 분 만에 프로토 타이핑 될 수있는 문을 열었습니다.

이 기사에서 나는 공유하고 싶다. 화려한 CSS3 상자 그림자 디자인과 관련된 10 개의 코드 스 니펫. 코드 작동 방식과 각 상자 그림자를 자신의 웹 사이트에 구현하는 방법을 설명하겠습니다..

이 스타일은 다른 인기있는 웹 사이트의 훌륭한 디자인 영향에 기인합니다. 이것은 현재 웹 개발자가 웹 디자인의 미래를위한 영향력있는 트렌드를 구축하는 방법의 좋은 예입니다.

1. 고정 된 상단 툴바

루마니아 소셜 미디어 서비스 인 Trilulilu는 전체 웹 사이트에서 떠 다니는 최상위 툴바를 사용합니다. 이 기능은 위치 : 고정; 속성을 사용합니다. 그러나이 추가 상자 그림자는 전혀 새로운 수준의 효과를 나타냅니다..

#banner 위치 : 고정; 높이 : 60px; 너비 : 100 %; 상단 : 0; 왼쪽 : 0; border-top : 5 픽셀 고체 # a1cb2f; 배경 : #fff; -moz-box-shadow : 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-shadow : 0 2px 3px 0px rgba (0, 0, 0, 0.16); 상자 그림자 : 0 2px 3px 0px rgba (0, 0, 0, 0.16); Z- 색인 : 999999;  # 배너 h1 선 높이 : 60px;

box-shadow 속성이 실제로는 매우 간단한 값 조합으로 설정되었음을 알 수 있습니다. 그림자가 상자 아래로 떨어지고 양쪽에서 3 픽셀 흐려짐.

우리는 rgba () 그림자에 약간의 불투명도를 적용하는 방법으로 요소가 너무 어두워 보이지 않습니다. 확실하게 방문자의주의를 끄는 미묘한 추가 기능입니다..

데모

2. 하위 탐색 드롭 다운

다음은 스칼라 드롭 다운 하위 메뉴에 적용된 또 다른 창의적인 상자 그림자 메서드입니다. 비슷한 효과는 Entrepreneur에서 각각의 주요 메인 탐색 링크 위로 마우스를 가져 가면 볼 수 있습니다. 이것은 확실히 구성하기가 다소 까다 롭지만 인내심이 충분합니다..

#bar display : block; 높이 : 45px; 배경 : # 22385a; 패딩 - 상단 : 5px; margin-bottom : 150px; 위치 : 상대적;  #bar ul 여백 : 0px 15px; font-family : Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li background : # 22385a; 디스플레이 : 블록; 글꼴 크기 : 1.2em; 위치 : 상대적; 왼쪽으로 뜨다;  #bar ul li a display : block; color : # fffff7; 선 높이 : 45px; font-weight : bold; 패딩 : 0px 10px; 텍스트 장식 : 없음; z- 색인 : 9999;  #bar ul li a : 호버, #bar ul li a.selected color : # 365977; 배경 : #fff; border-top-left-radius : 3px; border-top-right-radius : 3px; -webkit-border-top-left-radius : 3px; -webkit-border-top-right-radius : 3px; -moz-border-radius-topleft : 3px; -moz-border-radius-topright : 3px;  #bar ul .subnav display : block; 왼쪽 : 14px; 상단 : 48px; z- 색인 : -1; 너비 : 500px; 위치 : 절대; 높이 : 90px; 테두리 : 1 픽셀 고체 # edf0f3; border-top : 0; 패딩 : 10px 0 10px 10px; 오버플로 : 숨김; -moz-border-radius-bottomleft : 3px; -moz-border-radius-bottomleft : 3px; -webkit-border-bottom-left-radius : 3px; -webkit-border-bottom-right-radius : 3px; border-bottom-right-radius : 3px; border-bottom-right-radius : 3px; -moz-box-shadow : 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-shadow : 0px 2px 7px rgba (0,0,0,0.25); 상자 그림자 : 0px 2px 7px rgba (0,0,0,0.25); -ms-filter : "progid : DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color ="# 333333 ")"; 필터 : progid : DXImageTransform.Microsoft.Shadow (Strength = 3, Direction = 180, Color = "# 333333");

탐색 링크를 선택하거나 마우스를 올리면 색상이 변경되도록 스타일을 지정할 수 있습니다. 또한 링크와 드롭 다운 메뉴 상자 위에 둥근 테두리를 추가 할 것입니다. 이것은 모든 주위에 하드 가장자리보다는 더 좋은 느낌을 준다. 나는 또한 잘 활용하고있다. -ms 필터 과 필터 Internet Explorer의 독점적 인 속성.

전체 네비게이션 시스템을 설정하면 디스플레이 설정을 없음으로 변경하고 페이지가로드되면 메뉴를 숨길 수 있습니다. 그런 다음 일부 jQuery를 사용하여 .hover () 이벤트를 대상으로하고 업데이트 된 콘텐츠가있는 서브 탐색 바를 표시 할 수 있습니다..

데모

3. 광택 그림자 버튼

이것은 아마도 내가 페이지에서 동적으로 나타나기 때문에 만드는 가장 좋아하는 스타일 중 하나 일 것입니다. 알 수없는 경우 처음 로그인하면 YouTube 홈 페이지에있는 작은 파란색 버튼입니다..

블루스 color : #fff; 너비 : 190px; 높이 : 35px; 커서 : 포인터; font-family : Arial, Tahoma, sans-serif; 글꼴 크기 : 1.0em; font-weight : bold; -moz-border-radius : 2px; -webkit-border-radius : 2px; border-radius : 2px; border-width : 1px; border-color : # 0053a6 # 0053a6 # 000; background-color : # 6891e7; background-image : -moz-linear-gradient (상단, # 4495e7 0, # 0053a6 100 %); background-image : -ms-linear-gradient (상단, # 4495e7 0, # 0053a6 100 %); background-image : -o-linear-gradient (위쪽, # 4495e7 0, # 0053a6 100 %); background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0, # 4495e7), 컬러 스톱 (100 %, # 0053a6)); background-image : -webkit-linear-gradient (상단, # 4495e7 0, # 0053a6 100 %); 배경 이미지 : 선형 그래디언트 (아래쪽, # 4495e7 0, # 0053a6 100 %); 텍스트 그림자 : 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow : 인세 트 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow : 인세 트 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow : 인세 트 0 1px 0 rgba (256, 256, 256, .35); box-shadow : 삽입 0 0 1px 0 rgba (256, 256, 256, .35); 필터 : progid : DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues : hover border-color : # 002d59 # 002d59 # 000; -moz-box-shadow : 인서트 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow : inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow : 삽입 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-shadow : inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); 필터 : progid : DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); background-image : -moz-linear-gradient (맨 위, # 3a8cdf 0, # 0053a6 100 %); background-image : -ms-linear-gradient (맨 위, # 3a8cdf 0, # 0053a6 100 %); background-image : -o-linear-gradient (맨 위, # 3a8cdf 0, # 0053a6 100 %); background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0, # 3a8cdf), 컬러 스톱 (100 %, # 0053a6)); background-image : -webkit-linear-gradient (맨 위, # 3a8cdf 0, # 0053a6 100 %); 배경 이미지 : 선형 그래디언트 (아래쪽, # 3a8cdf 0, # 0053a6 100 %); . 블루스 : 액티브 border-color : # 000 # 002d59 # 002d59; -moz-box-shadow : 인세 트 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow : 인셋 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow : 인세 트 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; 상자 그림자 : 인세 트 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; 필터 : progid : DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); 배경 이미지 : -moz-linear-gradient (맨 위, # 005ab4 0, # 175ea6 100 %); 배경 이미지 : -ms-linear-gradient (맨 위, # 005ab4 0, # 175ea6 100 %); background-image : -o-linear-gradient (맨 위, # 005ab4 0, # 175ea6 100 %); background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0, # 005ab4), 컬러 스톱 (100 %, # 175ea6)); background-image : -webkit-linear-gradient (상단, # 005ab4 0, # 175ea6 100 %); 배경 이미지 : 선형 그래디언트 (하단, # 005ab4 0, # 175ea6 100 %);

전체 버튼 코드는 많이보아야하지만 시도 중입니다. 가능한 한 많은 브라우저를 지원하기 위해. MS Internet Explorer 7 이상을 지원하는 텍스트 그림자 및 상자 그림자가 있습니다. 또한 우리는 배경 이미지 다양한 공급 업체 특정 접두사에 CSS3 그라디언트가 적용된 속성.

하지만이 디자인 스타일을 좋아한다면 마우스를 올리면 활성 상태에서도주의를 끌게됩니다.. 기본적으로 테두리를 업데이트하여 푸시 다운 할 때 그림자를 포함시키고 배경 그라디언트를 조금 더 어둡게 업데이트합니다..

버튼에 이미지가 없으므로 16 진수 값을 업데이트하고 사실적으로 어떤 색 구성표와도 혼합되도록 변형 할 수 있습니다.

데모

4. 알림 플라이 아웃 메뉴

Facebook의 큰 사용자는 아니지만 재 디자인에서 UI 기술을 발견했습니다. 이 플라이 아웃 메뉴는 홈페이지에있는 알림 또는 친구 요청 팝업과 비교할 수 있습니다.

.플라이 아웃 width : 310px; margin-top : 10px; 글꼴 크기 : 11px; 위치 : 상대적; font-family : 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; 배경색 : 흰색; 패딩 : 9px 11px; 배경 : rgba (255, 255, 255, 0.9); 테두리 : 1 픽셀 단색 # c5c5c5; -webkit-box-shadow : 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow : 0 3px 8px rgba (0, 0, 0, .25); box-shadow : 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px;  .flyout #tip background-image : url ( 'images / tip.png'); background-repeat : no-repeat; background-size : 자동; 높이 : 11px; 위치 : 절대; 상단 : -11px; 왼쪽 : 25px; 너비 : 20px;  .flyout h2 텍스트 변환 : 대문자; color : # 666; 글꼴 크기 : 1.2em; 패딩 바닥 : 5px; margin-bottom : 12px; border-bottom : 1 픽셀 단색 #dcdbda;  .flyout p padding-bottom : 25px; 글꼴 크기 : 1.1em; 색상 : # 222;

여기에 표시 할 새로운 마음이 구부러지는 코드는별로 없습니다. 나는 작은 것을 사용하고있다. .팁 ToolTip 삼각형을 추가하기위한 내부 스팬 요소가있는 클래스입니다. 순수한 CSS3 삼각형을 만들 수도 있지만이 방법은 쉽지 않습니다. 이 방법을 선호한다면 함께 해킹 할 가치가 있습니다. 그러나 CSS3 회전 속성은 모든 곳에서 지원되지 않습니다. 한편 이미지에는 대체 수단이 필요하지 않습니다..

데모

5. Apple Page Wrapper

Apple 공식 웹 사이트에서 볼 수있는 많은 CSS3 상자 그림자가 인상적입니다. 아래의 예는 몇 개의 열이있는 작은 상자 컨테이너입니다. Apple의 레이아웃을 살펴보면 많은 래퍼 박스로 구성된 많은 페이지를 보게 될 것입니다.

.applewrap 너비 : 100 %; 디스플레이 : 블록; 높이 : 150px; 배경 : 흰색; 국경 : 1px 고체; border-color : # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius : 4px; -moz-border-radius : 4px; border-radius : 4px; -webkit-box-shadow : rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow : rgba (0,0,0,0.3) 0 1px 3px; 상자 그림자 : rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float : left; 박스 크기 : border-box; 너비 : 250px; 높이 : 150px; 패딩 : 16px 7px 6px 22px; 글꼴 : 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color : # 343434; 국경 - 오른쪽 : 1px 고체 # 다다다;

다양한 너비와 높이의 내용 상자로 분할 된 비슷한 페이지를 함께 넣을 수 있습니다. 이 데모에 몇 개의 컬럼을 넣었지만 어떤 형식 으로든 필요한 포맷 기술이 아닙니다. 상자 그림자는 흰색 / 회색 배경에 가장 잘 어울립니다. 그러나 나는 밝은 색상으로 표시하는 것이 좋을 것이라고 생각합니다..

데모

6. Apple Content Box

애플의 웹 사이트에있는이 다른 스타일의 콘텐츠 박스는 주로 칼럼 디자인에 사용된다. 이들은 주로 거래 및 기타 관련 정보를 보여주는 페이지 하단에 있습니다. 위쪽에서 아래쪽으로 표시되는 상자 그림자가있는 완전히 다른 디자인 스타일입니다..

.applebox 너비 : 자동; 높이 : 85px; 박스 크기 : border-box; 배경 : # f5f5f5; 패딩 : 20px 20px 10px; 여백 : 10px 0 20px; 국경 : 1 픽셀 고체 #ccc; border-radius : 4px; -webkit-border-radius : 4px; -moz-border-radius : 4px; -o-border-radius : 4px; -webkit-box-shadow : 인 세트 0px 1px rgba (0, 0, 0, .3); -moz-box-shadow : 인 세트 0px 1px rgba (0, 0, 0, .3); box-shadow : 인 세트 0px 1px rgba (0, 0, 0, .3);  .applebox .col width : 140px; 왼쪽으로 뜨다; 여백 : 0 0 0 30px;

나는이 코드가 다른 div 컨테이너를 따르고 복사하는 것이 너무 어려워 야한다고 생각하지 않는다. 우리가 적용하고있는 상자 그림자는 삽입하다 rgba 알파 투명 컬러 코드를 사용합니다. 따라서 그림자가 순수한 검정으로 설정되어 있지만 약 30 %의 불투명도 만 표시합니다..

데모

7. 주요 링크

이것은 아마도 애플의 현재 웹 사이트에서 가장 좋아하는 박스 섀도우 스타일 일 것이다. 일련의 부동 링크 상자가있는 iCloud 페이지에서이 기술의 라이브 데모 스타일을 찾아야합니다.

.applefeature 높이 : 150px; 여백 : 8px; 세로 정렬 : 위쪽; 디스플레이 : 인라인 블록;  .applefeature a display : 블록; 너비 : 168px; 높이 : 140px; 국경 : 1 픽셀 고체 #ccc; color : # 333; 텍스트 장식 : 없음; font-weight : bold; 라인 높이 : 1.3em; 배경 : # f7f7f7; -webkit-box-shadow : 인세 트 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow : 인세 트 0 1px 2px rgba (0, 0, 0, .3); box-shadow : 인셋 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius : 4px; -moz-border-radius : 4px; border-radius : 4px;  .applefeature a : 마우스 오버 배경 : #fafafa; 배경 : -webkit-gradient (선형, 0 % 0 %, 0 % 100 %, (#fff)에서 (# f7f7f7)까지); 배경 : -moz-linear-gradient (100 % 100 % 90deg, # f7f7f7, #fff); -webkit-box-shadow : 인셋 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow : 인세 트 0 1px 2px rgba (0,0,0, .3); 상자 그림자 : 인세 트 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius : 4px; -moz-border-radius : 4px; border-radius : 4px;  .applefeature img display : block; 여백 : 26px 자동 4px;  .applefeature a h4 display : block; 너비 : 160px; 글꼴 크기 : 1.3em; font-family : Arial, Tahoma, sans-serif; color : # 646464; 텍스트 정렬 : 가운데;

이러한 추천 링크는 고정 너비로 설정되며 고유 한 아이콘과 표시 텍스트가 포함됩니다. Apple의 예는 이전 내용 상자에서 보았던 것과 비슷한 상자 그림자를 사용합니다. 하나 전체 상자를 링크로 활성화 할 수 있습니다. 여기에는 : 마우스 오버 과 :유효한 상태. 이 링크 박스에는 많은 유연성이 있으며 소스 코드를 가지고 놀아보아야합니다..

높이 / 너비를 줄이고 링크 목록을 훨씬 더 작게 만들 수 있습니다. 이것들은 기사의 챕터 나 페이지 세트 일 수도 있고 하위 메뉴를 링크 아이콘으로 제한 할 수도 있습니다. 솔직히 웹 디자이너로서 얼마나 많은 힘을 가지고 있는지 보여주는 새로운 CSS3 기술의 훌륭한 세트입니다..

데모

8. 액자 이미지

이 예제 위에 회색 배경을 추가 했으므로 상자 그림자 스타일을 더 명확하게 볼 수 있습니다. 이 상자는 wordpress.com의 추천 미리보기 샷과 비슷하지만 소스 코드에 약간의 깊이를 더했습니다..

.wpframe background : #fff; border-radius : 2px; -webkit-border-radius : 2px; -moz-border-radius : 2px; 패딩 : 8px; -webkit-box-shadow : 1px 2px 1px # d1d1d1; -moz-box-shadow : 1px 2px 1px # d1d1d1; 상자 그림자 : 1px 2px 1px # d1d1d1;

이미지는 양쪽에 작은 패딩이 주어지기 때문에이 프레임은 큰 흰색 테두리로 나타납니다. 배경 색상을 항상 업데이트하거나 작은 외부 테두리를 추가하여 이미지를 배경과 분리 할 수 있습니다. 그러나이 단순한 스타일 세트는 다양한 상자 그림자 기법으로 조정할 수 있습니다. 코드로 놀고 자신의 웹 사이트에서 이미지 디자인을 향상시킬 수있는 방법을 확인하십시오..

데모

9. 빛나는 입력 필드

몇 번 Pinterest 로그인 페이지를 방문한 후에 나는이 아이디어를 얻었다. 그들의 애니메이션 스타일은 실제로 여러 개의 인라인 박스 그림자의 웅변적인 예를 보여줍니다..

.formwrap 디스플레이 : 블록; margin-bottom : 15px;  .formwrap label display : 인라인 블록; 너비 : 80px; 글꼴 크기 : 11px; font-weight : bold; 색상 : # 444; font-family : Arial, Tahoma, sans-serif;  .formwrap .shadowfield 위치 : 상대적; 너비 : 250px; 글꼴 크기 : 17px; font-family : "Helvetica Neue", Arial, sans-serif; font-weight : normal; 배경 : # f7f8f8; color : # 7c7c7c; 선 높이 : 1.4; 패딩 : 6px 12px; 개요 : 없음; 전환 : 모두 0.2 초 편이 0 초; -webkit-transition : 모두 0.2 초 편재 0; -moz-transition : 모두 0.2 초 편이 0 초. 국경 : 1 픽셀 고체 # ad9c9c; border-radius : 6px 6px 6px 6px; 상자 그림자 : 0 1px rgba (34, 25, 25, 0.2) 삽입, 0 1px #fff;  .formwrap .shadowfield : focus border-color : # 930; 배경 : #fff; color : # 5d5d5d; box-shadow : inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -moz-box-shadow : inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -webkit-box-shadow : inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);

초기 스타일은 매우 매력적이지만 나는 각 입력 필드에 중점을 둔 전환 효과. 탭 사이에서 탭을 만들면 많은 속성에서 즉각적인 차이를 볼 수 있습니다. 외부 빛나는 상자 그림자가 업데이트 된 삽입 그림자와 함께 적용됩니다. 또한 특정 입력에 집중할 때 텍스트 색상이 더 밝아지며 초점이 흐려짐에 따라 희미 해집니다..

이러한 효과 중 하나를 복사해도 양식 필드의 사용자 경험이 크게 향상됩니다. 양식을 간신히 사용할 수있는 지점까지 너무 멀리 선회하지 않도록하십시오. 그러나 대부분의 방문객은 웹 사이트와의 상호 작용 및 더 많은 참여를 유도하는 즐거운 미적 효과를 즐깁니다..

데모

10. 탄성 그림자 버튼

이 독특한 그림자 버튼은 호버 및 활성 상태에서 천천히 전환되는 스타일입니다. Mozilla 홈페이지에서 비슷한 예제를 찾을 수 있습니다. “Firefox 다운로드” 단추. 일부는 상자 그림자 속성은 실제로 세 가지 다른 그림자를 하나의 명령으로 결합합니다..

.blu-btn 디스플레이 : 인라인 블록; -moz-border-radius : .25em; border-radius : 0.25em; -webkit-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 인셋 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 삽입 0 ~ 2px 0 0 rgba (0,0,0,0.2); 상자 그림자 : 0 2px 0 0 rgba (0,0,0,0.1), 삽입 0-2px 0 0 rgba (0,0,0,0.2); 배경색 : # 276195; 배경 이미지 : -moz-linear-gradient (# 3c88cc, # 276195); 배경 이미지 : -ms-linear-gradient (# 3c88cc, # 276195); background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # 3c88cc), 컬러 스톱 (100 %, # 276195)); background-image : -webkit-linear-gradient (# 3c88cc, # 276195); 배경 이미지 : -o-linear-gradient (# 3c88cc, # 276195); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter : "progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr ="# 276195 ", GradientType = 0)"; 배경 이미지 : 선형 그래디언트 (# 3c88cc, # 276195); border : 0; 커서 : 포인터; color : #fff; 텍스트 장식 : 없음; 텍스트 정렬 : 가운데; 글꼴 크기 : 16px; 패딩 : 0px 20px; 높이 : 40px; 선 높이 : 40px; 최소 너비 : 100px; 텍스트 - 그림자 : 0 1px 0 rgba (0,0,0,0.35); font-family : Arial, Tahoma, sans-serif; -webkit-transition : 모든 선형 .2s; -moz-transition : 모든 선형 .2s; -o-transition : 모든 선형 .2s; -ms-transition : 모든 선형 .2s; 전환 : 모든 선형 .2s .blu-btn : 마우스 오버, .blu-btn : 포커스 -webkit-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 인세 트 0 -2px 0 0 rgba (0,0,0,0.3), 삽입 0 12px 20px 2px # 3089d8; -moz-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 삽입 0 ~ 2px 0 0 rgba (0,0,0,0.3), 삽입 0 12px 20px 2px # 3089d8; box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 인세트 0 -2px 0 0 rgba (0,0,0,0.3), 인셋 0 12px 20px 2px # 3089d8;  .blu-btn : 활성 -webkit-box-shadow : 인세 트 0 2px 0 0 rgba (0,0,0,0.2), 인 세트 0 12px 20px 6px rgba (0,0,0,0.2), 인 세트 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow : 인세 트 0 2px 0 0 rgba (0,0,0,0.2), 인 세트 0 12px 20px 6px rgba (0,0,0,0.2), 인 세트 0 0 2px 2px rgba (0,0, 0,0.3); 상자 그림자 : 인세 트 0 2px 0 0 rgba (0,0,0,0.2), 인 세트 0 12px 20px 6px rgba (0,0,0,0.2), 인 세트 0 0 2px 2px rgba (0,0,0,0.3 );  .grn-btn display : 인라인 블록; -moz-border-radius : .25em; border-radius : 0.25em; -webkit-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 인셋 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 삽입 0 ~ 2px 0 0 rgba (0,0,0,0.2); 상자 그림자 : 0 2px 0 0 rgba (0,0,0,0.1), 삽입 0-2px 0 0 rgba (0,0,0,0.2); 배경색 : # 659324; background-image : -moz-linear-gradient (# 81bc2e, # 659324); background-image : -ms-linear-gradient (# 81bc2e, # 659324); background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, 컬러 스톱 (0 %, # 81bc2e), 컬러 스톱 (100 %, # 659324)); background-image : -webkit-linear-gradient (# 81bc2e, # 659324); background-image : -o-linear-gradient (# 81bc2e, # 659324); 필터 : progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter : "progid : DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr ="# 659324 ", GradientType = 0)"; 배경 이미지 : linear-gradient (# 81bc2e, # 659324); border : 0; 커서 : 포인터; color : #fff; 텍스트 장식 : 없음; 텍스트 정렬 : 가운데; 글꼴 크기 : 16px; 패딩 : 0px 20px; 높이 : 40px; 선 높이 : 40px; 최소 너비 : 100px; 텍스트 - 그림자 : 0 1px 0 rgba (0,0,0,0.35); font-family : Arial, Tahoma, sans-serif; -webkit-transition : 모든 선형 .2s; -moz-transition : 모든 선형 .2s; -o-transition : 모든 선형 .2s; -ms-transition : 모든 선형 .2s; 전환 : 모든 선형 .2s;  .grn-btn : hover, .grn-btn : focus -webkit-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 인세 트 0 -2px 0 0 rgba (0,0,0) , 0.3), 인 세트 0 12px 20px 2px # 85ca26; -moz-box-shadow : 0 2px 0 0 rgba (0,0,0,0.1), 인세 트 0 -2px 0 0 rgba (0,0,0,0.3), 인 세트 0 12px 20px 2px # 85ca26; 상자 그림자 : 0 2px 0 0 rgba (0,0,0,0.1), 인세트 0 -2px 0 0 rgba (0,0,0,0.3), 인셋 0 12px 20px 2px # 85ca26;  .grn-btn : 활성화 -webkit-box-shadow : 삽입 0 2px 0 0 rgba (0,0,0,0.2), 삽입 0 12px 20px 6px rgba (0,0,0,0.2), 삽입 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow : 인세 트 0 2px 0 0 rgba (0,0,0,0.2), 인 세트 0 12px 20px 6px rgba (0,0,0,0.2), 인 세트 0 0 2px 2px rgba (0,0, 0,0.3); 상자 그림자 : 인세 트 0 2px 0 0 rgba (0,0,0,0.2), 인 세트 0 12px 20px 6px rgba (0,0,0,0.2), 인 세트 0 0 2px 2px rgba (0,0,0,0.3 );

호버 및 활성 버튼 상태에서 200 밀리 초 동안 전체 전환을 사용하고 있습니다. 이러한 스타일에 대해 큰 점은 거의 모든 클릭 가능한 요소에 적용 할 수 있다는 것입니다. 버튼, 앵커 링크, 양식 요소 또는 적절하다고 생각되는 모든 요소 - 디자인에 과부하가 발생하지 않도록 이러한 스타일을 희박하게 사용해야하지만.

이와 같은 버튼은 Mozilla에서 사용하는 것과 동일한 방식으로 저장되는 경우가 많습니다. 공짜 다운로드 용 버튼이 있거나 다른 유사한 항목이있는 블로그에 이러한 스타일을 첨부하십시오.. 사용자는 고유 한 인터페이스와 상호 작용하는 것을 좋아합니다. 클릭률 (click-through) 등급에 대한 비율이 훨씬 높아집니다..

데모

마지막 생각들

이 상자 그림자 기술 모음에서 훌륭한 교훈을 없애시기 바랍니다. 양식, 모달 상자, 단추, 도구 모음 및 전체 웹 사이트 레이아웃을 포함하여 집중할 수있는 많은 영역이 있습니다..

이러한 그림자 효과를 자신의 웹 사이트 부분에 구현할 수는 있습니다. 거기에 다른 기술이 많이 있지만,이 컬렉션은 초보자와 고급 개발자 모두에게 완벽합니다. 또한 기사에 대한 제안이나 질문이 있으면 아래의 의견 토론 영역에서 우리와 공유 할 수 있습니다..