[CSS]リンクの情報をサポートするスタイルシートのテクニック集

ファイルタイプごとにアイコンを変更したり、外部リンク・訪問済みリンクのスタイリングなど、リンクの情報をサポートするスタイルシートのテクニックをDesigner Dairy Newsから紹介します。

8 CSS tips for better linking

デモのキャプチャ

Add File Type Icons next to your links with CSS
リンクしているファイルのタイプごとにアイコンを表示。

デモのキャプチャ

Using CSS 3 selectors to apply link icons
リンク先の言語ごとにアイコンを表示。

デモのキャプチャ

Highlight Microformats with CSS
マイクロフォーマットの箇所をハイライト表示。

デモのキャプチャ

Simple, accessible external links
CSSオフ時にも配慮した、外部リンクの表記。

デモのキャプチャ

Easy CSS Tooltip
スクリプト無しで、スタイルシートで実装するツールチップ。

デモのキャプチャ

The ways to style visited links
訪問済みのリンクをスタイリング。

デモのキャプチャ

Optimize Your Links For Print Using CSS — Show The URL
印刷時にリンク先を表示。

デモのキャプチャ

CSS image replacement for submit buttons
buttonを画像に置換。

sponsors

top of page

©2018 coliss