CSS3・html5でのテキスト・見出しの装飾サンプル

ここで紹介するソースコードはご自由に利用いただけるものですが、アイコンなど一部にMITライセンスのものがありますので そのソースについては適切に著作権表示を行っています。 詳しくは著作権についてをご覧ください。
(注意)IE11には対応していません。

カテゴリ別に表示出来ます

  • >>テキストを変形する(4) - 長体 テキストに装飾

    サンプルテキスト ABCDEFG


    ※ テキストに長体をかけます。

    [ 閉じる ]

    htmlソース

    <p class="text-ex16"> サンプルテキスト ABCDEFG </p>

    CSS

    .text-ex16{ transform: scale(1.0, 1.6); /* フォントに長体をかけます */ font-size: 20px !important; /* 強制的にフォントを大きくします */ margin: 10px 0 !important; font-weight: normal; padding: 1rem !important; }


  • >>テキストを変形する(5) - 平体 テキストに装飾

    サンプルテキスト ABCDEFG


    ※ テキストに平体をかけます。

    [ 閉じる ]

    htmlソース

    <p class="text-ex17"> サンプルテキスト ABCDEFG </p>

    CSS

    .text-ex17{ transform: scale(1.0, 0.6); /* フォントに平体をかけます */ font-size: 30px !important; /* 強制的にフォントを大きくします */ }


  • >>テキスト文字に色を付ける テキストに装飾

    サンプルテキスト ABCDEFG


    ※ テキスト文字に淡色ではない色を付けます。

    [ 閉じる ]

    htmlソース

    <p class="text-ex18"> サンプルテキスト ABCDEFG </p>

    CSS

    .text-ex18{ color: transparent; /* 透明を指定 */ background: linear-gradient(to right, red 0%, yellow 100%); /* グラデーション指定 */ background-clip: text; /* 要素の背景をtext で切り抜く */ width: 55% !important; /* グラデーションを文字全体にかけるため幅を調節します */ font-size: 30px !important; /* 強制的にフォントを大きくします */ }


  • >>テキストに蛍光ペン風マーキング テキストに装飾

    サンプルテキスト ABCDEFG あいうえおかきくけこ


    ※ テキストに蛍光ペンでマークしたような効果の装飾をします。

    [ 閉じる ]

    htmlソース

    <p class="text-ex19"> サンプルテキスト <em>ABCDEFG</em> あいうえおかきくけこ </p>

    CSS

    .text-ex19{ line-height: 1; font-size: 20px !important; /* 強制的にフォントを大きくします */ padding: 1rem; } .text-ex19 em { background: linear-gradient(transparent 30%, yellow 60%); /* マーキングする */ }