CSS - Shadow , Gradient , Transition

김석환·2020년 10월 24일

CSS CSS3 공부

CSS

목록 보기

12/18

1. text-shadow

텍스트에 그림자 효과를 부여하는 프로퍼티이다.

Horizontal-offest - 단위 : px - 그림자를 텍스트의 오른쪽으로 이동
vertical-offest - 단위 : px - 그림자를 텍스트의 아래쪽으로 이동
Blur-Radius - 단위 : px - 그림자의 흐림정도를 지정
Shadow-Color - 단위 : color - 그림자의 색상을 지정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      h1{
        color: white;
        text-shadow: 1px 1px 2px black, 0 0 25px purple, 0 0 5px rgb(90, 3, 90);
      }
    </style>
    <title>Document</title>
</head>
<body>
  <h1>Text-shadow</h1>
</body>
</html>

위의 예처럼 여러가지 색을 한번에 지정할 수도 있다.

2. box-shadow

요소에 그림자 효과를 부여하는 프로퍼티이다.

Horizontal-offest - 단위 : px - 그림자를 텍스트의 오른쪽으로 이동
vertical-offest - 단위 : px - 그림자를 텍스트의 아래쪽으로 이동
Blur-Radius - 단위 : px - 그림자의 흐림정도를 지정
Shadow-Color - 단위 : color - 그림자의 색상을 지정
Inset - 단위 : inset - inset 키워드를 지정하면 그림자가 요소 안에 위치
Spread - 단위 : px - 그림자를 더 크게 확장시킨다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div{
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
    </style>
    <title>Document</title>
</head>
<body>
  <div>Box-shadow</div>
</body>
</html>

3.Gradient

예전에는 포토샵등의 소프트웨어를 사용하여 그레디언트 효과의 이미지를 제작하여 사용하였지만 이미지 다운로드에 시간소요 및 확대시 해상도 문제등이 있었다. 브라우저마다 문법이 상이하여 다루기가 수월하지 않아 그레디언트를 직접 작성보다는 툴을 이용하는것이 보편적이다.

CSS Gradient Generator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div{
        background: rgb(126,135,183); /* Old browsers */
        background: -moz-linear-gradient(-45deg,  rgba(126,135,183,1) 25%, rgba(15,180,231,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg,  rgba(126,135,183,1) 25%,rgba(15,180,231,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg,  rgba(126,135,183,1) 25%,rgba(15,180,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e87b7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        padding : 30px;
        width: 250px;
        height: 100px;
      }
    </style>
    <title>Document</title>
</head>
<body>
  <div>Gradient</div>
</body>
</html>

4.transition

트랜지션은 css속성의 값이 변화할때 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div{
        width: 140px;
        height: 140px;
        background: purple;
        padding: 30px;
      }
      div:hover{
        border-radius: 25%;
        background: rebeccapurple;
      }
    </style>
    <title>Document</title>
</head>
<body>
  <div>Transition</div>
</body>
</html>

위 예제는 박스위에 마우스를 hover시키면 위의 박스가 아래의 박스 모양으로 바뀐다. 하지만 지금은 즉시 변하게 되는데 transition속성을 이용하면 변화가 일정 시간에 걸쳐 일어나게 할 수 있다.

div{
    width: 140px;
    height: 140px;
    background: purple;
    padding: 30px;
    transition: 2s;
}
div:hover{
    border-radius: 25%;
    background: rebeccapurple;
}

위와 같이 스타일을 수정해 주면 상태변화가 2초에 걸쳐 일어나게 된다.

4.1 transition-property

transition-property속성은 트랜지션의 대상이 되는 css속성을 지정한다. 지정하지 않는 경우 모든 속성이 트랜지션의 대상이 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      div{
        width: 140px;
        height: 140px;
        background: purple;
        padding: 30px;
        transition: 2s;
        transition-property: background;
      }
      div:hover{
        border-radius: 25%;
        background: rebeccapurple;
      }
    </style>
    <title>Document</title>
</head>
<body>
  <div>Transition</div>
</body>
</html>