CSSを使ったli要素の装飾におけるちょっとした小技メモ
先日の「ブログデザイン勉強会」からしばらく経ちましたが、サイドバーもちょこちょこ再びいじったりしてまして、これで漸く完全リニューアル完了かなぁと思っています。 だいぶ印象変わったかなぁ。ちょっと白ベースが増えた感も否めませんが、まぁコレはコレでありかなと。 で、今回はそのサイドバーを改変する際に知ったCSSのちょっとした小技をメモ。 元々うちの場合、特定のli要素に対してテキストの下に罫線を表示させていたんですが、ここをちょっとゴニョゴニョすると、最後のli要素の下に表示される罫線が消せるというやつです。 この方法、全然知らなくて、今回初めて使いました。なので自分用メモ。 これがコレまでの場合。この場合のCSSは、 li { padding: 0px 0px 5px 0px; list-style: none; background: url(line.gif) bottom repeat
CSS Sprite Generator, Editor, and Code
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
a要素が2行になった場合に背景下にテキストが来ないように。
目新しいネタは全く見つからないとか色々を言い訳に、月1書けばいい方になってる今日この頃・・・うぅ。 そういえば、web creatorsの5月号（たぶん）に参考にしているサイトでウチのサイトの名前があったとかどーとか聞いたんですがマジっすか！？読んでないーorz あと、7月号（Vol.91）にちょろっと記事書いてるので良ければ買ってくだしあ。 タイトルがa要素になってますが、インライン要素でもいいです。 背景下にとかも書いてますが、リストとかでマーカーの変わりにbackgroundをa要素に指定した時なんかの場合です。 タイトルって難しいですねorz さて、時間もあまりないので本題に。 サンプルページを見る 以前に書いた、ユーザーの動き。にもあるように、リストのマーカー部分をクリックして、クリック出来ない的な人が居たりするってのもありますが、li要素にbackgroundの指定をしてpad
input type=fileをCSSでクールにスタイルするサンプル:phpspot開発日誌
CSS2/DOM - Styling an input type="file" input type=fileをCSSでクールにスタイルするサンプル。 input type=fileのファイル選択ボックスをスタイルしてクロスブラウザで動作させるのはそれなりに大変そうなのですが、そのサンプルが公開されています。 綺麗にデザインされたサイトなのに、ファイルの部分だけ「参照」ってなってて普通のボタンだとかっこ悪いかもという場合にこのサンプルが使えそうです。 実際にスタイルされたボックスは以下。 ファイル名が入る部分も角丸になっていて、ボタンもなかなかクールに仕上がっています。 一応ですが覚えておくとよさそうなテクニックですね。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」 CSSでデザインされたテーブルレスでクールなフォームサンプル クリー
CSSをPHPでパース出来て解析などに役立つライブラリ「CSS parser」:phpspot開発日誌
PHP Classes - Class: CSS parser CSSをPHPでパース出来て解析などに役立つライブラリ「CSS parser」。 次のようにPHPプログラムからCSSをパースしてプロパティを参照できます。 クラスライブラリの形になっているので利用も容易ですね。 <?php include("cssparser.php"); $css = new cssparser(); $css->ParseStr("b {font-weight: bold; color: #777777;} b.test{text-decoration: underline;}"); echo $css->Get("b","color"); // returns #777777 echo $css->Get("b.test","color");// returns #777777 echo $c
サイト高速化のためのCSSスプライトをブラウザ上で簡単作成できる「Sprite Creator」:phpspot開発日誌
サイト高速化のためのCSSスプライトをブラウザ上で簡単作成できる「Sprite Creator」 2009年04月10日- Sprite Creator 1.0 サイト高速化のためのCSSスプライトをブラウザ上で簡単作成できる「Sprite Creator」。 画像１枚をCSSで分割することで、読み込む画像を１個にしてサイト表示を高速化できるCSSスプライトですが、実装は結構面倒ですね。 Splite Creatorを使えば、画像をアップロード→アップロードした画像上でドラッグ＆ドロップ→個別画像に分けるというのをブラウザ上でやってしまえます。 サイトの高速化を試しにやってみたいという方は試してみるとよさそうですね。 関連エントリ 複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
Supersized 2.0 Released – Now with Transitions & Controls « Build Internet
This is an outdated version! Supersized has been moved and updated to a more permanent home at the official Supersized project page. Check there for the latest release notes and features! Features of Supersized 2.0 – The Exciting Sequel Since the release of the original Supersized back in February, I have had a fair amount of time to gather feedback, read comments, and plan out what version two wo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過背景の角丸ブロックを作成するＣＳＳサンプル:phpspot開発日誌
アマナ
