CSS3
1. text-shadow
- 텍스트에 그림자 효과 부여
text-shadow: h-shadow v-shadow blur color;
h-shadow : 필수값. 그림자 시작 위치 (가로방향). 음수값 허용
v-shadow : 필수값. 그림자 시작 위치 (세로방향). 음수값 허용
distance (blur) : 그림자와의 거리 (멀어질수록 뿌옇게 보인다)
color : 색상
예제1)
<style type="text/css">
body { background-color: white; padding: 20px; }
.section {
border: 4px solid #AAA;
width: 350px;
text-align: center;
padding: 30px;
font-size: 20px;
}
.section div:nth-child(1){text-shadow:1px 1px 4px #888;}
</style>
</head>
<body>
<div class="section">
<div>
This property accepts a comma-separated list of shadow effects to be applied to the text of the element. <shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.
</div>
<div>
This property accepts a comma-separated list of shadow effects to be applied to the text of the element. <shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.
</div>
</div>
</body>
</html>
예제2)
<style type="text/css">
body { background-color: white; padding: 20px; }
.section {
width: 350px;
text-align: center;
padding: 30px;
font-size: 30px;
background-color: #000;
}
</style>
</head>
<body>
<div class="section">
<div style="text-shadow:3px 2px 3px #fff;">
Text-Shadow
</div>
<div style="text-shadow:0px 0px 4px #fff;">
Text-Shadow
</div>
</div>
예제3)
<style type="text/css">
body { background-color: white; padding: 20px; }
.section {
width: 350px;
text-align: center;
padding: 30px;
font-size: 30px;
background-color: #000;
}
.section div {
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}
</style>
</head>
<body>
<div class="section">
<div>
Text-Shadow
</div>
</div>
</body>
</html>
2. box-shadow
- 요소에 그림자 효과 부여
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow : 필수값. 그림자 시작 위치 (가로방향). 음수값 허용
v-shadow : 필수값. 그림자 시작 위치 (세로방향). 음수값 허용
blur blur : 거리
spread : 그림자 크기
color : 색상
inset : 적으면 안쪽 그림자
예제)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>box-shadow</title>
<style type="text/css">
body {
background-color: white;
padding: 20px;
}
.section {
border: 4px solid #AAA;
width: 600px;
text-align: center;
padding: 30px;
font-size: 30px;
}
#css3Style {
position:absolute;
left:132px; top:310px;
width:500px; height:35px;
margin:0 0 -100px 0;
background:#0000FF;
}
#css3Style div{
color:white;
text-align:right;
padding-right:20px;
font-style:italic;
}
#header div:nth-child(1){text-shadow:1px 1px 4px #888;}
.section img{-webkit-box-shadow:3px 3px 4px #888;}
#css3Style div:nth-child(1){background:#7cc0cb;z-index:999;opacity:0.5;}
</style>
</head>
<body>
<div id="header">
<div>
CSS3 BOX-SHADOW & TEXT-SHADOW
</div>
</div>
<div class="section">
<img width="540" height="300" src="img/penguins.jpg" ">
<div id="css3Style" >
<div>
CSS3 BOX-SHADOW
</div>
</div>
</div>
</body>
</html>
3. border-radius
- 요소의 모서리를 곡선으로 표현
- px과 % 사용
- 사방의 곡선 값을 다르게 지정 가능
예제)
<style type="text/css">
body {
background-color: white;
padding: 20px;
}
.section {
border: 4px solid #AAA;
width: 300px;
text-align: center;
padding: 30px;
}
img {
margin-bottom: 20px;
}
#css3Style {
position:absolute;
left:132px; top:310px;
margin:0 0 -100px 0;
background:#f78600;
opacity:0.8;
}
#css3Style div{
color:white;
text-align:right;
padding-right:20px;
font-style:italic;
}
.section img {
box-shadow: 10px 10px 5px silver;
}
.section img:nth-child(1){border-radius:20px;}
.section img:nth-child(2){border-top-left-radius:20px;border-bottom-right-radius:20px;}
.section img:nth-child(3){border-top-left-radius:20px;}
</style>
</head>
<body>
<div class="section">
<img width="200" height="80" src="img/penguins.jpg" >
<img width="200" height="80" src="img/penguins.jpg" >
<img width="200" height="80" src="img/penguins.jpg" >
</div>
</body>
</html>
'웹접근성과 웹표준' 카테고리의 다른 글
| 웹표준 사이트 실습 예제 #3 PORTFOLIO 화면 (0) | 2013.08.19 |
|---|---|
| 웹표준 사이트 실습 예제 #2 ABOUT 화면 (0) | 2013.08.19 |
| 네이버 널리에서 제공하는 웹 접근성 체크 (0) | 2013.08.17 |
| 웹 접근성 검사도구 (0) | 2013.08.17 |
| CSS3 프로퍼티: opacity, transform, transition (0) | 2013.08.12 |
