HTML/CSS

[CSS3/HTML5]ページタイトルとかに使えそうな3Dっぽいテキストエフェクト

Code Padよりタイトルとかに使えそうなテキストエフェクト。それほどゴテゴテしてなくていい感じ。

[CSS3]写真の上のbox-shadow 半透明サンプル

写真の上に文字を載せたい時に使いそうなbox-shadowと半透明のサンプル

[HTML5/CSS3]ChromとFirefoxのdisplay: box;レンダリングの違い

Firefoxのdisplay: box;はいろいろと問題があるみたいなんだけど、 並べられる要素にoverflow: hidden;を設定して中の要素にdisplay: box;を設定するとdisplay: box;が設定された要素の高さが無視されるって違いもあった。

[CSS3]text-shadowを使うなら::selectionも設定しよう。

僕は長文だったり難解な場合、文章を選択状態にすることが多いのですが、 text-shadowが使われてると読みにくい場合があります。

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

jQuery fade() と pngbehavior.htc

jQueryのfadeOut()、fadeIn()をpngbehavior.htcが適用されてるページで 利用するとfadeが効かない模様(ie6)。ここのサンプルでは、全然動きませんが フェード効果が効かないってだけの場合もあった。

GDを利用してテキストを画像に変換

テキストをimgに変換するにはGDライブラリを利用すれば できるようなのでちょいと試してみました。

サイトにステッカーを貼る

「ステッカーっぽいのを貼ってみる」にて紹介されていたステッカーを貼ってみる。

Divの高さを揃える方法 (css版)

先日Javascriptでカラムの高さを揃えるというエントリーをしたのだが[CSS]高さの異なるカラムを揃えるスタイルシートでCSSで高さを揃える方法が紹介されている。

CSSハック：clearfix

CSSによるレイアウトをおこなった場合、floatを利用することはスタンダードな手段だ。ところが親コンテナの中で子コンテナをfloatしてやると親コンテナの高さがおかしなことになる。

HTMLコメントアウトタグの罠

コメントアウト<!-- --> を利用してて途中に「--」が入ってるとブラウザが解釈を間違えることがある。

Firefoxで縦スクロールバーを常に表示

Firefoxでは縦スクロールバーが必要な時しか表示されない。

そのため縦スクロールを要するページでセンタリングをしていると、「スクロールあり」と「スクロール無し」ページの移動の際にズレが生じる。