背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」:phpspot開発日誌
blur.js 背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」。 次のように、全体の背景をベースに、ブロックにブラーがかかった背景画像を設定するプラグインです ぼかしのレベルは制御可能です。 数年後、WEBページってどんな感じになってるんだろうって、こういうのを見るといつも思ってわくわくします 関連エントリ 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 時間の入力を楽にすることが出来るjQueryプラグイン スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」
[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify
IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて
テキストにグランジ風のエフェクトをつけるスタイルシート | コリス
janko at warp speedのエントリーから、h1やp内のテキストデータに、グランジ風のエフェクトをつけるスタイルシートを紹介します。 Add grunge effect to text using simple CSS デモ 仕組みは、以前当サイトでも紹介した「テキストにグラデーション効果をつけるスタイルシート」と同じもので、背景画像を変更したものとなっています。 空spanを使用するため好みは分かれると思いますが、画像で作成することに比べて、テキストデータだと修正・更新が容易という利点もあります。 デモは、下記のようになっています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h1>This is one very long title with grunge effect<span></span>
ウノウラボ Unoh Labs: IE6でアルファチャンネルを含むPNGを表示する
yamaokaです。 webサイトで背景が透明な画像を使用する場合、画像を透過GIFまたはアルファチャンネルを含むPNGで作成する必要があります。どちらを使用してもかまわないのですが、下図のように背景を指定した場合はPNGの方がきれいにアンチエイリアスがかかります。 透過GIFとアルファチャンネルを含むPNGの比較 posted by (C)フォト蔵 PNGを使いたくなるところですが、Internet Explorer 6（以下IE6）はアルファチャンネルに対応していないので、一工夫する必要があります。IE6でアルファチャンネルを含むPNGを表示するには、IE6のフィルタ機能であるAlphaImageLoaderを使用します。フィルタを使用すると、画像としてではなく要素の背景のように振る舞います。したがって、表示させるにはIE6でアクセスがあった場合のみ以下のような処理を行えばよいことにな
CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例:phpspot開発日誌
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なんかで
Super Stripes
Supawhat? Stripes are undoubtly very popular graphical element these days. They are used in many ways in web design, mostly as background patterns of various layout parts or block elements. Here is a fresh tip that could save your time. Solid and transparent When i match colors for some web site, i find it very easy if i use one small .GIF image, which has one stripe transparent and others are sol
Lucky bag: : blog: 背景画像に使える透過 GIF
斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！ 使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。 斜線 oblique-line_1px.gi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
usrb.in
CSSで背景に透明PNGを使う時のポイント - ホームページ制作ブログ
すごアフィ | すごいアフィリエイトサイト、勝手に集めました。