Jam's story

[CSS] 그라디언트 본문

WEB/CSS

[CSS] 그라디언트

애플쩀 2022. 5. 26. 11:51

[CSS 그라디언트 (gradient) 효과]

  • 두 개이상의 지정된 색상간에 부드러운 전환
  • 선형, 방사형, 원추형 그라디언트 유형
  • 선형 그라디언트 형식:

 

선형 :  선처럼 부드러운 전환 
background-image: linear-gradient (그라데이션 방향,  최소한 두개의 색상지정), 
 
예)
 background-image: linear-gradient (그라데이션 방향, red, yellow); 
 background-image: linear-gradient(45deg, rgba(255,0,0,0.5),yellow);
 background-image: linear-gradient(45deg, rgba(255,0,0,0.5),yellow, blue);


방사형 : 원처럼 부드러운 전환 
background-image:radial-gradient (그라데이션 방향,  최소한 두개의 색상지정), 
예)  background-image: radial-gradient(red,green,blue);

     이렇게 간격을 조정할 수 도 있다. 
      background-image: radial-gradient(red 5%,green 15%,blue 60%);

원추형 : 

방향의 기본값은 위에서 아래로
to right
to bottom
to top
to left
예) 각도 예)
 background-image: linear-gradient(to top, red,yellow);
또는 각도로 줄 수도 있다. 
 
각도 예) background-image: linear-gradient(45deg, red,yellow);

 

 
선형 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#grad1{
            width: 200px;
            height: 200px;
        /*     background: lightcoral; */
            background-image: linear-gradient(45deg, rgba(255,0,0,0.5),yellow, blue);
        }
    </style>
</head>
<body>
    <h3>그라디언트 효과</h3>
    <div id="grad1">

    </div>
</body>
</html>
Document

그라디언트 효과

방사형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div#grad1{
            width: 200px;
            height: 200px;
            background-image: radial-gradient(circle,red 5%,green 15%,blue 60%);

        }
    </style>
</head>
<body>
    <h3>그라디언트 효과</h3>
    <div id="grad1">

    </div>
</body>
</html>
Document

그라디언트 효과

저작자표시 (새창열림)

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

[CSS] 텍스트 속성  (0) 2022.05.26
[CSS] text-shadow, box-shadow  (0) 2022.05.26
[CSS] 배경이미지사이즈 -contain, cover, origin, clip,parallex  (0) 2022.05.26
[CSS] 사원이미지 출력  (0) 2022.05.26
[CSS] 여러 배경이미지 (다중 배경) 추가  (0) 2022.05.25
'WEB/CSS' Related Articles more
Comments