July 2016
Intermediate to advanced
384 pages
10h 11m
Japanese
Content preview from CSSシークレット ―47のテクニックでCSSを自在に操る
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
知っておくべきポイント
HSLカラーモデル、background‐size
課題
グレースケールの画像に対して特定の色のティント（濃淡）を加えるテ
クニックは、それぞれ大きく異なる写真に視覚的な統一感を与えるために
よく使われています。グレースケールの効果が静的に適用され、ホバーや
その他のインタラクションの発生時にのみ効果が解除されるのも一般的
です。
従来は、画像編集アプリケーションを使って2つのバージョンの画像を
用意し、簡単なCSSを使って両者を切り替えながら表示していました。正
しく動作はしますが、データ量やHTTPリクエストの回数が増加し、保守
も困難になります。例えばグレースケールの画像の色を変えようと思った
ら、既存のすべての画像について新しいバージョンを作りなおさなければ
なりません。
別のアプローチとしては、画像の手前に半透明の色を重ねたり、不透明
度が指定された画像を単色の塗りつぶしの手前に配置するといったものが
あります。しかし、これらはティントの定義に反します。画像中のすべて
の色がターゲットの色のティントへと変換されるわけではなく、コントラ
ストが大幅に低下する問題もあります。
画像をcanvas要素に変換した上で、この画像にティントを適用するよ
うなスクリプトもあります。正しいティントの表示を得られますが、制限
が多く動作は低速です。
色調の調整
17
172
4章：視覚効果
より簡単に、 CSS の中から直接ティントを適用できることが望まれ
ます。
フィルターを使った解決策
このような効果を単体で実現して ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.