CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3での色の定義

CSS3で色を定義するには、RGB、RGBA、HSL、およびHSLAを使用します。これにより、色の値を使用でき、16進値を使用して色を定義することもできます-

CSS3 RGBA 色の値は、赤、緑、青、アルファ用です。アルファは色の不透明度、つまり0.0から1.0の間の数値です。ここで、1.0は完全に不透明になります。ここでは、RGBAのAlphaパラメータで作成された不透明度の違いを確認できます-

CSS3での色の定義

例

ここで、RGBAカラー値の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color:rgba(108,111,35,0.6);}
#demo2 {background-color:rgba(108,111,35,0.5);}
#demo3 {background-color:rgba(108,111,35,0.4);}
#demo4 {background-color:rgba(108,111,35,0.3);}
#demo5 {background-color:rgba(108,111,35,0.2);}
#demo6 {background-color:rgba(108,111,35,0.1);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

出力

CSS3での色の定義

CSS3 HSL 要素に色が設定されている場合の色相、彩度、明度用です。色相の値は0〜260で、0または360は赤、240は青、120は緑です。彩度と明度はパーセンテージ値です。

例

HSLカラー値の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsl(150, 100%, 50%);}
#demo2 {background-color: hsl(150, 100%, 50%);}
#demo3 {background-color: hsl(140, 100%, 40%);}
#demo4 {background-color: hsl(120, 100%, 40%);}
#demo5 {background-color: hsl(120, 100%, 30%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

出力

CSS3での色の定義

HSLAカラー値 色相、彩度、明度、アルファ用です。アルファは色の不透明度、つまり0.0から1.0の間の数値です。ここで、0.0は完全に透明な場合、1.0は完全に不透明な場合です。

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {background-color:rgba(108,111,35,0.6);}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Andy Bichel</p>
</body>
</html>

出力

CSS3での色の定義

例

ここで、16進値の色を設定する方法を見てみましょう。 − 

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: white;
   background-color: #B13838;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>

出力

CSS3での色の定義


  1. CSS3での列ルールの設定

    列ルールを設定するには、省略形のcolumn-ruleプロパティを使用します。これにより、次のプロパティを設定できます- column-rule-width: set the width of the rule between columns column-rule-style: set the style of the rule between columns column-rule-color: set the rule of the rule between columns 列ルールの値は次のように設定できます- column-rule: column-rule-width

  2. CSS3でのキーフレームの定義

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームは、CSS3の中間アニメーションステップを制御します。 以下は、CSS3でキーフレームを定義するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 100px; &n