■ ヒントだよ！HTML & CSS ■
■ CSS の 例(フィルターをかける)
- 書式
- {filter:効果;}
■ 白黒(grayscale)/セピア(sepia)/色相(hue-rotate)/反転(invert)
| 元画像 |
 |
| grayscale | sepia |
|
|
| hue-rotate | invert |
|
|
- CSS
-
td { text-align: center; }
.f_grayscale { filter: grayscale(100%); }
.f_sepia { filter: sepia(100%); }
.f_hue { filter: hue-rotate(120deg); }
.f_invert { filter: invert(100%); }
- HTML
-
<table>
<tr>
<td colspan="2">元画像</td>
</tr><tr>
<td colspan="2"><img src="img/testsora.png"></td>
</tr><tr>
<td>grayscale</td><td>sepia</td>
</tr><tr>
<td><img src="img/testsora.png" class="f_grayscale"></td>
<td><img src="img/testsora.png" class="f_sepia"></td>
</tr><tr>
<td>hue-rotate</td><td>invert</td>
</tr><tr>
<td><img src="img/testsora.png" class="f_hue"></td>
<td><img src="img/testsora.png" class="f_invert"></td>
</tr>
</table>
© KinutaHandicraft
