リンクをデザインするCSSいろいろ

今回は、CSSを使ってリンクをデザインする方法をいくつかまとめてみました。 基本的なものから、Scriptを使ってアニメーションする方法までリンクだけでもいろいろな見せ方がありますね。

Why and How: Styling Text Links

まずは、CSSで簡単に変更できるパターンをご紹介。

Why and How: Styling Text Links

The ways to style visited links

こちらは、訪問済み(visited)リンクの見せ方がいろいろと紹介されています。

The ways to style visited links

残念ながら、IEではサポートされていませんが、:beforeや:afterなんかを使ったら面白い効果が出せそうですね。


a:visited:hover:after {
	content: " (hey! you've already been there!)";
	color: #f00;
}

Scrollovers – A New Way of Linking

こちらは、JavaScriptを使ったリンクの見せ方です。テキストにマウスがオーバーすると、上から違う色のテキストがスクロールして入れ替わります。

Scrollovers - A New Way of Linking

Showing Hyperlink Cues with CSS

少し前の記事で紹介されていますが、CSSに以下のように設定すると、pdfファイルにリンクすると、pdfのアイコンがテキストの横に表示されます。同様に様々な拡張子や、クラスなどの設定に対応しています。


a[href $='.pdf'] {
	padding-right: 18px;
	background: transparent url(icon_pdf.gif) no-repeat center right;
}

Showing Hyperlink Cues with CSS

Iconize Textlinks with CSS

こちらも、上記の『Showing Hyperlink Cues with CSS』と同様の方法です。アイコンもまとめてダウンロードできます。

Iconize Textlinks with CSS

4 Uber Cool Css Techniques For Links

CSSを使ってTooltipを表示する方法や、イメージギャラリー、3DっぽいボタンをCSSで表現する方法などが紹介されています。

4 Uber Cool Css Techniques For Links

Removing the Dotted Hyperlink Borders

リンクをクリックしたときに表示されるボーダーをCSSを使って消す方法が紹介されています。

Removing the Dotted Hyperlink Borders

Liquid & Color Adjustable CSS Buttons

透過PNGとbackground-colorを使って、ボタンを作る方法です。

Liquid & Color Adjustable CSS Buttons

Top 10 CSS buttons tutorial list

CSSを使って、きれいなボタンを作る方法がまとめられています。

Top 10 CSS buttons tutorial list

Using CSS and GIF’s to animate a menu

:hoverにアニメーションGIFを設定すれば、アニメーションメニューが作れます。

Using CSS and GIF’s to animate a menu

Experimental Css design: Animated Menu

こちらもアニメーションメニューです。

Experimental Css design: Animated Menu

関連記事

5件のコメント

コメントを残す

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