■ ヒントだよ!HTML & CSS ■
■ 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 (直線的なグラデーションを~
© KinutaHandicraft