CSSマジックを使用すると、ほとんどの場合、美しい活版印刷効果を作成し、画像の使用を忘れることができます。 この記事では、jQueryプラグイン（lettering.js）とさまざまなCSSトリックを使用して、Webタイポグラフィーの一連の素晴らしい例を作成します。 いくつかの例では、ホバートランジションを追加して、それらをもう少しインタラクティブにします。
注：サンプルは、対応するCSSプロパティをサポートするブラウザーでのみ機能します。
また、記事のコード例にはブラウザーのプレフィックスを含めませんが、ソースで見つけることができます。 ほとんどの場合、lettering.jsプラグインを使用します。
それでは、例に移りましょう。全部で8つあります。
例1
最初の例のアイデアは、単語にカーソルを合わせると、単語を分割またはカットし、同時に非表示の2番目の単語を表示することです。 これを行うには、次のhtmlマークアップが必要です。
<h2 class="cs-text"> <span class="cs-text-cut"></span> <span class="cs-text-mid"></span> <span class="cs-text-cut"></span> </h2>
最初に表示される単語が複製されます。 （これらの例はすべて装飾を目的としています）。
単語にはlettering.jsプラグインを使用します。つまり、 最初と最後の単語の周りに別のspanタグがあります（重複）：
$(".cs-text-cut").lettering('words');
それでは、スタイルを見てみましょう。 まず、テキストを使用してブロックの固定幅を設定します。
.cs-text { width: 645px; margin: 120px auto 30px; cursor: default; }
第1レベルのスパンタグはブロック要素として表示されます。
.cs-text > span { display: block; }
クラス「.cs-text-cut」の2つのスパンの高さは90pxであり、overflow：hiddenを設定します。 アイデアは、このスパンの高さが実際の高さの半分であるため、テキストを半分に切ります。 これらの要素の遷移も追加します。
.cs-text-cut { width: 100%; height: 90px; overflow: hidden; transition: all 0.4s ease-in-out; }
次に、上下に境界線を追加します。
.cs-text-cut:first-child { border-top: 1px solid rgba(255,255,255,0.5); } .cs-text-cut:last-child { border-bottom: 1px solid rgba(255,255,255,0.5); }
次に、内部スパンタグのフォントサイズと行の高さを180px（親の高さのちょうど2倍）に設定し、テキストのスタイルもいくつか追加します。
.cs-text-cut span { display: block; line-height: 180px; color: rgba(255,255,255,1); font-size: 180px; font-weight: 400; text-transform: uppercase; text-align: center; margin-top: 6px; font-family: 'Sancreek', cursive; text-shadow: 7px 2px 0 rgba(255,255,255,0.3); }
構造の最後の子である2番目の重複語は、少し「発生」します。 したがって、単語の下部のみが表示されます。
.cs-text-cut:last-child span { margin-top: -84px; }
マウスの上にカーソルを置いたときに表示する中央のテキストは絶対に配置され、その透明度は0に設定されます。また、半分になります。
.cs-text-mid { font-family: 'Raleway', sans-serif; font-weight: 100; text-transform: uppercase; font-size: 50px; letter-spacing: 50px; line-height: 50px; text-indent: 20px; position: absolute; top: 50%; margin-top: -25px; color: rgba(255,255,255,0.3); text-shadow: 0 0 0 rgba(255,255,255,0.9); opacity: 0; transform: scale(0.5); transition: all 0.4s ease-in-out 0s; }
単語にカーソルを合わせると、上半分が上に移動するので、Y軸に沿って移動し、透明度を下げます。
.cs-text:hover .cs-text-cut:first-child { transform: translateY(-25px); opacity: 0.5; }
下半分が下に移動します。
.cs-text:hover .cs-text-cut:last-child { transform: translateY(25px); opacity: 0.5; }
そして最後に、中央のテキストの透明度を変更し、増加させます。 0.3秒の遅延で遷移を追加したことに注意してください。 これにより、最初に元の単語の半分を上下に移動する時間ができます。
.cs-text:hover .cs-text-mid { transition-delay: 0.3s; opacity: 1; transform: scale(1); }
最初の例でこれで終わりです。 2番目に進みましょう。
例2
2番目の例では、変換を少し試し、文字で半透明のパネルを作成します。
<h2 class="cs-text" id="cs-text"></h2>
レタリングを使用して、各文字をスパンでラップします。
$("#cs-text").lettering();
次に、メインシェルに固定幅を与え、 Nicolas Gallagherからclearfixハックを追加します。これは、 スパンタグがフローティングになるためです（float：左）。
.cs-text { width: 600px; margin: 70px auto 30px; } /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */ .cs-text:before, .cs-text:after { content: " "; display: table; } .cs-text:after { clear: both; } /* end clearfix hack */
各スパンの左側には折り返しがあり、半透明の背景と広い境界線を作成するbox-shadowプロパティも追加します。 次に、要素を「傾け」（変換：skewY（8deg））、遷移を追加します。
.cs-text span { float: left; width: 120px; font-size: 120px; line-height: 230px; font-weight: 400; text-transform: uppercase; text-align: center; cursor: default; font-family: 'Medula One', cursive; display: block; z-index: 1; position: relative; color: rgba(255,255,255,0.7); text-shadow: 5px 5px 2px rgba(0,0,0,0.5); background: rgba(0,0,0,0.05) url(../images/scratch-texture.png); box-shadow: -6px 2px 10px rgba(0,0,0,0.5), inset 0 0 0 20px rgba(255, 255, 255, 0.4); border-radius: 5px; transform: skewY(8deg); transition: all 0.5s ease-in-out; }
疑似クラスの前に：を使用して、内部シャドウの効果を作成します。 これを行う方法は他にもありますが、少し考えてみましょう:)
.cs-text span:before { content: ''; position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px; box-shadow: 1px 1px 1px rgba(255,255,255,0.4), inset 1px 1px 1px rgba(0,0,0,0.1); }
擬似クラスの後に：を使用して、要素の上部に小さなドットを追加します。
.cs-text span:after { content: ''; position: absolute; left: 50%; top: 5px; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4); background: rgba(255, 255, 255, 0.2); }
そして最後に、マウスにカーソルを合わせると、要素を回転させて少し増やし、影を変更して透明度の値を増やします。
.cs-text span:hover { transform: translateY(-10px) scale(1.1); color: rgba(255,255,255,1); text-shadow: 2px 2px 2px rgba(0,0,0,0.2); }
例3
3番目の例は、textuts.comからPhotoshopでスクラッチタイルを作成するレッスンに完全に基づいています。 そして、CSSを使用してまったく同じ効果を作成しようとします。
<h2 class="cs-text"> : ♥ , , , , .</h2> <h3 class="cs-text"> </h3>
また、lettering.jsを単語と文字に適用します。
$(".cs-text").lettering('words').children('span').lettering()
これにより、「word」という単語で始まるクラスを持つspanタグ内の各単語と、「char」という単語で始まるクラスを持つスパン内の単語内の各文字をラップできます。
テキストを中央揃えしましょう：
.cs-text { text-align: center; margin-top: 70px; }
単語はインラインブロックとして表示され、サイドマージンが与えられます。
.cs-text span[class^="word"] { display: inline-block; margin: 0 15px; }
各シンボルについて、背景色、幅、高さを定義します。 シャドウテキストは埋め込み文字の効果を作成し、いくつかのボックスシャドウシャドウはタイルにボリュームを追加します。
.cs-text span[class^="char"] { width: 90px; height: 100px; display: inline-block; background: #e4d095; color: #2a1f1b; border-radius: 4px; font-size: 60px; font-weight: 400; line-height: 100px; margin: 10px 3px; text-align: center; cursor: default; font-family: "Spinnaker", Arial, sans-serif; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9), 0 -1px 1px rgba(255,255,255,0.2); text-transform: uppercase; box-shadow: 1px 7px 15px rgba(0,0,0,0.8), inset 3px 0 2px rgba(255,255,255,0.4), inset 0 3px 0px rgba(255,255,255,0.5), inset -2px -3px 0px rgba(143,128,82,0.6); }
ここで、少しの「ランダム性」を追加して、奇数と3番目のタイルごとにわずかに回転させます。
.cs-text span[class^="char"]:nth-child(odd) { transform: rotate(2deg); } .cs-text span[class^="char"]:nth-child(3n) { transform: rotate(-3deg); }
5番目の単語と最後の見出しには赤い文字があり、見出しは残りのテキストよりもわずかに小さくなります。
.cs-text > span:nth-child(5) span, h3.cs-text span[class^="char"] { color: #a62a19; } h3.cs-text span[class^="char"] { font-size: 40px; width: 50px; height: 60px; line-height: 60px; }
すべて準備完了です！
例4
4番目の例では、活版印刷効果のある背景としてテキストを使用します。 文字を大きく半透明にし、テキストに影を追加し、文字の一部を「ランダム」に回転させます。
<h2 class="cs-text" id="cs-text"> , . . , , .</h2>
同じlettering.jsを使用して、spanタグで各文字をラップします。
$("#cs-text").lettering();
テキストを中央揃えにして、幅を100％に設定します。
.cs-text { width: 100%; text-align: center; margin-top: 80px; }
文字は半透明になります。このため、透明度が低いRGBAカラーを定義します。 また、大きなオフセットでテキストに影を追加します。
.cs-text span { font-family: 'Cantata One', 'Trebuchet MS', sans-serif; font-size: 180px; line-height: 150px; font-weight: 400; color: rgba(255,255,255,0.3); display: inline-block; text-transform: uppercase; text-shadow: 15px 15px 0 rgba(0,0,0,0.2); cursor: default; pointer-events: none; }
これを背景として使用するため、pointer-events：noneプロパティを追加します。 これにより、マウスでテキストを強調表示することを回避できます。
次に、ランダムに回転して、いくつかの文字を変更しましょう。 これを行うには、n番目の子セレクターを使用します。
.cs-text span:nth-child(2n) { transform: rotate(-6deg); color: rgba(255,255,255,0.4); ; } .cs-text span:nth-child(3n) { transform: translateY(20px); } .cs-text span:nth-child(4n) { color: rgba(255,255,255,0.2); } .cs-text span:nth-child(3n+3) { transform: scale(1.4) rotate(5deg); } .cs-text span:nth-child(7n) { font-size: 110px; } .cs-text span:nth-child(12n) { font-size: 200px; }
それはすべて、非常にシンプルですが印象的なテキスト効果です。
例5
例5では、3D効果を作成します。
<h2 class="cs-text" id="cs-text"></h2>
ここでは、各文字を2つのスパンタグでラップする必要があるため、まずlettering.jsを適用してから、作成したスパンタグをもう1つにラップします。
$("#cs-text").lettering().children('span').wrap('<span>');
メインコンテナの幅/高さとパディングを定義します。
.cs-text { position: relative; width: 960px; height: 100px; margin: 100px auto; cursor: default; }
スパンタグの最初のレイヤーには、パースペクティブプロパティとフロートプロパティがあります。
.cs-text > span { perspective: 200px; float: left; position: relative; }
内部スパンタグを回転および移動するため、コンテナを特定の順序で（中央から端に向かって）配置する必要があります。
.cs-text > span:first-child, .cs-text > span:last-child { z-index: 1; } .cs-text > span:nth-child(2), .cs-text > span:nth-child(7){ z-index: 2; } .cs-text > span:nth-child(3), .cs-text > span:nth-child(6){ z-index: 3; } .cs-text > span:nth-child(4) { z-index: 5; } .cs-text > span:nth-child(5){ z-index: 4; }
内部スパンには、グラデーションと半透明のテクスチャの複数の背景があります。 また、box-shadowを適用して、要素にある程度の深みを与えます。
.cs-text span span { display: block; background: url(../images/scratch-texture.png), linear-gradient(to right, #00b7ea 0%,#009ec3 100%); box-shadow: -1px 0 2px rgba(255,255,255,0.4), -2px 0 0 #00adda, -2px 7px 9px rgba(0, 0, 0, 0.5); color: #fff; text-shadow: -1px -1px 2px rgba(0,0,0,0.6); width: 120px; height: 150px; font-weight: 700; line-height: 150px; font-size: 140px; text-align: center; text-transform: uppercase; }
最後の4文字には、逆グラデーション、ボックスシャドウ、テキストシャドウがあります。
.cs-text > span:nth-child(n+5) span { background: url(../images/scratch-texture.png), linear-gradient(to right, #009ec3 0%,#00b7ea 100%); box-shadow: 1px 0 2px rgba(255,255,255,0.4), 2px 0 0 #00adda, -2px 7px 9px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
次に、Zインデックスによって内部スパンを移動し、それらを回転して目的の効果を作成します。 それぞれに異なる値があるため、セレクターを使用します：nth-child：
.cs-text > span:nth-child(4) span{ transform: translateZ(40px) rotateY(40deg); } .cs-text > span:nth-child(5) span{ transform: translateZ(40px) rotateY(-40deg); } .cs-text > span:nth-child(3) span{ transform: translateZ(30px) rotateY(30deg); } .cs-text > span:nth-child(6) span{ transform: translateZ(30px) rotateY(-30deg); } .cs-text > span:nth-child(2) span{ transform: translateZ(20px) rotateY(20deg); } .cs-text > span:nth-child(7) span{ transform: translateZ(20px) rotateY(-20deg); } .cs-text > span:first-child span{ transform: translateZ(10px) rotateY(10deg); } .cs-text > span:last-child span{ transform: translateZ(10px) rotateY(-10deg); }
また、スパンをx軸に沿って少し移動します。
.cs-text > span:nth-child(-n+4) { transform: translateX(14px); } .cs-text > span:nth-child(n+5) { transform: translateX(-14px); }
完了しました。きちんとした3Dテキストができました！
実施例6
折り紙に触発されてこの例になりました。 各文字に対して、回転して「傾斜」する半透明のスパンがいくつかあります。 マウスオーバーすると、すべての変換が削除されます。
<h2 class="cs-text" id="cs-text"></h2>
各文字をspanタグでラップする必要があり、その前に3つの空のspanタグがあり、これらはすべて別のspanタグでラップされます（そう、脳を壊すことができます）：
$("#cs-text").lettering().children('span').wrap('<span>').parent().prepend('<span></span><span></span><span></span>');
メインコンテナの幅とパディングを追加します。
.cs-text { width: 600px; margin: 70px auto 30px; } /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */ .cs-text:before, .cs-text:after { content: " "; display: table; } .cs-text:after { clear: both; } /* end clearfix hack */
すべてのスパンタグはブロック要素になります。
.cs-text span{ cursor: default; display: block; position: relative; }
スパンの最初のレイヤーの高さと幅は130ピクセルで、いくつかのインデントがあります。
.cs-text > span { float: left; width: 130px; height: 130px; margin: 10px; }
すべての内部スパンには、半透明にするRGBAバックグラウンドがあります。 また、それらの遷移も追加します。
.cs-text span span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255,255,255,0.3); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); transition: all 0.3s ease-in-out; }
最後の子の内部スパンには文字が含まれ、サイズを指定して、テキストに色の影を追加します。 また、微妙な曲がりをシミュレートする背景グラデーションもあります。
.cs-text span span:last-child{ font-size: 70px; line-height: 130px; font-weight: 400; text-transform: uppercase; text-align: center; color: rgba(255,255,255,0.8); font-family: 'Michroma', sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,0.1), -1px -1px 1px rgba(0,0,0,0.1), 5px 5px 0 rgba(216,65,40,0.6), -5px -5px 0 rgba(37,166,164,0.6); background: linear-gradient( 45deg, rgba(249,249,249,0.08) 0%, rgba(234,234,234,0.5) 49%, rgba(255,255,255,0.51) 50%, rgba(244,244,244,0.94) 100% ); }
次に、スパンに任意のねじれと回転を追加します。
.cs-text > span:nth-child(odd) span:first-child { transform: rotate(5deg) skewY(-14deg); } .cs-text > span:nth-child(even) span:first-child { transform: rotate(-35deg) skewY(-5deg); } .cs-text > span:nth-child(odd) span:nth-child(2) { transform: rotate(45deg) skewY(-10deg); } .cs-text > span:nth-child(even) span:nth-child(2) { transform: rotate(27deg) skewY(-12deg); } .cs-text > span:nth-child(odd) span:nth-child(3) { transform: rotate(45deg); } .cs-text > span:nth-child(even) span:nth-child(3) { transform: rotate(30deg); }
ホバリングするとき、ブロックのすべての変換を削除します：
#cs-text > span:hover span { transform: rotate(0deg) skewY(0deg); text-shadow: 1px 1px 0 rgba(216,65,40,0.1), -1px -1px 0 rgba(37,166,164,0.1); }
6番目の例は準備ができています！ この例にはさらに多くのオプションがあります。面白いエフェクトを作成するには、トランスフォームをいじってみてください。
実施例7
この例では、最初にロゴを表示し、マウスにカーソルを合わせると他のすべての文字を表示します。 ここではレタリングプラグインを使用せず、次の構造を作成します。
<h2 class="cs-text"> <span>C</span> <span>o</span> <span>d</span> <span>r</span> <span>o</span> <span>p</span> <span>s</span> <span></span> </h2>
まず、いくつかのテキストプロパティを定義します。
.cs-text { font-size: 50px; text-transform: uppercase; margin: 80px auto 0 auto; width: 580px; height: 100px; padding-left: 20px; font-family: 'McLaren', Arial; font-weight: 400; position: relative; } /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */ .cs-text:before, .cs-text:after { content: " "; display: table; } .cs-text:after { clear: both; } /* end clearfix hack */
スパンタグにはfloat：leftプロパティがあり、それらを丸くします。 トランジションも追加します。
.cs-text span { cursor: default; display: block; float: left; border-radius: 50%; width: 100px; height: 100px; line-height: 100px; text-align: center; margin: 0 0 0 -20px; color: rgba(255,255,255,0.95); text-shadow: 0 -1px 1px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; }
偶数および奇数のスパンタグの場合、異なる背景色があり、それらに微妙なテクスチャを追加します。
.cs-text span:nth-child(odd) { background: rgba(118,176,204, 0.8) url(../images/noise.png); } .cs-text span:nth-child(even) { background: rgba(58,126,162, 0.8) url(../images/noise.png); }
すべてのスパンが中央に移動します。 変換を2回適用します。たとえば、パーセントでの最初の時間は、最初のスパンを3ポジション移動する必要があります。 300％、およびインデントを補正する2番目の変換：
.cs-text span:nth-child(1) { transform: translate(300%) translate(-60px); } .cs-text span:nth-child(2) { transform: translate(200%) translate(-40px); } .cs-text span:nth-child(3) { transform: translate(100%) translate(-20px); } .cs-text span:nth-child(5) { transform: translate(-100%) translate(20px); } .cs-text span:nth-child(6) { transform: translate(-200%) translate(40px); } .cs-text span:nth-child(7) { transform: translate(-300%) translate(60px); }
最後を除くすべてのスパンの透明度は0になります。
.cs-text span:not(:last-child) { opacity: 0; pointer-events: none; }
最後のスパンにはロゴが含まれます。 別の背景を指定して、メインコンテナーの中央に配置します。
.cs-text span:last-child{ position: absolute; top: 0; left: 50%; margin-left: -50px; z-index: 100; background: url(../images/codrops_logo.jpg) no-repeat center center; }
マウスをホバーすると、すべてのスパンが元の位置に戻り、透明度の値が1に増加します。
.cs-text:hover span:not(:last-child){ transform: translate(0%); opacity: 1; }
ロゴがわずかに拡大されて消えます：
.cs-text:hover span:last-child { opacity: 0; transform: scale(1.4); }
例8
最後の例では、テキストにいくつかの影を付けて少しだけ再生します。
<h2 class="cs-text"> </ h2>
再びlettering.jsを使用して、すべての単語をspanタグでラップします。
$(".cs-text").lettering('words');
メインタイトルの幅を追加し、中央に配置します。 また、少し傾けます。
.cs-text { width: 660px; margin: 120px auto 30px; cursor: default; transform: skewY(-12deg); text-align: center; }
スパンタグで要素をブロックし、トップフィールドを追加しましょう。
.cs-text span { display: block; color: #fff; font-weight: 400; text-transform: uppercase; margin-top: 6px; font-family: 'Stint Ultra Expanded', cursive; }
最初の単語のフォントサイズは100ピクセルで、文字間の距離は大きくなります。
.cs-text span:first-child { font-size: 100px; letter-spacing: 96px; text-shadow: 6px 6px 0px rgba(255,255,255,0.3); }
2番目の単語はイタリック体のセリフ体で、暗い色に設定します。
.cs-text span:nth-child(2) { font-family: Georgia, serif; font-weight: 400; text-transform: none; font-style: italic; line-height: 60px; font-size: 67px; color: #392f2c; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); position: relative; }
疑似クラス：beforeおよびafterを使用して、左右に2行を作成します。
.cs-text span:nth-child(2):before, .cs-text span:nth-child(2):after { content: ''; width: 240px; height: 2px; background: #392f2c; position: absolute; top: 50%; margin-top: -1px; box-shadow: 0 1px 0 rgba(255,255,255,0.2); } .cs-text span:nth-child(2):before { left: 0px; } .cs-text span:nth-child(2):after { right: 0px; }
最後の単語には、文字の束の効果を作成するためのテキストの影がいくつかあります。 秘Theは、テキストの色と背景色を入れ替えることです。この場合、背景色は暗褐色です。
.cs-text span:nth-child(3) { font-size: 130px; text-shadow: 2px 2px 0 #645f59, 4px 4px 0 #fff, 6px 6px 0 #645f59, 8px 8px 0 #fff, 10px 10px 0 #645f59, 12px 12px 0 #fff, 14px 14px 0 #645f59, 16px 16px 0 #fff, 18px 18px 0 #645f59, 20px 20px 0 #fff, 22px 22px 0 #645f59, 24px 24px 0 #fff; }
それだけです！ これらの例をお楽しみいただき、お役に立てば幸いです！ いろいろ試してみてください。試してみてください！
デモンストレーション
ソースファイルをダウンロードする