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

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

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

  • >>背景の採色・模様 (3) - ドット柄 背景の装飾

    背景の採色・模様


    ※ ドット柄の背景パターンです。

    [ 閉じる ]

    htmlソース

    <p class="background-ex6"> <span>背景の採色・模様</span> </p>

    CSS

    .background-ex6{ background-color: #999; background-image: radial-gradient(#ccc 1px, transparent 1px); background-size: 10px 10px; color: #fff; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; } .background-ex6 span{ padding-left: 10px; }


  • >>アンダーラインをアニメーションで表示 ロールオーバー

    サンプルテキスト


    ※ マウスオーバー時にアンダーラインをアニメーションで表示する。 変則的にセンターから左右に広がるように。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex4"> <a href="#">サンプルテキスト</a> </p>

    CSS

    .hover-ex4 a { display: block; width: 160px; position: relative; color: #333; line-height: 1.5; font-size: 20px; font-weight: normal; text-decoration: none; } .hover-ex4 a::before, .hover-ex4 a::after { border-bottom: solid 2px #333; bottom: 0; content: ""; display: block; position: absolute; transition: all 0.3s ease 0s; width: 0%; } .hover-ex4 a::before { left: 50%; } .hover-ex4 a::after { right: 50%; } .hover-ex4 a:hover::before, .hover-ex4 a:hover::after { width: 50%; }


  • >>背景の採色・模様 (4) - 水玉柄 背景の装飾

    背景の採色・模様


    ※ 水玉模様の背景パターンです。

    [ 閉じる ]

    htmlソース

    <p class="background-ex7"> <span>背景の採色・模様</span> </p>

    CSS

    .background-ex7{ background-image: radial-gradient(lightblue 4px, transparent 4px); background-size: calc(20 * 1px) calc(20 * 1px); color: #333; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; border: 1px solid #aaa; } .background-ex7 span{ padding-left: 10px; }


  • >>背景の採色・模様 (4-2) - 水玉柄 背景の装飾

    背景の採色・模様


    ※ 水玉柄(2)の背景パターンです。

    [ 閉じる ]

    htmlソース

    <p class="background-ex11"> <span>背景の採色・模様</span> </p>

    CSS

    .background-ex11{ background-image : radial-gradient(lightblue 20%, transparent 33%), radial-gradient(lightblue 20%, transparent 33%); background-position: 0 0, 15px 15px; background-size : 30px 30px; color: #333; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; border: 1px solid #aaa; } .background-ex11 span{ padding-left: 10px; }


  • >>文字の枠をボタン押下風エフェクト ロールオーバー

    サンプルテキスト


    ※ マウスオーバーでボタンを押したかのようにエフェクトする。 outline と borderによりアニメーション行うことで実現しています。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex2"> <a href="#">サンプルテキスト</a> </p>

    CSS

    .hover-ex2{ font-size: 20px; font-weight: normal; height: 32px !important; width: 200px !important; display: flex; align-items: center; } .hover-ex2 a{ display: block; width: 100%; height: 100%; padding: 8px 20px 8px 20px; background-color: #efefef; color: #333; text-decoration-line: none; line-height: 1.6; border-bottom: solid 3px #666; outline: solid 1px #666; transition: all .2s; } .hover-ex2 a:hover{ /* color: #fff; */ border-bottom: solid 1px #efefef; /* background-color: #bbb; */ transform: translateY(3px); }


  • >>背景の採色・模様 (5) - 格子柄 背景の装飾

    背景の採色・模様


    ※ 格子柄の背景パターンです。

    [ 閉じる ]

    htmlソース

    <p class="background-ex8"> <span>背景の採色・模様 </span> </p>

    CSS

    .background-ex8{ background-image: linear-gradient(#ccc 1px, transparent 1px),linear-gradient(to right, #ccc 1px, transparent 1px); background-size: 8px 8px; border: solid #aaa 2px; color: blue; font-size: 20px !important; font-weight: bold; height: 56px; width: 100%; padding: 0 !important; display: flex; align-items: center; } .background-ex8 span{ padding-left: 10px; }


  • >>文字にマウスオーバーでフォーカスエフェクト ロールオーバー

    サンプルテキスト


    ※ フォーカスを示す枠をセンス良く表示する。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex9"> <a href="#">サンプルテキスト</a> </p>

    CSS

    .hover-ex9{ height: 32px !important; /* 本システムCSSの干渉を変更します */ width: 200px !important; /* 本システムCSSの干渉を変更します */ display: flex; align-items: center; } .hover-ex9 a{ display: block; width: 100%; height: 100%; padding: 8px 20px 8px 20px; background-color: #fff; color: #333; text-decoration-line: none; line-height: 1.6; outline: solid 1px transparent; outline-offset: -18px; transition: all .6s; } .hover-ex9 a:hover{ color: #666; background-color: cornsilk; outline: solid 1px #666; outline-offset: 0px; }


  • >>文字の背景と文字色の変更(アニメーション)(1) ロールオーバー

    サンプルテキスト


    ※ マウスオーバーで文字色と背景色を変更しますが、アニメーションですこし ゆっくりとした変化となります。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex3"> <a href="#">サンプルテキスト</a> </p>

    CSS

    .hover-ex3{ height: 32px !important; /* 本システムCSSの干渉を変更します */ width: 200px !important; /* 本システムCSSの干渉を変更します */ display: flex; align-items: center; } .hover-ex3 a{ display: block; width: 100%; height: 100%; padding: 8px 20px; background-color: #efefef; color: #333; font-size: 20px; font-weight: normal; text-decoration-line: none; line-height: 1.6; transition: all .6s; } .hover-ex3 a:hover{ color: #fff; background-color: blue; }


  • >>文字の背景のエフェクト(アニメーション)(2) ロールオーバー

    サンプルテキスト


    ※ マウスオーバーのエフェクトをCSSで実現します。
    外枠が放射状に広がり消えます。 CSSのoutlineで処理しています。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex8"> <a href="#">サンプルテキスト</a> </p>

    CSS

    .hover-ex8{ height: 32px !important; /* 本システムCSSの干渉を変更します */ width: 200px !important; /* 本システムCSSの干渉を変更します */ display: flex; align-items: center; } .hover-ex8 a{ display: block; width: 100%; height: 100%; padding: 8px 20px 8px 20px; background-color: darkcyan; color: #fff; font-size: 20px; font-weight: normal; text-decoration-line: none; line-height: 1.6; outline: 2px solid darkcyan; } .hover-ex8 a:hover{ outline-color: transparent; outline-offset: 12px; transition: all 0.6s; }


  • >>マウスオーバーで吹き出しを表示する ロールオーバー

    サンプルテキスト 説明のふきだしが表示されます。


    ※ マウスをかざすと説明や注意などの吹き出しを表示させる。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex10"> <a href="#">サンプルテキスト</a> <span class="fukidashi">説明のふきだしが表示されます。</span> </p>

    CSS

    .hover-ex10{ height: 32px !important; /* 本システムCSSの干渉を変更します */ width: 200px !important; /* 本システムCSSの干渉を変更します */ position: relative; display: flex; align-items: center; } .hover-ex10 a { display: block; width: 100%; height: 100%; padding: 8px 20px 8px 20px; background-color: #efefef; color: #333; font-size: 20px; font-weight: normal; text-decoration-line: none; line-height: 1.6; } .fukidashi { display: none; position: absolute; padding: 16px; border-radius: 8px; background: #333; color: #fff; font-size: 16px !important; top: 70px; font-size: 0.7em; } .fukidashi:after { position: absolute; bottom: 100%; left: 50%; border: solid transparent; border-color: rgba(0, 0, 0, 0); border-bottom-color: #333; border-width: 10px; pointer-events: none; content: ' '; } .hover-ex10 a:hover + span.fukidashi { display: block; transition: all 0.5s ease-in-out; }