リンクをデザインする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

デザインblogランキング

コメント 5 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



5 Responses to “リンクをデザインするCSSいろいろ”

  1. links for 2008-11-23 | memoMania Says:

    […] リンクをデザインするCSSいろいろ – DesignWalker (tags: css link リンクタグ) […]

  2. debeso » Blog Archive » Array Says:

    […] リンクをデザインするCSSいろいろ – DesignWalker CSSでリンクデザイン 疑似クラスを有効に使っていて面白い! […]

  3. Daily Summary 2008-11-25 - mskari.org Says:

    […] リンクをデザインするCSSいろいろ – DesignWalker[Webデザイン,CSSXHTML] […]

  4. 碌でもないハッカーの犯罪者予備軍判定テスト | メシウマ状態 飯の旨いおかずがてんこ盛り Says:

    […] リンクをデザインするCSSいろいろ – DesignWalker タイトルのとおり。色々ありますな。 […]

  5. CSSハックマニア その1 | Nutspress Says:

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

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ