펄스나인

[초보팁] div에 css만으로 부드러운 쉐도우 처리하기

박스이미지를 만들고 그림자 또한 포토샵으로 처리하는 경우가 많은데

CSS로 처리하면 빠르고 편합니다!

컬러값이나 픽셀변경으로 거리나 투명도 등 조정이 가능합니다.

 

<style>

// 그림자와 무관
body { background-color:#f3f3f3; }
div {
    width:300px;
    height:200px;
    padding:20px;
    margin: 50px;
    background-color:#ffffff;
}

 

// 그림자 부분
.test { box-shadow: 30px 30px 70px rgba(0,0,0,0.2); }
</style>

 

<div class="test"></div>

 

 

결과물

 

3696525782_1553321622.5102.png

|

댓글 4개

별말씀을요 :D
좋은 팁 감사합니다.^^
감사합니다 ^^
댓글을 작성하시려면 로그인이 필요합니다.

디자인과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
제목 글쓴이 날짜 조회
19-04-13 조회 1,821
19-04-12 조회 1,763
19-04-08 조회 2,053
19-04-07 조회 2,308
19-04-05 조회 2,701
19-04-03 조회 4,104
19-03-25 조회 2,415
19-03-24 조회 4,963
19-03-23 조회 3,763
19-03-21 조회 8,716
19-03-20 조회 8,566
19-03-16 조회 2,178
19-03-16 조회 2,781
19-03-13 조회 1,880
19-03-13 조회 3,743
19-03-07 조회 2,810
19-03-06 조회 2,159
19-03-06 조회 2,981
19-03-06 조회 2,912
19-03-05 조회 2,755
19-03-04 조회 3,144
19-03-04 조회 1.7만
19-03-02 조회 1,874
19-02-27 조회 2,142
19-02-26 조회 3,316
19-02-25 조회 2,583
19-02-25 조회 2,020
19-02-22 조회 2,170
19-02-19 조회 4,448
19-02-18 조회 2,439