Jam's story
[CSS] text-shadow, box-shadow 본문
text-shadow:수평 그림자 , 수직 그림자 번짐효과 색상
예) text-shadow: 5px 5px 10px red;
box-shadow: 0 0 3px red;
box-shadow: 0 0 10px blue, 3px 3px 20px red;
그림자 색상을 두개 줄 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color:yellow;
/* 수평 그림자 , 수직 그림자 번짐효과 색상 */
text-shadow: 5px 5px 10px red;
box-shadow: 0 0 10px blue, 3px 3px 20px red;
}
</style>
</head>
<body>
<h1>그림자효과 (text-shadow)</h1>
<p>박스 그림자 효과(box-shadow)</p>
</body>
</html>
그림자효과 (text-shadow)
박스 그림자 효과(box-shadow)
<style>
h1{
color:white;
text-shadow: -1px 0 black,0 -1px black, 1px 0 black, 0 1px black;
}
</style>
그림자효과 (text-shadow)
박스 그림자 효과(box-shadow)
h1{
color:white;
text-shadow: -3px 0 black, 0 3px blue, 3px 0 red, 0 -3px green;
}

writing-mode: 가로로 쓰기, 세로로 쓰기
horizontal-tb; 가로로 쓰기
vertical-lr ,vertical-rl 세로로 쓰기
<style>
p.test1{
writing-mode: horizontal-tb;
}
p.test2{
writing-mode: vertical-lr;
}
p.test3{
writing-mode: vertical-rl;
}
</style>

'WEB > CSS' 카테고리의 다른 글
[CSS] 웹글꼴 (0) | 2022.05.26 |
---|---|
[CSS] 텍스트 속성 (0) | 2022.05.26 |
[CSS] 그라디언트 (0) | 2022.05.26 |
[CSS] 배경이미지사이즈 -contain, cover, origin, clip,parallex (0) | 2022.05.26 |
[CSS] 사원이미지 출력 (0) | 2022.05.26 |