0226_html5/css3_background-color / gradient

background-color 

 

gradient 

• linear-gradient , radial-gradient

 

코드 보기 [더보기 클릭]

<style>
         
/* background-color */
     .bgcolor div{width:100%; height: 50px;}
     .bgcolor .color1{background-color:rgba(255,0,0,0) }
     .bgcolor .color2{background-color:rgba(255,0,0,0.2) }
     .bgcolor .color3{background-color:rgba(255,0,0,0.4) }
     .bgcolor .color4{background-color:rgba(255,0,0,0.8) }
     .bgcolor .color5{background-color:rgba(255,0,0,1) }
     
     .bgcolor .color6{background-color:#ff0000; opacity: 0.5 } /*ie7,8 호환안됨*/
     

/* gradient */
     .gradient div{width: 300px; height: 300px; margin-bottom: 20px; border:1px solid #222}
     .gradient .linear1{background:linear-gradient(red, yellow)}
     .gradient .linear2{background:linear-gradient(to bottom right, red, yellow, green)} /*방향변경*/
     .gradient .linear3{
background: rgba(248,242,244,1);
background: -moz-linear-gradient(left, rgba(248,242,244,1) 0%, rgba(51,112,21,1) 23%, rgba(217,46,117,1) 44%, rgba(249,225,235,1) 71%, rgba(92,82,85,1) 96%, rgba(207,180,192,1) 96%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,242,244,1)), color-stop(23%, rgba(51,112,21,1)), color-stop(44%, rgba(217,46,117,1)), color-stop(71%, rgba(249,225,235,1)), color-stop(96%, rgba(92,82,85,1)), color-stop(96%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)), color-stop(99%, rgba(207,180,192,1)));
background: -webkit-linear-gradient(left, rgba(248,242,244,1) 0%, rgba(51,112,21,1) 23%, rgba(217,46,117,1) 44%, rgba(249,225,235,1) 71%, rgba(92,82,85,1) 96%, rgba(207,180,192,1) 96%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%);
background: -o-linear-gradient(left, rgba(248,242,244,1) 0%, rgba(51,112,21,1) 23%, rgba(217,46,117,1) 44%, rgba(249,225,235,1) 71%, rgba(92,82,85,1) 96%, rgba(207,180,192,1) 96%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%);
background: -ms-linear-gradient(left, rgba(248,242,244,1) 0%, rgba(51,112,21,1) 23%, rgba(217,46,117,1) 44%, rgba(249,225,235,1) 71%, rgba(92,82,85,1) 96%, rgba(207,180,192,1) 96%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%);
background: linear-gradient(to right, rgba(248,242,244,1) 0%, rgba(51,112,21,1) 23%, rgba(217,46,117,1) 44%, rgba(249,225,235,1) 71%, rgba(92,82,85,1) 96%, rgba(207,180,192,1) 96%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%, rgba(207,180,192,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f2f4', endColorstr='#cfb4c0', GradientType=1 );
         
     }
     
     .gradient .radial1{background:radial-gradient(orange, green)}
     .gradient .radial2{
         background: rgb(131,58,180);
background: radial-gradient(circle, rgba(131,58,180,1) 0%, rgba(204,198,41,1) 30%, rgba(253,29,239,1) 50%, rgba(50,152,45,1) 75%, rgba(252,176,69,1) 100%);
     }
     .gradient .radial3{background:radial-gradient(red, orange)}
          
          
 </style>        
</head>
       
        
<body>
    
<h3>[background-color]rgba투명도 값은 0.1~1까지 지정 가능</h3>
    <div class="bgcolor">
        <div class="color1">1</div>
        <div class="color2">2</div>
        <div class="color3">3</div>
        <div class="color4">4</div>
        <div class="color5">5</div>
        
        <div class="color6">6(16진수로 컬러지정)</div>
    </div>

    
<h3>[gradient] ie10부터 지원</h3>    
    <div class="gradient">
        <div class="linear1">라인1</div>
        <div class="linear2">라인2</div>
        <div class="linear3">라인3</div>
    
        <div class="radial1">원형1</div>
        <div class="radial2">원형2</div>
        <div class="radial3">원형3</div>
    </div>
      
</body>

 

색상을 코드로 바꿔주는 사이트 

https://www.cssmatic.com/

The ultimate CSS tools for web designers | CSSmatic

다른 부라우저와의 호환을 위해 코드가 음층시리 길게됨쓰..

-moz- : firefox
-webkit- : safari
-o- : opera
-ms- : ie
>>접두어는 기본코드 뒤에 온다 

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

 

 

EX_html5_background-color,gradient.html

0.00MB

 

EX_html5_0226-3_all.zip

0.09MB