css – シンプルな見出しのデザインいろいろ


cssのみのシンプル見出しのデザインいろいろ

なんとなく見出しいろいろサンプル作ってみただけです。

css のみで出来るものだけで、シンプルなものから疑似要素使ったものまで画像など一切使っておりません。

疑似要素を使えば、アイデア次第でたくさん出来きますね。

border-radiusやtransformなどでハートなど作ろうかと思いましたが、特殊文字を変換するだけで簡単にできました。

その時に参考にさせていただきました記事はこちらです。

WebTecNoteさんの記事にある、「16進数値文字参照 変換スクリプト」が便利です、ありがとうございました。

[css] contentプロパティで挿入できるコンテンツ

✿ こんなお花だとか(\00273f) ♥ ハートマーク(\002665)だとか ☠ドクロ(\002620)みたいな特殊シンボルも表示できたりします。

引用元:http://tenderfeel.xsrv.jp/css/787/

その他、便利なサイトを紹介しておきます。

見出しデザインってホントにきりがないですね、cssだけでも沢山できるし、画像を使えばもっとたくさん・・・
さらにはborder に画像を使ったborder-image も・・・

 

今回作成した見出しサンプル一覧はこちら

mizukazu | 見出しいろいろ

 

 

css見出しいろいろ

今後cssアニメーションを使ったものなどもアップしようかと思います。

それではまた。

 

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL