CSS text-shadow box-shadow 요소 그림자 효과 사용법

CSS3에서 스타일 만으로도 다양한 그림자 효과를 연출할 수 있습니다. 각 요소에 대한 마크업 방법과 결과값을 한번 살펴보겠습니다.


    
    그림자 속성
    

이것은 텍스트 그림자 입니다.

이것은 텍스트 그림자 입니다.

이것은 텍스트 그림자 입니다.

이것은 텍스트 그림자 입니다.

이것은 박스 그림자 입니다.

먼저 HTML 태그 상태 입니다. p태그와 div, button 세 개의 요소만 사용하고 있고 각각 글씨, 상자, 버튼 속성을 가진 요소 입니다. 이 모든 요소에 그림자 효과가 사용 가능합니다.


@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');

/*RESET*/
* { margin: 10px; padding: 0; }
body { font: 17px 'Nanum Gothic', sans-serif; }
a { text-decoration: none; color: #404040; }
li { list-style: none; }

/*BODY*/
.h01 {
    text-shadow: 3px 3px #aaa;
}

.h02 {
    text-shadow: -3px -3px #aaa;
}

.h03 {
    text-shadow: 3px -3px #aaa;
}

.h04{
    text-shadow: -3px 3px #aaa;
}

div {
    width: 300px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: yellow;
    box-shadow: 5px 5px 5px 1px #ccc; /*가로, 세로, 선명도, 영역*/
}

button {
    width: 200px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 20px;
    font-size: 15px;
    font-weight: bold;
    background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
    box-shadow: 5px 5px 5px 1px #ccc;
    text-shadow: 1px 1px #fff;
}

button:focus {
    outline: none;
}

이렇게 스타일을 만들어 주었습니다. 글씨에 그림자를 만드려면 text-shadow를, 박스나 버튼에 그림자 효과를 연출하려면 box-shadow 요소를 사용하시면 됩니다. 그 뒤에 오는 숫자와 색상을 지정하시면 되며 box-shadow의 경우는 숫자가 4개가 들어오는데 각 숫자의 의미는 주석으로 달아놨으니 한번 살펴봐주세요. 잘 안보이시는 분들을 위해서 아래에도 한번 더 작성해 놓겠습니다.


text-shadow : 가로px 세로px 색상값(이름);

box-shadow : 가로px, 세로px, 선명도px, 영역px 색상값(이름)


가로와 세로의 크기값에서 -가 붙으면 반대로 생성됩니다. 또한 box-shadow의 경우에서 선명도와 영역은 각각 블루어 효과와 효과 범위를 지정합니다. 선명도의 값이 커지면 퍼짐이 심해집니다. 선명도의 값이 0이면 그림자는 뚜렷합니다. 영역의 값이 커지면 그림자 적용 영역이 넓어집니다. 설명으로는 이해가 잘 안 될 수도 있을테니 바로 예제로 살펴보시겠습니다.


See the Pen CSS : text-shadow / box-shadow by rgy0409 (@rgy0409) on CodePen.

보시면 어떻게 그림자가 적용되어지며 방향도 어디를 수정해야 원하는 위치에 나타나게 할 것인지 이해가 되실 것 입니다. 이제 그림자 효과를 사용해서 개성 넘치는 스타일을 만들어 보시기 바랍니다. 끝.



"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유하기

댓글(0)

Designed by JB FACTORY