Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[CSS] 박스 쉐도우 box-shadow 그림자 넣기

정찬명 님의 블로그에 갔더니 9 Useful CSS3 Properties 라는 글이 있었다. 그 중 인상깊은 놈 하나를 퍼왔다. 나머지도 보고 싶다면 직접 글을 보기 바란다.

CSS3긴 하지만, 지금도 당장 사용할 수 있다.

/* Opera */
box-shadow:10px 10px 10px silver;

/* Firefox */
-moz-box-shadow:10px 10px 10px silver;

/* Safiri, Chrome */
-webkit-box-shadow:10px 10px 10px silver;

/* IE */
filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=20);

이렇게 쓰면 아래처럼 나온다고 한다.

css3 box-shadow를 적용한 모습

이거 참 괜찮은 효과다. 정찬명 님의 나라디자인 블로그에 가면 더 많은 것을 볼 수 있다. 그림을 클릭하면 이동한다.

나중에 디자인할 때 꼭 써먹어 봐야겠다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다