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

디자이너팁

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

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

[초보팁] 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

추천
2

댓글 4개

전체 360
디자이너팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT