WEB/CSS

[CSS] ch02-03. shadow

밍글링글링 2017. 8. 23.
728x90

03_shadow.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
    @import "../css/03_shadow.css";
</style>
</head>

<body>
    <h1>Joandora</h1>
    <h1 class="shadow1">Joandora</h1>
    <h1 class="shadow2">Joandora</h1>
    <h1 class="shadow3">Joandora</h1>
</body>
</html>

 

03_shadow.css

@CHARSET "UTF-8";
body{
    font-family: Arial;
    background: #808080;
}
h1{
    font-size:5em;
    color: white;
}
.shadow1{
    text-shadow:1px 1px 3pxc #000;
}
.shadow2{
    color: black;
    text-shadow: 3px -3px 5px #fff;
}
.shadow3{
    color: #000;
    text-shadow:
        0 0 4px #ccc,
        0 -5px 4px #ff3,
        2px -10px 6px #fd3,
        -2px -15px 11px #f80,
        2px -19px 18px #f20;
}

 

728x90

'WEB > CSS' 카테고리의 다른 글

[CSS] ch02-05. decoration  (0) 2017.08.23
[CSS] ch02-04.overflow  (0) 2017.08.23
[CSS] ch02-02. align (정렬)  (0) 2017.08.23
[CSS] ch02-01. font (폰트)  (0) 2017.08.23
[CSS] ch01-11. navigation  (0) 2017.08.23

댓글