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

잘살아보자

프로필 보기 이 회원 글보기

· 11년 전 · 조회 3642 3642

기본적인 모양

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가 못하는 것이 없네요.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
19528	JavaScript 그누보드4 에 Daum 우편번호 찾기 API 연동 하기.	위토즈	1,397	11년 전
6810	php 스쿨에서 활동 안하는 이유. 7	Terrorboy	3,231	11년 전
6807	프로그래머가 되고 나서 처음으로 달력을 짜보았습니다. 2	Terrorboy	1,129	11년 전
6801	자바 스크립트 왜 이렇게 어렵죠???? 5	이시태	989	11년 전
6798	형님들 모바일 브라우저 구분방법 알고싶습니다. 2	궈뉘궈뉘	2,073	11년 전
6791	회사를 퇴사하고 싶습니다.... 6	어려워요잉	2,728	11년 전
24615	네이버 웹문서개편으로 인해 피해보신분들 계신가요?? 1	우왕왕와	2,090	11년 전
24612	SW개발 표준산출물 관리 가이드를 아시나요? 2	쭌111	3,121	11년 전
6788	관공서파견시 신원조회에 관해 질문 좀 드립니다 2	Shhhh	1,506	11년 전
30933	기타 호환성모드 오류(?)처리 (X-UA-Compatible) 5	LaRuota	3,256	11년 전
6784	홈페이지 들어갈때마다 트로이목마? 그런게 자꾸 떠요.. 3	숲을지나	770	11년 전
6783	페이스북으로 연예인등 특정인의 담벼락을 불러오는게 가능할까요?	막돼먹은영애	1,069	11년 전
27834	보통 웹 퍼블리셔 분들은 프로그램 어디까지 다루시나요? 4	이시태	1,946	11년 전
19527	기타 이벤트 핸들러관련 자바 문법들 정리 (안드로이드)	장영록	2,300	11년 전
19526	기타 아마존 서버 이용시 지역별 ping 조사	장영록	1,007	11년 전
19524	MySQL MYSQL 기본 명령어들 모음 1	장영록	2,815	11년 전
19521	기타 소스코드를 자동으로 정렬해주는... 2	감기약	3,018	11년 전
6777	안녕하세요, embed태그로 영상을 하나 넣었는데... 5	도룡이	1,508	11년 전
6770	주석 다는법을 배워야겠습니다. 6	Terrorboy	2,181	11년 전
19519	웹서버 FTP 프로세스 죽이기 1	시청남	1,039	11년 전
27823	크로스 부라우징 테스트 어디까지 테스트 하세요? ^^; 10	갱쿤	1,389	11년 전
6766	익스를 제외한 브라우져에서... 3	Terrorboy	1,057	11년 전
24604	중국에서 사용할 홈페이지 만들어보신분 계신가요^^ 7	야상곡	2,251	11년 전
6760	모바일 홈페이지 코딩하는 방법은 많이 다른가요? 5	도룡이	2,167	11년 전
6757	어플과 php 통신 2	Terrorboy	1,156	11년 전
30925	기타 jQuery로 동작하는 페이지 로딩바 7	우산11	5,288	11년 전
19518	jQuery 레이아웃 float 사용시 좌우 레이어 높이값 같게하기	뽁스	2,336	11년 전
30924	CSS CSS slider 테스트1	쥬노	3,049	11년 전
30923	CSS 수평메뉴1	쥬노	1,896	11년 전
6746	개발자 스페이스 vs 탭 10	뽁스	940	11년 전
19516	node.js Node.js 서버의 기본적인 내용 정리 1	장영록	2,019	11년 전
30922	기타 dpi 환산표(?)	LaRuota	2,147	11년 전
19515	기타 ocx 호환(win7 32bit 64bit)	조조부활	1,870	11년 전
30921	기타 px to em 또는 em to px	네이비칼라	1,475	11년 전
6732	개발자 미수금은 적립금인가요.. 13	위토즈	932	11년 전
27803	퍼블리셔 작업 하면서 스트레스 받는 버블리싱~ 19	Terrorboy	1,833	11년 전
19508	PHP 숫자를 한글로 변환 2	찜닭	2,554	11년 전
19507	PHP 웹프로그램 하나 만들어주세요. 렌터카용입니다.	kimsdesign	1,284	11년 전
24599	기획자 그누보드는 엄청난 시간 동안 준비되었군요. 4	Terrorboy	2,762	11년 전
19504	PHP 썸네일 클래스입니다 2	바트형아	1,708	11년 전
19501	PHP [php] 파일업로드 확장자 체크하기 2	파아랑	4,463	11년 전
19498	MySQL 자주쓰는 MYSQL 2	파아랑	1,838	11년 전
19497	기타 즐겨찾기 추가 IE/FireFox 적용	네이비컬러	2,493	11년 전
19496	PHP 두지점의 위도,경도간 거리계산	파아랑	3,706	11년 전
19495	MySQL 트리거를 이용 시 이전 insert 쿼리 primary key값 가지고 오기	잘살아보자	1,576	11년 전
19493	MySQL 무한 로딩 중인 쿼리 죽이기 1	잘살아보자	2,453	11년 전
19492	기타 파폭 ssh, ftp	민기만	802	11년 전
19491	MySQL mysql 기본 사용법	천재조상훈	1,837	11년 전
19490	기타 무료 db 클라이언트 툴	천재조상훈	4,469	11년 전
19489	웹서버 .htaccess를 이용한 리다이렉션에 대해 알아볼게요.	천재조상훈	1,590	11년 전
6721	개발자 암울한 웹의 미래 10	HackYa	1,851	11년 전
6720	개발자 혁신적이거나 싸지거나	iwebstory	734	11년 전
19488	jQuery 제이쿼리를 이용하여 노드 선택	잘살아보자	1,125	11년 전
19487	jQuery append를 이용하여 엘리먼트 추가하기	잘살아보자	1,454	11년 전
19486	jQuery 알아두면 좋은 insertBefore와 insertAfter	잘살아보자	1,559	11년 전
19485	JavaScript 000000.1원팁 ^^ 자스로 아이프레임 target 제어	천재조상훈	1,468	11년 전
30919	CSS 서버에 등록되어 있는 폰트 사용하기 1	잘살아보자	2,223	11년 전
19484	MySQL 이미 생성되어 있는 테이블에 create 스크립트를 알고 싶을 경우	잘살아보자	1,144	11년 전
30913	CSS [1원짜리팁] div나 span 등 에서 수직 정렬 두번째이야기 5	잘살아보자	3,056	11년 전
30910	CSS [1원짜리팁] div 나 span 등에 tag에서 수직 정렬하기 2	잘살아보자	3,260	11년 전
19483	JavaScript 레이어를 이용한 셀렉트 박스	잘살아보자	1,820	11년 전
19482	JavaScript 유투브 동영상 노출 시 자동 실행 또는 자동 종료 소스입니다.	잘살아보자	4,739	11년 전
19478	jQuery 페이스북 글 가져오기 쉬운방법. 3	위토즈	9,883	11년 전
30908	CSS 에디터(cheditor) 외부의 css 적용 1	매직크레용	2,618	11년 전
19477	기타 에디터(cheditor)에 사용자 css 적용하기	매직크레용	1,099	11년 전
31683	표준화 9강 최신글(skin/latest) 스킨 7	지운아빠	3,246	11년 전
19475	기타 크롬에서 새새션 열기[익스 포함] 1	파아랑	2,563	11년 전
19473	jQuery HTML5가 지원이 되지 않는 브라우져에서 form입력필드의 placeholder사용하기 1	써맨	2,093	11년 전
19471	JavaScript 초보입니다. 이미지 롤링이 xp에서만 보이는데 문제가 뭘까요. 소스좀 봐주세요. 1	star3840	1,007	11년 전
19470	PHP 그누보드5 관리자 메뉴추가 방법	파아랑	4,226	11년 전
19469	기타 간편] 시간 따라 인덱스 화면을 다르게	iwebstory	692	11년 전
19468	JavaScript 아이폰5s 소개페이지같은 사이트 만들기(?)	디귿	1,219	11년 전
19467	PHP 달력 출력하기	devdev	1,655	11년 전
19466	PHP 네이버 아이디로 로그인(메타로그인)	파아랑	1,876	11년 전
19464	JavaScript [1원짜리팁]새창 띄우기 소스 1	잘살아보자	1,840	11년 전
19462	기타 크롬 모바일 모드로 인터넷 사용하기 1	파아랑	4,611	11년 전
19461	MySQL MYSQL 최초 디비생성시 라틴으로 세팅되는 버그	파아랑	1,603	11년 전
19460	JavaScript 아이프로그램 닫기	잘살아보자	845	11년 전
19459	JavaScript 자바스크립트 공백 제거	잘살아보자	2,023	11년 전
31680	CSS CSS과정 - 20.Align 2	신리	1,592	11년 전
19458	MySQL 부동산 DB 설계 EXERD 처음으로 했는데 잘했는지 모르겟네요 ㅎㅎ	앱원	2,589	11년 전
19457	웹서버 네임서버 zone 파일 인쿠르드	잘살아보자	863	11년 전
31676	CSS CSS과정 - 19.Floating 3	신리	1,542	11년 전
31674	CSS CSS과정 - 18.Positioning 1	신리	1,452	11년 전
31671	CSS CSS과정 - 17.Display 2	신리	1,587	11년 전
31670	CSS CSS과정 - 16.Dimension	신리	1,216	11년 전
31669	CSS CSS과정 - 15.Padding	신리	1,168	11년 전
31664	CSS CSS과정 - 14.Margin 4	신리	1,213	11년 전
31663	CSS CSS과정 - 13.Outline	신리	1,553	11년 전
31662	CSS CSS과정 - 12.Border	신리	1,642	11년 전
31658	CSS CSS과정 - 11.Box Model 3	신리	1,734	11년 전
31657	CSS CSS과정 - 10.Tables	신리	1,646	11년 전
19456	PHP GPS정보 모바일에서 사용하기	파아랑	1,924	11년 전
19455	PHP SNMP(Simple Network Monitoring Protocol)과 MRTG 관련정보	파아랑	1,133	11년 전
31655	CSS CSS과정 - 9. Lists 1	신리	1,333	11년 전
31653	CSS CSS과정 - 8. Links 1	신리	1,287	11년 전
31649	CSS CSS과정 - 7. Fonts 3	신리	1,455	11년 전
31646	CSS CSS과정 - 6. Text 2	신리	1,958	11년 전
27800	퍼블리셔와 디자이너의 차이? 2	코코기	1,518	11년 전
19454	JavaScript 메뉴 네비 레이어 서서히 없어지는거	마뇽	1,520	11년 전

이전 다음

11 12 13 14 15

전체 목록