CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例
2006年11月20日-
スポンサード リンク
A List Apart: Articles: Super-Easy Blendy Backgrounds
CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例。
次のような透過PNGがあったとして、更にこの下に色を付けると・・・。
大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。
そんなCSSのテクニックが紹介されてます。
- example one (FireFoxのみ)
- example two (FireFoxのみ)
- example three (FireFoxのみ)
- example four (FireFoxのみ)
- Example five (FireFoxのみ)
- Example six (IEも動きます)
- Example seven (IEも動きます)
アイデア次第でこういった技もできてしまいますね。
通常なら画像をPhotoShopなんかで作ると思いますが、画像が一枚あればいい、というのは使えそうです。
CSSって面白いですね :-)
関連エントリ
スポンサード リンク
By.KJ : 2006年11月20日 07:08 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)Advertisements
オススメサイト
SITE PROFILE
最新のブログ記事(新着順)
- 時に邪魔なAutocompleteを無効にできる「jQuery.disableAutoFill」
- WEB上で動くプレゼンテーション作成「Presentr」
- モダンで美しいデザインのカラーピッカー「Pickr」
- 背景を物理エンジンベースでアニメーションさせる「Physics-Based Background Scroll Effects」
- リアルなタイプライターアニメーション実装「T-Writer Demo」
- テキストを部分的にアニメーションしながら交換できる「jQuery Text Rotator」
- デザインがいい感じのインタラクティブに動くグラフ描画ライブラリ「ApexCharts.js」
- 要素に属性をつけて簡単なインタラクティブアニメーションをつける「Micron.js」
- 綺麗なデザインのモーダルを何段も重ねて出せる「popbox.js」
- レスポンシブに変形する家のアニメーションのデモ「CSS Responsive House」
- 過去のエントリ
