변색 된 사이드 바를 사용하여 CSS 음영 효과를 만드는 방법

Question

안녕하세요 저는 오른쪽 측면이 내 주요 콘텐츠이고 아래쪽에 그라디언트 효과가있는 왼쪽 사이드 바에 그림자가있는 첨부 된 이미지 효과를 만드는 방법을 잘 모릅니다. .

Answer 1

확인이 아웃 : CSS3 gradient Generator는 색상을 선택하고 코드를 생성 한 다음 CSS (또는 어떤 요소 당신이 그것을에 원하는)에 body에 추가합니다. 메인 컨텐츠 사용으로 인한 그림자

.body /*or element of your choice*/ 
-webkit-gradient(
{ 
    linear, 
    left bottom, 
    left top, 
    color-stop(0.02, rgb(91,204,245)), 
    color-stop(0.76, rgb(5,37,70)) 
) 
-moz-linear-gradient(
    center bottom, 
    rgb(91,204,245) 2%, 
    rgb(5,37,70) 76% 
) 
} 

:

.MyElement 
{ 
box-shadow: 10px 10px 5px #888; 
} 

또한 CSS3 Box-shadow을 확인하십시오.

또한 브라우저마다 아직 box-shadow (IE)을 지원하지 않으므로 border images을 사용할 수 있습니다. 하지만 IE는 그 중 하나를지지하지 않습니다. 그래서 내가 사이트에서 한 것은 그림자의 1px 고 PNG 이미지를 만들어 내 래퍼 div의 배경으로 설정 한 것입니다. X 또는 Y) 그리고 잘 작동했습니다.

그 중 일부는 도움이됩니다.

Answer 2

사이드 바는 불투명도/투명도가있는 png 이미지를 사용해야하며 그림자가있는 사이드 바는 그라데이션 배경으로 작동합니다. 그라데이션 배경의 경우 (당신은 거의 모든 곳에서 요즘 볼 수있는 IE6PNG 해킹 해결책을 찾을 수있다, 그래서 늘이 솔루션처럼, IE6 주), 중 배경 이미지를 만들거나 css3 gradient

Answer 3

img.shady 
{ 
    display: inline-block; 
    webkit-box-shadow: 0 8px 6px -6px black; 
    -moz-box-shadow: 0 8px 6px -6px black; 
    box-shadow: 0 8px 6px -6px black; 
    padding: 10px; 
    margin-bottom: 5px !important; 
    min-height: 240px; 
    width: 630px; 
    border: 1px solid #D7D7D7 
}