CSS 3 타일 효과

-1

대시 보드를 개발 중이며 효과가있는 타일을 디자인해야하는 곳에 붙어 있습니다. 상자 그림자 및 테두리 속성을 사용했지만 효과를 복제 할 수 없었습니다! 아래는 내가 원하는 효과를 보여주는 샘플 이미지입니다! 어떤 사람이이 효과를 얻는 방법에 대한 아이디어가 있다면 나를 안내 해주십시오!CSS 3 타일 효과

감사합니다.

Sample effect

코드 :

.header-tile{ 

    height: 90px; 
    min-width: 60px; 
    background-color: rgb(182, 163, 163); 
    float: none; 
    display: inline-block; 
    box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 0.64); 
    margin: 0.5px; 
    border: 1px solid rgba(0, 0, 0, 0.65); 

}

출처

2013-08-12 Imesh Chandrasiri

* 상자 그림자 및 테두리 속성을 사용했지만 효과를 복제 할 수 없었습니다. * ** 그래서 코드 **가 어디 있습니까? –

그래서 당신은 얼마나 멀리, 그리고 당신의 HTML은 무엇입니까? –

코드를 업데이트했습니다! –

당신이 하나를 확인하실 수 있습니다 .

.header-tile{ 

    height: 90px; 
    min-width: 60px; 
    background-color: rgb(182, 163, 163); 
    float: none; 
    display: inline-block; 
    box-shadow: inset 1px 1px 1px 1px rgba(255,255,255, .46), inset -1px -1px 1px 1px rgba(0,0,0, .26); 
    margin: 0.5px; 
    border: 1px solid rgba(0, 0, 0, 0.65); 

}

JSFIDDLE이 당신이 원하는 무엇인가?

P .: 배경에 사용할 투명도 값을 설정할 수 있습니다.

출처

2013-08-12 08:50:10 Harshad

예! 이게 내가 찾고 있던거야! 당신보다! –

전적으로 있는지 무엇을 하드 찾을 수 있지만, 모든 색상이 틀렸다 :

.header-tile{ 

    height: 90px; 
    min-width: 60px; 
    background-color: #28272C; 
    float: none; 
    display: inline-block; 
    box-shadow: 0px 0px 1px 1px rgba(170, 170, 170, 0.64); 
    margin: 0; 
    border: 1px solid #454547; 
    color:White; 

}

http://jsfiddle.net/kxqqd/

출처

2013-08-12 08:44:52 Liam

단순히 그림자와 테두리를 약간 두껍게 만들어 더 발음 효과를 얻으려고 했습니까? 나는 또한 색상이 조금 변경

div { 
    height: 150px; 
    min-width: 150px; 
    margin: auto; 
    background-color: rgb(182, 163, 163); 
    float: none; 
    display: inline-block; 
    box-shadow: 0px 0px 4px 4px rgba(170, 170, 170, 0.8); 
    margin: 0.5px; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
}

JSFiddle

: 당신의 CSS를 사용하여 나는 다음과 같은 바이올린을했다.

출처

2013-08-12 08:52:12 MitulP91

CSS 3 타일 효과

답변

관련 문제