[초보팁] 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에서 해주시기 바랍니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 372 |
선택과집중
|
4개월 전 | 237 | |
| 371 |
선택과집중
|
4개월 전 | 265 | |
| 370 |
선택과집중
|
4개월 전 | 347 | |
| 369 |
선택과집중
|
4개월 전 | 323 | |
| 368 |
선택과집중
|
4개월 전 | 365 | |
| 367 |
nekoieye
|
5개월 전 | 413 | |
| 366 |
선택과집중
|
5개월 전 | 304 | |
| 365 |
선택과집중
|
5개월 전 | 353 | |
| 364 |
선택과집중
|
5개월 전 | 392 | |
| 363 | 10개월 전 | 1074 | ||
| 362 | 10개월 전 | 778 | ||
| 361 | 1년 전 | 1231 | ||
| 360 | 2년 전 | 5144 | ||
| 359 |
별지기천사
|
3년 전 | 3559 | |
| 358 |
 ChristinaWei |
3년 전 | 2629 | |
| 357 | 3년 전 | 2827 | ||
| 356 | 3년 전 | 2383 | ||
| 355 |
네이비블루
|
3년 전 | 2583 | |
| 354 |
네이비블루
|
3년 전 | 2157 | |
| 353 |
웹플레이스
|
3년 전 | 3362 | |
| 352 | 4년 전 | 4540 | ||
| 351 |
 그누그누오 |
4년 전 | 4183 | |
| 350 | 4년 전 | 17293 | ||
| 349 | 4년 전 | 4809 | ||
| 348 | 4년 전 | 4051 | ||
| 347 | 4년 전 | 2538 | ||
| 346 | 4년 전 | 3642 | ||
| 345 | 4년 전 | 3444 | ||
| 344 | 4년 전 | 3333 | ||
| 343 |
루돌프사슴코
|
4년 전 | 2502 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기