CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例
2006年11月20日-
スポンサード リンク
A List Apart: Articles: Super-Easy Blendy Backgrounds
CSSを使い、1枚の画像だけでカラフルなグラデーション背景を作る例。
次のような透過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って面白いですね :-)
関連エントリ
スポンサード リンク
Advertisements
オススメサイト
SITE PROFILE
最新のブログ記事(新着順)
- クリエイティブなオーディオビジュアライザー実装デモ
- Vanila.jsベースのツールチップ&ポップオーバー実装「Tippy.js」
- 日付や時間を指定するスライダーUI実装「jquery-time-slider」
- リッチなファイルアップロードウィジェットが作れる「filepond」
- フィルター可能な選択リスト作成「multi-list」
- 画像をバラバラに切り裂いて元に戻す風スライドショー
- 特定のDOMを指定して印刷することが出来るボタン「printThis」
- ページ内にインスタグラムの写真をかっこよく表示できるjQueryプラグイン「masongram」
- 軽量のスライド式サイドメニュー実装「bigSlide.js」
- ブラウザ上でテーブル編集を可能にする「tabullet」
- 過去のエントリ