[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
Post on:2010年10月26日
sponsors
コピー&ペーストで使える、テキスト周りをかっこよくするCSS3の7つのエフェクトを紹介します。
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste
[ad#ad-2]
対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。
- Letterpress（レタープレス）
- Small Caps（スモールキャピタル）
- CSS Coupon（クーポン券）
- Stitched（ステッチ）
- Gloss（グロス）
- Stroked Text & @font-face（@font-faceを使ったストローク）
- Double Stroked Text（二重のストローク）
Letterpress（レタープレス）
レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-shadow。
ポイントは、テキストのカラーは背景より暗くすることです。そして影を明るくすることでより浮き彫りにされた見栄えになります。
HTML
<div id="container"> <p>pressed</p> </div>
CSS
body {
background: #222222;
color: #131313;
font-size: 200px;
}
#container p {
font-family: Bodoni serif;
text-align: center;
text-transform: uppercase;
text-shadow: #2c2c2c 3px 3px 5px;
}
Small Caps（スモールキャピタル）
スモールキャピタルのエフェクトはあまり見かけませんが、シンプルで素敵なエフェクトです。これは「font-variant: small-caps;」を適用するだけで簡単に実装できます。
デモではレタープレスのエフェクトも併用しています。
HTML
<div id="container"> <p>Small Caps</p> </div>
CSS
body {
background: #2c2b2b;
color: #131313;
font-size: 200px;
}
#container p {
font-family: Bodoni serif;
text-align: center;
text-transform: uppercase;
text-shadow: #363535 3px 3px 5px;
font-variant: small-caps;
}
CSS Coupon（クーポン券）
オンラインクーポンなどに見られるクーポン券のようなデザインを適用しました。CSS3の角丸とボックスシャドウを使い、borderにdashed を使用しています。
HTML
<div id="container"> <h2>$10 Off</h2> </div>
CSS
body {
background: #21303b;
color: #000;
}
h2 {
font-size: 80px;
line-height: 70px;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
#container {
background-color: white;
height: 200px;
width: 400px;
margin: 100px auto;
border: 3px dashed #21303b;
/*shadow*/
-webkit-box-shadow: 10px 10px 10px #000;
-moz-box-shadow: 10px 10px 10px #000;
box-shadow: 10px 10px 10px #000;
/*rounded corners*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Stitched（ステッチ）
ボックスに縫い目のようなステッチを与えたエフェクトです。このステッチはborderではなく、outlineを使用しています。outline-offsetにマイナスの値を指定し、内側に配置しています。
[ad#ad-2]
HTML
<div id="container"> <h2>Stitched</h2> </div>
CSS
body {
background: #21303b;
color: #fff;
}
h2 {
font-size: 70px;
line-height: 190px;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-align: center;
}
#container {
/*stitching*/
outline: 1px dashed #98abb9;
outline-offset: -5px;
background-color: #556068;
height: 200px;
width: 400px;
margin: 100px auto;
/*shadow*/
-webkit-box-shadow: 2px 2px 2px #000;
-moz-box-shadow: 2px 2px 2px #000;
box-shadow: 2px 2px 2px #000;
}
Gloss（グロス）
Web2.0のトレンドとして人気が高く、また使用されすぎた感のあるグロスのエフェクトです。CSS3を使用すると、画像無しでも簡単に実装ができます。
CSS3グラデーションを記述するのは難しいので、オンラインジェネレーター（Ultimate CSS Gradient Generator）を利用するとよいでしょう。
HTML
<div id="container"> <h2>Gloss</h2> </div>
CSS
body {
background: #21303b;
color: #fff;
}
h2 {
font-size: 120px;
line-height: 190px;
font-family: Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: rgba(0, 0, 0, .3) 5px 5px 5px;
}
#container {
/*gradient*/
background: #666666; /* old browsers */
background: -moz-linear-gradient(top, #666666 4%, #545454 50%, #3A3A3A 51%, #131313 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#666666), color-stop(50%,#545454), color-stop(51%,#3A3A3A), color-stop(100%,#131313)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#131313',GradientType=0 ); /* ie */
/*box styles*/
height: 200px;
width: 400px;
margin: 100px auto;
/*shadow*/
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
/*corners*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
Stroked Text & @font-face（@font-faceを使ったストローク）
ここでは2つのトリックを使用しています、一つは@font-face、もう一つはストローク。フォントには「JungleFever」の「@font-face Kit」を使用しています。
HTML
<div id="container"> <h2>Jurassic</h2> </div>
CSS
/*Fonts*/
@font-face {
font-family: 'JungleFeverRegular';
src: url('JungleFever-webfont.eot');
src: local('☺'), url('JungleFever-webfont.woff') format('woff'), url('JungleFever-webfont.ttf') format('truetype'), url('JungleFever-webfont.svg#webfontBlD2f3Gz') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #222;
color: #111;
}
h2 {
font-size: 150px;
line-height: 200px;
font-family: 'JungleFeverRegular', Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: rgba(0, 0, 0, .2) 3px 3px 3px;
/*text stroke*/
-webkit-text-stroke: 2px #fff473;
}
Double Stroked Text（二重のストローク）
前述のストロークを作成している時に、この二重のストロークをひらめきました。ストロークに指定したRGBaより不透明度をあげて指定します。
HTML
<div id="container"> <h2>Lobster</h2> </div>
CSS
/*Fonts*/
@font-face {
font-family: 'Lobster13Regular';
src: url('Lobster_1.3-webfont.eot');
src: local('☺'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #731e1e;
color: #fff;
}
h2 {
font-size: 220px;
line-height: 220px;
font-family: 'Lobster13Regular', Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: rgba(0, 0, 0, .2) 3px 3px 3px;
/*text stroke*/
-webkit-text-stroke: 4px rgba(0, 0, 0, .6);
}
sponsors
