[CSS]画像を使用しないで、紙テープを折り返したようにするスタイルシート
Post on:2010年5月18日
sponsors
画像を使用しないで、紙テープを折り返したようなエフェクトを実装するスタイルシートをNettuts+から紹介します。
Quick Tip: Practical CSS Shapes
デモページ
ブログの見出しなどによく使用されるデザインで、一般的には画像を使用して実装することが多いですが、CSSで簡単に実装できます。
CSSにはCSS3を使用しており、ブラウザごとに表示が異なりますが、IE7でもそれなりの表示に対応しています。
Firefox 3.6でのキャプチャ
Chromeでのキャプチャ
IE7でのキャプチャ
実装方法
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Shapes</title> <!--[if IE]> <style> .arrow { top: 100%; } </style> <![endif]--> </head> <body> <div id="container"> <h1> My Heading <span class="arrow"></span> </h1> </div> </body> </html> </textarea> |
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 |
<textarea name="code" class="css" cols="60" rows="5"> #container { background: #666; margin: auto; width: 500px; height: 700px; padding-top: 30px; font-family: helvetica, arial, sans-serif; } h1 { background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); padding: 10px 20px; margin-left: -20px; margin-top: 0; position: relative; width: 70%; -moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929; color: #454545; text-shadow: 0 1px 0 white; } .arrow { width: 0; height: 0; line-height: 0; border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; top: 104%; left: 0; position: absolute; } </textarea> |
sponsors
