■CSSフィルターで簡単画像変換（11）：テキストの変換

　CSS（Cascading Style Sheets）のフィルター機能を使用すると、カラー画像に対して容易に下記に示す各種変換を施すことができます。

（１）blur（ぼかし）
（２）brightness（明度）
（３）contrast（コントラスト）
（４）drop-shadow（ドロップシャドウ）
（５）grayscale（グレースケール）
（６）hue-rotate（色相環）
（７）invert（階調の反転）
（８）opacity（不透明度）
（９）saturate（彩度）
（10）sepia（セピア）

　ところで、フィルター機能は画像だけでなく、テキスト（文字列）に対しても有効です。

　例を２つ示します。
　

　ヒマワリの原産地は北アメリカで、高さ3mくらいまで成長し、夏から秋にかなり大きな黄色の花を咲かせます。

（例１）上記の文章に下記フィルター（ぼかし）を掛けてみます。
　・使用フィルター：　{filter: blur(1px)}

　ヒマワリの原産地は北アメリカで、高さ3mくらいまで成長し、夏から秋にかなり大きな黄色の花を咲かせます。

（例２）前記の文章に下記フィルター（色相環）を掛けてみます。
　・使用フィルター：　{filter: hue-rotate(90deg)}

　ヒマワリの原産地は北アメリカで、高さ3mくらいまで成長し、夏から秋にかなり大きな黄色の花を咲かせます。

ホーム