2011年7月27日水曜日

CSS3で吹き出し風のリンクボタン

いろいろ実装方法はありますがせっかくなんでCSS3の回転(rotate)を使って吹き出し風のリンクを作ってみました。
吹き出し風のリンクを作る場合は回転より:beforeや:afterの擬似要素の方が重要になると思います。
(回転をしなくても吹き出し風のリンクをつくることもできます)

サンプルは2種類つくっています。
上段は回転(IEでは見れません)、下段は線(IEでも見れます)で装飾しています。

CSS3で吹出し風のリンク - jsdo.it - share JavaScript, HTML5 and CSS


【擬似要素・擬似クラス】
:link
未訪問のリンク先へのアンカー
:visited
訪問済のリンク先へのアンカー
:hover
該当の要素にカーソルがある状態
:active
該当の要素を指定した状態
:focus
該当の要素にフォーカスがある状態
:before
該当の要素の直前を対象とする要素
:after
該当の要素の直後を対象とする要素

0 件のコメント:

コメントを投稿