이전
목록
다음
컴

CSS : box-shadow, 박스 쉐도우(그림자) [펌]

잘살아보자
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2014-08-11 (월) 19:03:24 · 6920
기본적인 모양 
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가 못하는 것이 없네요.

#퍼블리셔팁 #퍼블리셔 #팁자료실 #css
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,181
12-08-07 조회 3,842
12-08-03 조회 3,654
12-07-31 조회 3,760
12-07-30 조회 3,710
12-07-16 조회 3,911
12-07-15 조회 3,747
12-07-07 조회 3,606
12-07-06 조회 3,805
12-07-03 조회 3,765
12-06-29 조회 3,382
12-06-22 조회 3,755
12-06-17 조회 4,013
12-05-21 조회 3,937
12-05-02 조회 3,457
12-05-02 조회 4,248
12-05-02 조회 3,372
12-04-30 조회 3,570
12-04-30 조회 3,254
12-03-17 조회 4,123
12-03-10 조회 3,449
12-03-08 조회 3,975
12-03-03 조회 3,688
12-02-27 조회 5,106
12-02-17 조회 4,395
12-02-16 조회 4,678
12-02-03 조회 3,342
12-01-31 조회 3,253
12-01-24 조회 3,251
12-01-17 조회 3,958
12-01-05 조회 3,498
11-12-30 조회 3,232
11-12-23 조회 4,786
11-12-08 조회 3,556
11-12-07 조회 4,513
11-11-27 조회 3,943
11-11-25 조회 4,269
11-11-23 조회 3,711
11-11-22 조회 3,569
11-11-09 조회 3,278
11-10-23 조회 3,219
11-10-19 조회 3,176
11-10-08 조회 2,858
11-10-04 조회 2,858
11-10-04 조회 5,316
11-09-01 조회 4,395
11-08-13 조회 2,568
11-08-06 조회 3,251
11-07-11 조회 3,647
11-06-27 조회 3,005
11-06-21 조회 2,669
11-06-13 조회 2,476
11-06-07 조회 2,486
11-05-26 조회 2,443
11-04-20 조회 2,776
11-03-21 조회 2,876
11-03-18 조회 2,565
11-03-11 조회 2,583
11-02-07 조회 2,409
11-01-18 조회 2,735
11-01-12 조회 2,457
11-01-06 조회 2,549
10-12-10 조회 2,806
10-12-09 조회 2,658
10-12-08 조회 5,090
10-11-29 조회 2,924
10-11-28 조회 2,828
10-11-28 조회 2,661
10-11-19 조회 2,854
10-11-04 조회 2,730
10-10-21 조회 2,454
10-10-19 조회 3,412
10-10-12 조회 2,738
10-10-07 조회 2,574
10-09-30 조회 3,528
10-09-17 조회 3,940
10-09-17 조회 3,887
10-05-31 조회 3,596
09-12-31 조회 3,730
09-07-23 조회 5,056
08-09-16 조회 3,254
08-09-06 조회 3,000
08-09-04 조회 3,423
08-08-16 조회 4,451
08-08-15 조회 3,319
08-08-14 조회 4,533
08-08-12 조회 4,003
08-07-23 조회 2,819
08-07-10 조회 3,767
08-07-04 조회 2,997
08-06-27 조회 7,633
08-06-19 조회 4,946
08-05-27 조회 5,549
08-05-25 조회 5,384
08-05-23 조회 3,463
08-05-23 조회 4,629
08-05-21 조회 4,976
08-05-20 조회 4,092
08-05-20 조회 3,314
08-04-18 조회 4,389
글쓰기