CSS : box-shadow, 박스 쉐도우(그림자) [펌]
기본적인 모양
box-shadow: 2px 2px 5px #000;
문법
box-shadow: h-shadow v-shadow {blur {spread}} {color} {inset};
h-shadow : 수평 그림자 위치 (필수) (음수일 경우 위로)
v-shadow : 수직 그림자 위치 (필수) (음수일 경우 왼쪽으로)
blur : blur(흐리게)효과수준 (옵션)
spread : 그림자 크기 (옵션)
color : 그림자 색 (옵션)
inset; 내부 그림자 형식 (옵션)(inset 이라고 적음)
특징
h-shadow, v-shadow 로 상하, 좌우 로 설정 가능
blur 및 spread (그림자 크기) 설정가능
spread (그림자 크기) 설정시
위치도 주의해서 설정
blur를 무조건 같이 표시해야한다.(0px라도)
레이아웃으로의 위치를 차지하지 않는다.
단순한 꾸밈으로 동작하며 box-shadow로 인한 레이아웃 뒤틀림이 없음.
브라우저 지원
IE9+
Firefox
Chrome
Opera
Safari 5.1.1 (윈도우 최후 버전은 5.1.7 이므로 지원은 됨)
(링크에 예제 모양 몇개와 w3schools쪽 링크도 붙여놨어요)
데코레이션용으로 강조를 위해서는 꽤 좋은 기능 같아서...
(outline 으로 했는데 안 예쁘면 한번 생각해보세요.)
위 자료는 펌 자료인데요..
특별한 기능을 하는 css 찾다가.. 찾은것이에요.
css가 못하는 것이 없네요.
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌