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

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

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

  • >>画像の操作(1) ロールオーバー


    ※ 画像にエフェクトをかけます。 filterプロパティで行います。
    この例では背景画像に対し 透過度を40%にしてモノクロにしています。
    エフェクトはアニメーションで行っています。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex5"> </p>

    CSS

    .hover-ex5 { height: 90px; width: 680px; box-sizing: border-box; background-image: url('/sysdata/images/sample/title_back1.png'); background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .6s; } .hover-ex5:hover{ filter: grayscale(100%) opacity(40%); }


  • >>見出しを四角い枠で囲う 見出しの装飾

    見出しを四角い枠で囲う


    ※ 見出しを四角い枠で囲います。 太さ、色、べた塗りなどいろいろ可能です。

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex7"> 見出しを四角い枠で囲う </h4>

    CSS

    .title-ex7{ padding: 12px 20px !important; /* 本システムCSSの干渉を変更します */ color: #333; border: solid 2px lightgray; color: #333; font-size: 20px !important; font-weight: normal; }


  • >>見出しを四角い2重枠で囲う 見出しの装飾

    見出しを四角い2重枠で囲う


    ※ 2重線を周りに引くのに outlineを利用する。

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex12"> 見出しを四角い2重枠で囲う </h4>

    CSS

    .title-ex12{ padding: 12px 20px !important; /* 本システムCSSの干渉を変更します */ color: #333; border: solid 1px #666; outline: solid 1px #666; outline-offset: -9px; color: #333; font-size: 20px !important; font-weight: normal; }


  • >>画像の操作(2) ロールオーバー


    ※ 画像にエフェクトをかけます。 filterプロパティで行います。
    この例では背景画像に対し ポジ・ネガ反転します。
    エフェクトはアニメーションで行っています。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex6"> </p>

    CSS

    .hover-ex6 { height: 90px; width: 680px; box-sizing: border-box; background-image: url('/sysdata/images/sample/title_back1.png'); background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .6s; } .hover-ex6:hover{ filter: invert(200%); }


  • >>見出しを四角い枠で囲い淡い色を付ける 見出しの装飾

    見出しを四角い枠で囲う


    ※ 見出しを四角い枠で囲い淡い色を付けグラデーションをかけます。
    文字も白色で影をつけることにより刻印感をだします。

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex8"> 見出しを四角い枠で囲う </h4>

    CSS

    .title-ex8{ border: solid #ccc 1px; background: linear-gradient(to bottom, #fff 0%, #ddd 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 1); color: #333; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; height: 54px; padding-left: 12px; }


  • >>画像の操作(3) ロールオーバー


    ※ 画像にエフェクトをかけます。 filterプロパティで行います。
    この例では背景画像に対し明度をとコントラストを上げ露光オーバーにし、さらにぼかしをかけています。
    エフェクトはアニメーションで行っています。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex7"> </p>

    CSS

    .hover-ex7 { height: 90px; width: 680px; box-sizing: border-box; background-image: url('/sysdata/images/sample/title_back1.png'); background-repeat: no-repeat; background-size: cover; background-position: center; transition: all .6s; } .hover-ex7:hover{ filter: contrast(150%) brightness(280%) blur(5px); }


  • >>画像の操作(4) ロールオーバー


    ※ 画像にエフェクトをかけます。 transformプロパティとfilterで行います。
    マウスオーバーで画像をズームアップし、ぼかしを入れます。
    アニメーションで行っています。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex11"> <img src="/sysdata/images/sample/title_back1.png"> </p>

    CSS

    .hover-ex11 { height: 90px; width: 680px; overflow: hidden; padding: 0 !important; display: flex; align-items: center; } .hover-ex11 img{ width: 100%; transition: all .6s; } .hover-ex11 img:hover{ transform:scale(1.2,1.2); filter: blur(5px); }


  • >>見出しの装飾 角丸枠をつける 見出しの装飾

    見出しに角丸の枠


    ※ 見出しに角丸の枠をつけます。

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex5"> 見出しに角丸の枠 </h4>

    CSS

    .title-ex5 { padding: 10px 10px 10px 18px !important; /* 本システムCSSの干渉を変更します */ border: solid 3px lightgray; border-radius: 0.5em; color: #333; font-size: 20px !important; font-weight: normal; display: flex; align-items: center; }


  • >>タイトルの装飾 定番の 付箋風見出し 見出しの装飾

    見出しの装飾 付箋風見出し


    ※ 定番の付箋風見出しです。

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex15"> 見出しの装飾 付箋風見出し </h4>

    CSS

    .title-ex15 { margin-top: 16px !important; /* 本システムCSSの干渉を変更します */ padding: 0 0 0 8px !important; /* 本システムCSSの干渉を変更します */ border-left: solid 8px pink; color: #333; font-size: 20px !important; font-weight: normal; height: 26px !important; }


  • >>タイトルの装飾 定番の付箋風見出し 見出しの装飾

    見出しの装飾 付箋風見出しライン付き


    ※ 定番の付箋風見出しにラインをつけたものです。

    [ 閉じる ]

    htmlソース

    <h4 class="title-ex16"> 見出しの装飾 付箋風見出しライン付き </h4>

    CSS

    .title-ex16{ margin-top: 16px !important; /* 本システムCSSの干渉を変更します */ padding: 0 0 0 8px !important; /* 本システムCSSの干渉を変更します */ border-left: solid 8px pink; border-bottom: solid 1px #ccc; color: #333; font-size: 20px !important; font-weight: normal; height: 26px !important; }