- text-shadow : left top 컬러;
- text-shadow : 1px 1px white;
- text-shadow : left top 그림자세기 컬러;
- text-shadow : 1px 1px 5px white;
- 참고 : CSS 에서의 컬러값
- 아래 예제를 보시면 금방 이해할 수 있습니다. ^^
text-shadow
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
text-shadow 는 글자에 그림자를 만들어 줍니다.
예제 1
text-shadow 개요
보기
text-shadow : 1px 1px white;
text-shadow : 10px 10px white;
text-shadow : 0 0 5px blue;
text-shadow : 0 0 10px blue;
소스
<style type="text/css">
.css_test {
background : #e2e2e2;
border-radius : 10px;
font-size : 20pt !important;
font-weight : bold;
padding : 10px;
}
</style>
<div class="css_test" style="text-shadow:1px 1px white;">text-shadow : 1px 1px white;</div>
<div class="css_test" style="text-shadow:10px 10px white;">text-shadow : 10px 10px white;</div>
<div class="css_test" style="text-shadow:0 0 5px blue;">text-shadow : 0 0 5px blue;</div>
<div class="css_test" style="text-shadow:0 0 10px blue;">text-shadow : 0 0 10px blue;</div>
.css_test {
background : #e2e2e2;
border-radius : 10px;
font-size : 20pt !important;
font-weight : bold;
padding : 10px;
}
</style>
<div class="css_test" style="text-shadow:1px 1px white;">text-shadow : 1px 1px white;</div>
<div class="css_test" style="text-shadow:10px 10px white;">text-shadow : 10px 10px white;</div>
<div class="css_test" style="text-shadow:0 0 5px blue;">text-shadow : 0 0 5px blue;</div>
<div class="css_test" style="text-shadow:0 0 10px blue;">text-shadow : 0 0 10px blue;</div>
설명
예제 2
실습 - 2개의 위치 속성값 조절하기
보기
CSS 공작소에 오신것을 환영합니다.
설명
- 그림자의 위치를 조절합니다.
- text-shadow : left top 컬러;
- 어떻게 바뀌는지 직접해보세요. ^^
- text-shadow : left top 컬러;
- 어떻게 바뀌는지 직접해보세요. ^^
예제 3
실습 - 그림자세기 조절해 보기
보기
CSS 공작소에 오신것을 환영합니다.
설명
- 세번째 값은 그림자 세기 입니다.
- 이 값은 - (마이너스) 값이 없습니다.
- text-shadow : 1px 1px 1px gray
- 이 값은 - (마이너스) 값이 없습니다.
- text-shadow : 1px 1px 1px gray
예제 4
실습 - 2개 이상의 그림자 동시에 조절해보기
보기
CSS 공작소
설명
- 컴마로 구분하여 나열하면 여러개의 그림자 지정을 할 수 있습니다.
- 그림자세기는 - (마이너스) 수치가 없습니다.
- text-shadow : 1px 1px 1px red, 1px 1px 1px blue;
- text-shadow : 1px 1px 1px red, 1px 1px 1px blue, 1px 1px 1px green;
- 그림자세기는 - (마이너스) 수치가 없습니다.
- text-shadow : 1px 1px 1px red, 1px 1px 1px blue;
- text-shadow : 1px 1px 1px red, 1px 1px 1px blue, 1px 1px 1px green;
연구 1
이왕 이렇게 된거 그림자 3개 !!
보기
CSS 공작소
설명
- text-shadow : 1px 1px 1px red, 1px 1px 1px blue, 1px 1px 1px green;
- 이렇게 말이죠.
- 이렇게 말이죠.
연구 2
불타오르는 텍스트
보기
Do you like Fire ?
Do you like Fire ?
소스
<style type="text/css">
.css_test1 {/* 붉은색 불 */
background : black;
color : white;
font-size : 50pt !important;
font-weight : bold;
text-shadow : 0px 0px 4px white, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}
.css_test2 {/* 파란색 불 */
background : black;
font-size : 50pt !important;
font-weight : bold; color:white;
text-shadow : 0px 0px 4px white, 0px -5px 4px #E8F3FF, 2px -10px 6px #3352FF, -2px -15px 11px #0006FF, 2px -25px 18px #0006FF;
}
</style>
<div class="css_test1">Do you like Fire ?</div>
<div class="css_test2">Do you like Fire ?</div>
.css_test1 {/* 붉은색 불 */
background : black;
color : white;
font-size : 50pt !important;
font-weight : bold;
text-shadow : 0px 0px 4px white, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}
.css_test2 {/* 파란색 불 */
background : black;
font-size : 50pt !important;
font-weight : bold; color:white;
text-shadow : 0px 0px 4px white, 0px -5px 4px #E8F3FF, 2px -10px 6px #3352FF, -2px -15px 11px #0006FF, 2px -25px 18px #0006FF;
}
</style>
<div class="css_test1">Do you like Fire ?</div>
<div class="css_test2">Do you like Fire ?</div>
설명
- 마이크로소프트 MSDN 에서 본 예제입니다. (폰트 크기만 키워 보았습니다)
- 원래 빨간색 불 예제만 있었는데 파란색 불도 만들어 보았습니다.
- 그림자 효과를 여러개 겹쳐서 사용한 예제입니다.
- 컴마를 이용하여 여러 효과를 동시에 사용한 것일뿐 특별한 것은 아닙니다.
- 원래 빨간색 불 예제만 있었는데 파란색 불도 만들어 보았습니다.
- 그림자 효과를 여러개 겹쳐서 사용한 예제입니다.
- 컴마를 이용하여 여러 효과를 동시에 사용한 것일뿐 특별한 것은 아닙니다.
연구 3
그림자는 얼마나 멀리까지 갈 수 있을까..
보기
CSS 공작소에 오신것을 환영합니다.
연구 4
CSS 로 꾸며보기
보기
CSS 공작소
소스
<style type="text/css">
.css_test {
background-image : url('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8');
border-radius : 10px;
border : 5px solid #006464;
box-shadow : 0 0 5px black, 0 0 7px white inset;
font-size : 12pt;
margin : 0 auto;
padding : 30px;
text-align : center;
width : 490px;
}
.css_test span {
color : white;
font-size : 55pt !important;
font-weight : bold;
line-height : 308px;
text-shadow : 0 0 15px white, 0 0 10px white, 0 0 2px black, 0 0 5px black;
}
</style>
<div class="css_test">
<span>CSS 공작소</span>
</div>
.css_test {
background-image : url('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8');
border-radius : 10px;
border : 5px solid #006464;
box-shadow : 0 0 5px black, 0 0 7px white inset;
font-size : 12pt;
margin : 0 auto;
padding : 30px;
text-align : center;
width : 490px;
}
.css_test span {
color : white;
font-size : 55pt !important;
font-weight : bold;
line-height : 308px;
text-shadow : 0 0 15px white, 0 0 10px white, 0 0 2px black, 0 0 5px black;
}
</style>
<div class="css_test">
<span>CSS 공작소</span>
</div>
사용된 CSS (클릭시 보기) :
background-imageborderborder-radiusbox-shadowcolorfont-sizefont-weightline-heightmarginpaddingtext-aligntext-shadowwidth
설명
- text-shadow 와 box-shadow 를 다중으로 사용하였습니다. (컴마로 구분하여 사용)
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;
- 어항 물을 갈고나니 너무 깨끗해서 찍어본 사진으로 만들어 보았습니다. ^^;
연구 5
관련 예제 - DIV 의 진화과정(?)을 살펴봅시다
보기
DIV 로 기본틀을 만듭니다.
배경을 넣어줍니다.
테두리를 만들어줍니다.
테두리를 좀 더 보기 좋게 바꾸어 줍니다.
모서리를 깎아줍니다.
그림자를 만들어 줍니다.
안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.
글자에 그림자 효과를 줍니다.
CSS 공작소에 오신것을 환영합니다
소스
<div style="padding:20px;">DIV 로 기본틀을 만듭니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png');">배경을 넣어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px solid #BC8D01;">테두리를 만들어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01;">테두리를 좀 더 보기 좋게 바꾸어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px;">모서리를 깎아줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver;">그림자를 만들어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset;">안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white;">글자에 그림자 효과를 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white; font-weight:bold; font-size:16pt;">CSS 공작소에 오신것을 환영합니다</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png');">배경을 넣어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px solid #BC8D01;">테두리를 만들어줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01;">테두리를 좀 더 보기 좋게 바꾸어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px;">모서리를 깎아줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver;">그림자를 만들어 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset;">안쪽 그림자를 이용해서 좀 더 보기좋게 해줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white;">글자에 그림자 효과를 줍니다.</div>
<div style="padding:20px; background-image:url('/img/css/retina_wood.png'); border:4px outset #BC8D01; border-radius:10px; box-shadow:5px 5px 7px silver, 0 0 10px white inset; text-shadow:1px 1px 0 white; font-weight:bold; font-size:16pt;">CSS 공작소에 오신것을 환영합니다</div>