niwadesign

ホームページ制作のネタ発信

小ネタ

CSS 背景画像(画像置換)を使わないロールオーバー

投稿日:2008/4/11 金曜日 更新日:

CSS 背景画像(画像置換)を使わないロールオーバー

前々から画像置換を使ったボタンってどうなの!?って思っていました。
そこでjavascriptを使わずにロールオーバーする方法のご紹介。

サンプルはこちら

-小ネタ
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSS Firefoxのリンクの線を消す方法

CSSにて背景画像(画像置換)をしてリンクを付けている場合、Firefoxで閲覧するとはみ出てアウトラインが表示されてしまいます。 そこでこのアウトラインを表示させない方法のご紹介。 a { outl …

パーセント(%)指定したボックスにボーダーを指定する方法

最近はスマホサイトの制作も増え、ボックスの幅をパーセント(%)指定することが増えてきました。 その際にボックスにボーダーを追加するとボーダー分幅が広くなりカラム落ちすることがあります。 そんな時は、ボ …

CSS リストを使わなくても簡単にリスト風になるtext-indent

ちょっとした時などに、わざわざ新しくCSSを定義しなくてもリスト風のスタイルがtext-indentでできます。 サンプルはこちら

CSS PDFなどのアイコンを自動で表示する裏技

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。 とっても便利なのでゼヒ使ってみましょう。 ※IE6では表示されないのでj …

CSS javascriptを使わずmin-heightをIEで使えるようにするCSS

今はjavascriptでやるのが主流? とりあえず今回はCSSで対応しました。 div { min-height: 100px; height:auto !important; height: 10 …