It's a Smile World - 【jQuery】CSSを使わずに画像置換
久々にjQueryネタです。 画像置換をする際、僕はいつも text-indent:-9999px; などでテキストを領域外へ飛ばして対応していましたが、jQIRというjQueryプラグインを使えばCSSを使わずにテキストを画像置換できます。 使い方は以下、 <script type="text/javascript"> $(function(){ $(".hjpg").jQIR("jpg","images/"); $(".hgif").jQIR("gif","images/"); $(".hpng").jQIR("png","images/"); }); </script> jQIR以前は、画像置換する場所のclass名、jQIR以後は順に、置換する画像のファイル形式、画像が格納されているディレクトリのパスと続きます。 <h
CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」:phpspot開発日誌
CSS Decorative Gallery I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images.CSSでイメージをオシャレに修飾するサンプル集「CSS Decorative Gallery」。 イメージにＣＳＳをあてることで、次のように、セロハンテープで貼り付けたり、画鋲でとめたりといった効果を出すことができます。 デモページはこちらでＩＥ６でも問題なく動作。 沢山種類があって、色んな場面で使えそうです。 これは久しぶりに感動しました。
チカチカ枠線 - 3ping.org
img { background-image: (bg_uneune.gif); padding: 1px; } bg_uneune.gif→ paddingで隙間を空けて、後ろに敷かれているGIFアニメをちょっと見せるという仕掛け。 しかーし、WIN IE6ではDOCTYPEスイッチが標準準拠モードでないとIMG要素にpaddingが効かないので上のCSSではできない。 互換モードで、IE6にも同じように表示させようとすると、IMGの親要素のPやDIVに細工して <p class="photo"><img src="inu.jpg"～/></p> p.photo { background-image: url(bg.gif); padding: 1px; display: inline; _width: 100px; /*WIN IE6*/ } /* MACIE \*/ p.photo
テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック:phpspot開発日誌
Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法１ 次のDIVがあったとして、 <div class="resize"></div> 次のＣＳＳを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更
clip プロパティを使ってみよう！ − kazumich.log
CSS clip で検索してみても、どう使ったらいいのか書かれているところが見当たらないので、書き残しておきます。320x240サイズの写真の一部を120x120に見せるためのHTMLとCSSの書き方になります。 a-blog の photolog ? の機能では、縮小表示させて切り取る部分を最小にして表示させるという方法をとってます。 最終的には、一番下のタグのような感じで書きますが、分かりやすく順番にスタイルを追加していく事にします。 1) まずは＜IMG＞タグに、style="position: absolute; clip: rect(80px 290px 200px 170px)" 以下のようなスタイルを指定します。 position: absolute; もあわせて指定。（正直どうもココが良く分からないがこう書け！って事で）そうする事で、この＜IMG＞にはサイズが無くなってしま
小粋空間: CSSで画像に影をつける（ドロップシャドウ）
CSSを利用して画像に影をつける（ドロップシャドウ）カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。 仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。 参考にさせて頂いたのは下記のサイトです。ありがとうございました。 1976design.com：Easy CSS drop shadows A List Apart：CSS Drop Shadows nlog(n)：アップロードした画像に影をつけるには POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる 今日の覚え書き：cssの設定で自動的に画像に影を付ける 花と写真とblogと。：画像に影をつけてみる。 最初の1976d
Web2.0 アプリケーションライク な背景画像を生成する Background Image Maker
http://lab.rails2u.com/bgmaker/ ウェブサイトのデザインをしているとき、自分はCSSを利用します。そのCSSを書いていて、「ああ、こんな背景画像がほしーな」と思うと、今までは画像編集ソフトでちまちま作ってSCPでサーバにアップして確認し「いやここはもうちょいこうした方が」とまた少しだけ修正してアップして…という繰り返し作業を行ってました。 しかしその作業単調が面倒になってきたため、簡単にWeb2.0っぽいアプリケーションでよく使わるような背景画像をWeb上から作成できるツール、「Background Image Maker」を作ってみました。下のような背景画像を簡単に作成ができます。また先日このページを現在のデザインにリニューアルしたのですが、今使っている背景画像も全部 Background Image Maker を使って作成してます。 使い方は値を適当に弄
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像上にキャプションをアニメーション表示するCSSサンプル集:phpspot開発日誌
CSSのみで画像に違和感なく注釈を入れるサンプル:phpspot開発日誌
CSSオンリーでロールオーバーマップ:phpspot開発日誌