티스토리 뷰

HTML , CSS , JS

box-shadow 와 text-shadow 사용하기

플레지 2019. 5. 14. 19:36

css에서 shadow 속성 사용하기

css에서 제공하는 그림자 효과에 대해서 알아보겠습니다.

단순하게 글을 만드는 것보다 그림자를 이용해서 글을 만든다면 좀 더 아름답겠죠???

  • text-shadow
  • box-shadow

 

text-shadow

text-shadow의 기본 문법은 text-shadow:   [그림자의x축값] [그림자의y축값] [blur값] [색상값]  ; 이다

그림자가 시작할 x축과 y축의 상대 위치를 알려주고 그림자의 흐린 정도를 나타내는 blur 값을 명시해주어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
 
 
  </head>
  <body>
    <script src="script.js"></script>
 
 
        <div class ="wrapper"> 
            <h1>  OhMyGirl  </h1>
        </div>
    </body>
</html>
 
 cs

wrapper라는 클래스를 만들어준 후  h1 태그를 이용하여 문자열을 하나 만들어보겠다.

아무 효과를 주지 않아 심심하게 보이는 OhMyGril 문자열이다. 이제 여기에 shadow 효과를 부여해보겠다.

 
1
2
3
4
5
6
7
8
.wrapper h1{
 
  font-size: 100px;
    color : #EC6EA3;
    text-shadow: 2px 2px 30px ;
    text-align: center;
 
}
 cs

 

 text-shadow의 기본 문법을 참고하자  text-shadow:   [그림자의x축값] [그림자의y축값] [blur값] [색상값]  ; 

x축 2px y축 2px  흐린 정도 30px로 주었다.  블러셔 한 것처럼 글씨가 예뻐졌다. 상큼하다.

원하는 속성 값을 지정하여 자기 마음대로 글씨를 예쁘게 만들 수 있다.

box-shadow

이번엔 h1테크를 감싸고 있는 wrapper class의 box-shadow 효과를 부여해보겠다.

1
2
3
4
5
6
7
8
9
.wrapper{
width : 800px;
margin: 0 auto;
background-color: #F1D6EF;
padding: 15px;
margin-top: 25px;
box-shadow: 10px 10px 10px #E0C3DE;
 
}
 
  

padding : 15px로 해주었다. 간단히 padding에 대해서 설명하자면 

padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받는다.

background-color : #F1D6EF; 로 해주 었다. padding의 영향으로 딱 그 정도까지만 배경색이 잘 나왔다.

box-shadow 문법은 text-shadow와 동일하다 .box-shadow: [그림자의x축값] [그림자의y축값] [blur값] [색상값];

box-shadow: 10px 10px 10px #E0C3DE; 

심심하던 OhMyGirl 이 좀 더 세련되게 바뀌었다.

OhMyGirl

 

저작자표시

'HTML , CSS , JS' 카테고리의 다른 글

sticky 를 이용한 웹 소개 페이지 만들기  (0) 2019.06.01
버튼을 이용한 페이지 느낌 내기  (0) 2019.05.22
border-radius-property  (0) 2019.05.15
CSS-border 속성(property)  (0) 2019.05.15
HTML 로 3D 애니메이션 동작 시키기  (1) 2019.05.12
댓글