[CSS]リンクの情報を補う、「content」プロパティのスタイリング集
Post on:2010年7月7日
sponsors
「content」プロパティを使用して、リンクの情報を補うツールチップやポップアウトを実装するチュートリアルを紹介します。
「content」プロパティの対応ブラウザは合わせて使用する疑似要素の「:after/:before」にも対応したFirefox3.x, Safari3.x, Chrome3.x, Opera10+, IE8+となります。
訪問済みのリンクに印をつける
訪問済みのリンクにチェックマークをつけます。
CSS
チェックマークの「\2713」は好みのマークに変更してください。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> a:visited:before { content:"\2713"; } </textarea> |
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <a href="http://google.com/">Goolge</a> </textarea> |
リンクにテキスト情報を付加する
title属性内のテキストをリンクに付加します。
CSS
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> a:before { content: attr(title) ": "; } </textarea> |
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <a title="Serch Engine" href="http://google.com/">Goolge</a> </textarea> |
CSS3ツールチップ
title属性内のテキストを表示するCSS3を併用したツールチップです。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<textarea name="code" class="css" cols="60" rows="5"> a { color: #900; text-decoration: none; } a:hover { color: red; position: relative; } a[title]:hover:after { content: attr(title); padding: 4px 8px; color: #333; position: absolute; left: 0; top: 100%; white-space: nowrap; z-index: 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; -webkit-box-shadow: 0px 0px 4px #222; box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); } </textarea> |
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <a href="http://css-tricks.com" title="A Web Design Community">CSS-Tricks</a> </textarea> |
ブラウザの機能としてtitle属性内のテキストをツールチップとして表示することに注意してください。
横にスライドするポップアウト
マウスホバーで、メールアドレスが横にポップアウトします。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<textarea name="code" class="css" cols="60" rows="5"> pouts { width: 200px; list-style: none; position: relative; margin: 0 0 50px 0; } #popouts a { display: block; background: white; position: relative; color: white; text-decoration: none; padding: 20px; -webkit-transition: all 0.1s ease-out; } #popouts a:hover { left: -5px; } #popouts li:nth-child(1) a { background: hsla(185,20%,40%,1); } #popouts li:nth-child(2) a { background: hsla(185,20%,45%,1); } #popouts li:nth-child(3) a { background: hsla(185,20%,50%,1); } #popouts a:hover:after { content: " Email \21D2 " " " attr(data-email); background: transparent; position: absolute; left: 100%; top: 15px; vertical-align: middle; padding: 5px; background: hsla(185,20%,30%,1); white-space: nowrap; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; font-size: 12px; } </textarea> |
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="popouts"> <li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li> <li><a data-email="isuredo@likeher.com" href="mailto:isuredo@likeher.com">Elisabeth Moss</a></li> <li><a data-email="marry@me.com" href="mailto:marry@me.com">Amanda Righetti</a></li> </ul> </textarea> |
印刷時にリンクを表示
印刷時にhref内のデータを表示します。
CSS
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> @media print { a[href]:after { " (" attr(href) ") "; } } </textarea> |
sponsors
