• GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

カメきちカメきち  - ,,  07:00 AM

コピペで使える! CSSで凝った背景を作るサンプル集

コピペで使える! CSSで凝った背景を作るサンプル集

140621_cs.jpg


CSS Gradients with background-blend-mode」はCSSの「background-blend-mode」を活用した背景サンプルをたくさん紹介しているサイトです。ウェブデザインをやっている方には非常に参考になるサンプルばかりです。

以下に使ってみた様子を載せておきます。 


まずCSS Gradients with background-blend-modeにアクセスしましょう。


140621_cs2.jpg


このように「background-blend-mode」を使ったサンプルが用意されています。CSSが表示されていますが、値を変更するとその場で適用された背景を閲覧できますよ。

サンプル集の下部には、実際に画像を使用した場合とのファイルサイズの違いが比較されています。CSSだけで実現するほうが圧倒的にファイルサイズが軽くなりますね。ウェブデザイナーの方はぜひ学習の参考に使ってみてください。


CSS Gradients with background-blend-mode

(カメきち)

MORE FROM LIFEHACKER

powered by
  • 基礎から覚える、深く理解できる。 Webデザインの新しい教科書
  • こもり まさあき,赤間 公太郎|エムディエヌコーポレーション

Kotaku

Recommended

© mediagene Inc.