タグ

2020年12月2日のブックマーク (1件)

  • CSS見出しデザイン参考100選!コピペ可!どこよりも詳しく解説!

    JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく(おそらく..)紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTML

    CSS見出しデザイン参考100選!コピペ可!どこよりも詳しく解説!
    natsukareala
    natsukareala 2020/12/02
    “h2 { position: relative; padding: 0 65px; text-align: center; } h2:before { position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; content: ''; background: #000; } h2 span { position: relative; padding: 0 1em; background: #fff; }”