CSS 変更が楽しい!クリエイティブな作業はたまにやろう♪

CSS 変更が楽しい!クリエイティブな作業はたまにやろう♪
CSS 変更が楽しい!クリエイティブな作業はたまにやろう♪
CSS 変更が楽しい!クリエイティブな作業はたまにやろう♪

クリエイティブな作業はたーのしー♪

本当に久しぶりに CSS をいじってみてます♪

それというのも Facebook に、見出しデザインのサンプル案が提案されているページが送られてきたからです。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

ずっとこのサイトの見出し装飾が気に入らなかったので、とても良い機会だと思って取り組んでみましたm(_ _)m

コードサンプルも記載されているので、あとはコピペすれば OK !!

CSS 装飾変更でやったこと

  1. グラディエーション下線装飾の追加
  2. 見出し一文字目のみを拡大&装飾

h1 CSS 装飾コード


/* h1 下線装飾追加 */
h1 {
border-bottom: solid 3px #cce4ff;
position: relative;
}
h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}

/* h1 見出し一文字目の装飾 */
h1:first-letter {
font-size: 2em;
color: #1e73be;
}

たったこれだけの記述で、ちょっとしたアクセントをページに設けることができました(゚∀゚)

「すごーい!」、「たーのしー!」って感じです。

WordPressカテゴリの最新記事