Chillax in dev

[WEB]CSS: 페이지 꾸미는 팁 (colorzilla), gradient(그라데이션) 사용법 본문

WEB

[WEB]CSS: 페이지 꾸미는 팁 (colorzilla), gradient(그라데이션) 사용법

Seong Story 2020. 8. 10. 11:40
728x90

[WEB] CSS : 웹 페이지 꾸미기 gradient(그라데이션) 사용법

- CSS의 기능 중 그라데이션으로 이쁘게 색을 적용할 수 있는 기능이 있어 정리해 봅니다.. 그런데 왜 Gradient(그레디언트) 기능을 그러데이션이라 하며 사용하는지 잘 모으겠으나.. 이쁘게 잘 가져다 사용만 하면 장땡이니, 사용법을 살펴봅니다.

 

- 그레디언트 

 1. 2가지 이상의 색상을 혼합한 색을 만들어 채색하는 기능.

 2. 아래 url을 활용해서 간단하게 만들 수 있다.

  www.colorzilla.com/gradient-editor/

 

Ultimate CSS Gradient Generator from ColorZilla

A powerful Photoshop-like CSS gradient editor

www.colorzilla.com

 

- 적절히 원하는 값을 입력한 이후 빨간 표시 부분에 마우스를 가져가면 나오는 copy 버튼을 클릭하여 style에 복붙 하면 간단하다.

 

-> 코드 전문을 첨부합니다.

 

- ex 01)

- 구현 화면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<!--
 * 그레이디언트(gradient)
  -2가지 이상의 색상을 혼합한 색을 만들어 채색하는 기능.
  - http://www.colorzilla.com/gradient-editor/
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26_gradiant.html</title>
    <style type="text/css">
        .gradient{ height:60px; line-height:60px; text-align: center;
        /*복붙한 장소~*/
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
background: #cedbe9; /* Old browsers */
background: -moz-linear-gradient(top,  #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=0 ); /* IE6-9 */
 
        /*복붙한 장소 ~*/
        }
    </style>
</head>
<body>
 <div class="gradient">
        <h1>CSS3 Gradient demo</h1>
        <p >아래 주소를 클릭 하시면 이동합니다.<br></p>
        <a href= https://www.colorzilla.com/gradient-editor/>www.colorzilla.com/gradient-editor
        <h1 class="text">test Gradient demo</h1>
    </div>  
</body>
</html>
 
 cs

 

 

- ex 02)

- 구현 화면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26_gradiant.html</title>
    <style type="text/css">
        .gradient{ height:60px; line-height:60px; text-align: center;
        /*복붙한 장소~*/
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff0000+0,ffff00+50,00ff00+100 */
        background: #ff0000; /* Old browsers */
        background: -webkit-linear-gradient(left, #ff0000 0%, #ffff00 50%, #00ff00 100%);
        background: -o-linear-gradient(left, #ff0000 0%, #ffff00 50%, #00ff00 100%);
        background: linear-gradient(to right, #ff0000 0%, #ffff00 50%, #00ff00 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 */
        /*복붙한 장소 ~*/
        }
    </style>
</head>
<body>
 <div class="gradient">
        <h1>CSS3 Gradient demo</h1>
        <p >아래 주소를 클릭 하시면 이동합니다.<br></p>
        <a href= https://www.colorzilla.com/gradient-editor/>www.colorzilla.com/gradient-editor
        <h1 class="text">test Gradient demo</h1>
    </div>  
</body>
</html>
 
 cs
728x90
LIST
저작자표시 동일조건

'WEB' 카테고리의 다른 글

[css3] reset.css 이해하기  (0) 2020.12.14
[WEB]CSS: 페이지 꾸미는 팁 shadow - 음영 효과 주는 방법  (0) 2020.08.10
[WEB]CSS: 기초 font, position, display 속성 등등  (0) 2020.08.09
[WEB]CSS: Hover 반응선택자 사용방법  (0) 2020.08.08
[WEB] CSS3으로 웹 꾸미기: 다양한 선택자(Selector)  (0) 2020.08.08
'WEB' Related Articles more
Comments