[CSS] CSS로 그림자 만들기
* 이 소스는 오픈소스입니다. 출처는 확인할 수 없어서 남기지 못합니다. 양해바랍니다.
앞으로 디자인을 CSS로 하는 세상이 올것 같습니다.
익스8은 지원이 안되지만, 익스9부터는 잘 됩니다.
아.. 익스8에서 지원이 안된다고는 하지만.. 그래도 나름 이쁩니다. ^^
개발자분들 앞으로 디자인 걱정 뚝 끊으셔도 될듯합니다.
데모 : http://shoponex.com/opensource/css/shadow01/
소스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Rolled corners</title>
<style type="text/css" media="screen">
body {background: #fff;color: #333;font: 100%/1.4 Arial, sans-serif;}
.section {border: 4px solid #fff;margin: 100px;padding: 10px 20px;overflow: hidden;width: 310px;
background-image: -moz-linear-gradient(top, #f6f2ec, #e2dbce); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f6f2ec),color-stop(1, #e2dbce)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f2ec', EndColorStr='#e2dbce'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f2ec', EndColorStr='#e2dbce')"; /* IE8 */
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* Opera 10.5, IE 9.0 */
}
.reveal {
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #f90, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #f90, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #f90, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* Opera 10.5, IE 9.0 */
}
</style>
</head>
<body>
<div class="section">
<p>Matching mask shadow color blends to solid background.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="section reveal">
<p>Contrasting mask shadow color reveals shadow layering.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
댓글 2개