Loading...

http://topsecret.boy.jp/sfp/

menu

CSS3の色とグラデーションをする指定rgb()とhsl()につて

Cate : CSS, WebTag :

CSS3から導入されたrgb()・rgba()とhsl()・hsla()について。

特徴としては、この表記で透明度の設定をする事ができるようなっています。
 
あまり詳しくは調べていませんが、現在のマークアップでは、
#rgbよりもrgb(0,0,0)の方がよく使われているそうです。
RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったものです。
alphaは色の透明度を表します。
 
rgba(R赤,G緑,B青,Aアルファ値);
 
rgb()とhsl()はアルファ機能がない表記。
rgba()とhsla()はアルファ機能がある表記。
 

/*rgb表記*/
.p {color:rgb(0,0,0);
    background-color: rgb(255,0,0,0.7);
    border-color: rgb(0,255,0,0.3);
   }
.p {color:rgba(0,0,0,0);
    background-color: rgba(255,0,0,0.7);
    border-color: rgba(0,255,0,0.3);
   }

/*hsl表記*/
.p {color:hsl(0,0,0);
    background-color: hsl(255,0,0,0.7);
    border-color: hsl(0,255,0,0.3);
   }
.p {color:hsla(0,0,0,0);
    background-color: hsla(255,0,0,0.7);
    border-color: hsla(0,255,0,0.3);
   }

 

色の指定

Photoshopでいうこの部分。

グラデーション表現

.sample{
height: 200px;
background: linear-gradient( 45deg, rgba(218,0,51,0.5), rgba(255,218,0,0.5) ); 
background: -webkit-gradient(linear, left center, right center,  from(rgba(218,0,51,0.5)), to(rgba(255,218,0,0.5)));
background: -moz-linear-gradient( 45deg, rgba(218,0,51,0.5), rgba(255,218,0,0.5); ); 
background: -o-linear-gradient( 45deg, rgba(218,0,51,0.5), rgba(255,218,0,0.5); );
background: -ms-linear-gradient( 45deg, rgba(218,0,51,0.5), rgba(255,218,0,0.5); );
}

 

45deg

 

フィルタリング表現

Before

After

 

.sample02 {
	position:relative;
	display:inline-block;
}
.sample02:before  {
	content: '';
	display:block;
	position:absolute;
	width:100%;
	height:100%;
        background: linear-gradient( 45deg, rgba(218,0,51,0.2), rgba(255,218,0,2) ); 
	background: -webkit-linear-gradient( 45deg, rgba(218,0,51,0.2), rgba(255,218,0,0.2) );
	background: -moz-linear-gradient( 45deg, rgba(218,0,51,0.2), rgba(255,218,0,2); ); 
	background: -o-linear-gradient( 45deg, rgba(218,0,51,0.2), rgba(255,218,0,2); );
	background: -ms-linear-gradient( 45deg, rgba(218,0,51,0.2), rgba(255,218,0,2); );
}

 

使用ガイドライン

● 色の指定方法はアルファ値の指定がある場合のみRGBaの書式で記述する。
● アルファ値の値がない場合はいままでどうり#rbgで記述すほうが無難。
● CSS3対応のブラウザでしかレンダリングされないという点に気をつける。
 

対応ブラウザ

今のところは、
● Chrome
● safari
● firefox
● ie9
● opera10
 
ここでまたしてもie8以下問題がありますね。