リンクをデザインするCSSいろいろ
今回は、CSSを使ってリンクをデザインする方法をいくつかまとめてみました。
基本的なものから、Scriptを使ってアニメーションする方法までリンクだけでもいろいろな見せ方がありますね。
Why and How: Styling Text Links
まずは、CSSで簡単に変更できるパターンをご紹介。
The ways to style visited links
こちらは、訪問済み(visited)リンクの見せ方がいろいろと紹介されています。
残念ながら、IEではサポートされていませんが、:beforeや:afterなんかを使ったら面白い効果が出せそうですね。
a:visited:hover:after {
content: " (hey! you've already been there!)";
color: #f00;
}
Scrollovers – A New Way of Linking
こちらは、JavaScriptを使ったリンクの見せ方です。テキストにマウスがオーバーすると、上から違う色のテキストがスクロールして入れ替わります。
Showing Hyperlink Cues with CSS
少し前の記事で紹介されていますが、CSSに以下のように設定すると、pdfファイルにリンクすると、pdfのアイコンがテキストの横に表示されます。同様に様々な拡張子や、クラスなどの設定に対応しています。
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Iconize Textlinks with CSS
こちらも、上記の『Showing Hyperlink Cues with CSS』と同様の方法です。アイコンもまとめてダウンロードできます。
4 Uber Cool Css Techniques For Links
CSSを使ってTooltipを表示する方法や、イメージギャラリー、3DっぽいボタンをCSSで表現する方法などが紹介されています。
Removing the Dotted Hyperlink Borders
リンクをクリックしたときに表示されるボーダーをCSSを使って消す方法が紹介されています。
Liquid & Color Adjustable CSS Buttons
透過PNGとbackground-colorを使って、ボタンを作る方法です。
Top 10 CSS buttons tutorial list
CSSを使って、きれいなボタンを作る方法がまとめられています。
Using CSS and GIF’s to animate a menu
:hoverにアニメーションGIFを設定すれば、アニメーションメニューが作れます。
Experimental Css design: Animated Menu
こちらもアニメーションメニューです。
|
|
|
11月 25th, 2008 at 11:07 PM
[...] リンクをデザインするCSSいろいろ – DesignWalker (tags: css link リンクタグ) [...]
11月 25th, 2008 at 11:57 PM
[...] リンクをデザインするCSSいろいろ – DesignWalker CSSでリンクデザイン 疑似クラスを有効に使っていて面白い！ [...]
11月 26th, 2008 at 5:22 AM
[...] リンクをデザインするCSSいろいろ – DesignWalker[Webデザイン,CSSXHTML] [...]
11月 28th, 2008 at 4:33 AM
[...] リンクをデザインするCSSいろいろ – DesignWalker タイトルのとおり。色々ありますな。 [...]
9月 30th, 2009 at 6:29 PM
[...] リンクをデザインするCSSいろいろ [...]