KinutaHandicraft log
    ヒ ン ト 集
■ ヒントだよ!HTML & CSS ■
    topへ     前のページに戻る     ページ閉じる
■ CSS の 例(直線的なグラデーションを表示する)
書式
{プロパティ:linear-gradientライナー-グラディエント:(方向 , 色 始点 , 色 終点);}
■ 例 1 (直線的なグラデーションを表示する)
CSS
.lgrd {background-image:linear-gradient(0deg, #ffffff,#99ff00); }
HTML
<div class="box1 size44 lgrd"><b>■ 例 1 (直線的なグラデーションを~
 
 
 
 
 
■例 2 (直線的なグラデーションを表示する)
CSS
.lngrad { background-image: linear-gradient(to top right, red 0%, white 50%, blue 100%); }
HTML
<div class="box2 size44 lngrad"><b>■ 例 2 (直線的なグラデーションを~
 
 
 
 
 
▲このページ一番上へ
■ CSS の 例(直線的なグラデーションを繰り返し表示する)
書式
{プロパティ:repeating-liner-gradientリピーティング-ライナー-グラディエント:(方向 , 色 始点 , 色 終点);}
■例 3 (直線的なグラデーションを繰り返し表示する)
CSS
.repline1 { background-image: repeating-linear-gradient(yellow 20%, green 80%);}
HTML
<div class="box1 size44 repline1"><b>■ 例 3 (直線的なグラデーションを~
 
 
 
 
 
■例 4 (直線的なグラデーションを繰り返し表示する)
CSS
.repline2 {background-image: repeating-linear-gradient(-45deg, #fff, #fff 5px,#00ffff 5px, #00ffff 10px); }
HTML
<div class="box2 size44 repline2"><b>■ 例 4 (直線的なグラデーションを~
 
 
 
 
 
    topへ     前のページに戻る     ページ閉じる
© KinutaHandicraft
lngrad