더 나은 브라우저 지원을 위해 "필터 : 드롭 섀도우"동작을 시뮬레이트하십시오.

다음과 같은 디자인이 있습니다.더 나은 브라우저 지원을 위해 "필터 : 드롭 섀도우"동작을 시뮬레이트하십시오.

Card Layout

그리고 다음과 같은의 마크 업입니다.

<div class="card"> 
    <div class="card-bar">&nbsp;</div> 
    <div class="card-content"> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
    </div> 
</div>

다음은 전체 레이아웃에 대한 CSS입니다.

.card { 
    display: block; 
    margin: auto; 
    width: 500px; 
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5)); 
} 
.card .card-bar { 
    height: 60px; 
    background: #F8F8F8; 
    border-radius: 4px 4px 0px 4px; 
} 
.card .card-content { 
    display: block; 
    margin-top: -35px; 
    width: 85%; 
    float: right; 
    padding: 5px 10px 5px 10px; 
    background: #F8F8F8; 
    border-radius: 0px 0px 4px 4px; 
}

동일한보기를 제공하지 않습니다 (또는 수 나는 그것을 만드는 방법을 알고하지 않습니다 수 있습니다) 그래서 filter: drop-shadow 속성을 사용했습니다 box-shadow 사용. 그리고이 숙박 시설은 very limited browser support입니다. 표준 box-shadow 속성으로 어떻게 이것을 얻을 수 있습니까?

출처

2012-10-13 Kushal

두 클래스의 스타일을 입력하십시오. – BoltClock

당신은 상자 - 그림자의 중복을 충당하기 위해 의사 요소를 사용할 수

...

.card-bar:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: -3px; 
    border-right: solid #f8f8f8 3px; 
    height: 110%; 
}

여기 데모보기 : http://jsfiddle.net/2SBBv/

출처

2012-10-14 13:59:38 Duopixel

고마워요! 위대한 작품, 나는 또한 당신의 피들에서 왼쪽 사각형을 매달 았던 것보다 다르게 만들었고, 꽤 멋지고 깨끗한 것처럼 보였습니다. :-) – Kushal

기술적으로는 하나의 요소로 기술적으로 할 수 있으며 왼쪽 사각형에': before'를 사용하고 그림자 중복을 다루는 요소에 대해서는': after'을 사용합니다. 그러나 그 "귀"를 사용하려고합니다. "뭔가를 위해! – Duopixel

그래, 난 pseudo-elements로 할 수는있어.하지만 네 말이 맞아. 나는 그 "귀"를 무언가에 사용할거야. :-) – Kushal

당신은 동등한 그림자를 만들 수 있습니다 Firefox에서 SVG를 사용하고 DX 필터를 IE에 사용하십시오. 나는 생성 된 내용 앞에 막대를 만들 것이다. some comparisons between true drop-shadow and box-shadow 및 an article on the technique I've just described :

.shadowed { 
-webkit-filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5)); 
filter: url(#drop-shadow); 
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, 
Color='#444')"; 
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, 
Color='#444')"; 
} 


<!-- HTML elements here --> 

<svg height="0" xmlns="http://www.w3.org/2000/svg"> 
<filter id="drop-shadow"> 
<feGaussianBlur in="SourceAlpha" stdDeviation=".2"/> 
<feOffset dx="0" dy="1" result="offsetblur"/> 
<feFlood flood-color="rgba(0,0,0,0.5)"/> 
<feComposite in2="offsetblur" operator="in"/> 
<feMerge> 
<feMergeNode/> 
<feMergeNode in="SourceGraphic"/> 
</feMerge> 
</filter> 
</svg>

나는이 최근에 대해 서면으로 작성했습니다.

출처

2012-10-16 19:14:26

더 나은 브라우저 지원을 위해 "필터 : 드롭 섀도우"동작을 시뮬레이트하십시오.

답변

관련 문제