[초보팁] 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>
결과물
댓글 4개
pororo
6년 전
감사합니다
6년 전
별말씀을요 :D
6년 전
좋은 팁 감사합니다.^^
6년 전
감사합니다 ^^
게시판 목록
디자이너팁
디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 312 | 5년 전 | 1312 | ||
| 311 | 5년 전 | 902 | ||
| 310 | 5년 전 | 890 | ||
| 309 | 5년 전 | 795 | ||
| 308 | 5년 전 | 909 | ||
| 307 | 5년 전 | 2164 | ||
| 306 | 5년 전 | 1024 | ||
| 305 | 5년 전 | 1044 | ||
| 304 | 5년 전 | 5844 | ||
| 303 | 5년 전 | 1044 | ||
| 302 | 5년 전 | 2544 | ||
| 301 | 5년 전 | 1662 | ||
| 300 | 5년 전 | 1700 | ||
| 299 | 5년 전 | 2377 | ||
| 298 | 5년 전 | 1327 | ||
| 297 | 5년 전 | 1386 | ||
| 296 | 5년 전 | 1001 | ||
| 295 | 5년 전 | 895 | ||
| 294 | 5년 전 | 983 | ||
| 293 | 5년 전 | 964 | ||
| 292 | 5년 전 | 1012 | ||
| 291 | 5년 전 | 933 | ||
| 290 | 5년 전 | 1659 | ||
| 289 | 5년 전 | 1155 | ||
| 288 | 5년 전 | 1701 | ||
| 287 | 5년 전 | 1214 | ||
| 286 | 5년 전 | 1978 | ||
| 285 | 5년 전 | 2416 | ||
| 284 |
 KD자이너 |
5년 전 | 1452 | |
| 283 | 5년 전 | 1640 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기