コーディングCSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。まとめ描画モードとは?2つ以上の画像やカラーを重ね合わせて設定に応じて、様々な描画表現ができる機能。良く使われるのは乗算、オーバーレイ、スクリーンなど。Android:OK詳しい対応ブラウザについてブレンドモードの使い方ブレンドモードは一つのセレクタに複数含まれた背景の色・画像を合成します。記述としては下記のような感じです。multiply;上記で”multiply”となっているところが属性です。そこを変更すれば様々なブレンドが可能になります。luminosity;デモサンプルはこちら。※一部hoverで変わるようにしています。(IE以外のPCブラウザで見てください)実務で使えるかどうか使えます。使えるブラウザが限られているのと背景をブレンドするので、使用しやすい場所は限られていますが...使えます。サムネイルやアイキャッチ画像のようにあらかじめ大きさが決められたもののhoverやアニメーションとか。これなら、見た目の変化も生かしつつ、IEなどの影響も少なく済みます。プログレッシブエンハンスメントってやつですね。IEだけ何も変わらないのはマズいと思うので、IEには背景色を上から透過して乗せる処理をしておくのが無難かなと思います。コードで書くとこんな感じですね。}}でもこれ毎度書くとしんどいのでLESSでMIXIにしておきます。}}LESSでMIXINをつくっておけば、これ一行でこの長いコードが完結します。ブレンドの仕方、色、画像の大きさなど個々に調整可能です。.MX-hover-blend(multiply,#0066CC,0.5,'../images/hoge.jpg',300px,200px);ブレンドモードは数値でかかり具合を調整できる設定がないので、同じ画像を重ねて上にかぶさる画像を透過させることでブレンドのかかり具合を調整できるようにしています。LESS便利ですね!まとめIEで使えないあたり、使える場所は限られますがCSSでここまで出来るって驚きませんか?hoverのように、その表示の仕方にこだわらないようなところだと、低コストで他のサイトと違ったインパクトを与えれると思います。LESSを使えば対応ブラウザに合わせて書くような処理も省けますので、さらに簡単に使えます。LESS便利ですね!是非みなさんもこの便利なLESSを使って行きましょう。LESSが気になるかたはこちらもご覧ください。ブレンドモードこの記事を書いた人conti大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。新しい投稿2014年秋アニメサイトを同業者(Webデザイナ)目線で見て...関連記事コーディングRGBAをIE8でも使う簡単な方法CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成するやり方でIE8もサポートしています。そのやり方をちょっとご紹介。」という本が出版されてSassがさらに注目されていますね。運用ノウハウ開発cntlog。