★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

「 区切り線 」一覧

ボーダーの枠線や区切り線にグラデーションをかける方法を解説

ボーダーの枠線や区切り線にグラデーションをかける方法を解説

今まで要素にグラデーションをかける場合はbackground-imageなどにグラデーションさせた画像を指定する必要がありましたが、CSS3では画像を指定できる全てのプロパティにlinear-gradientなどの関数を渡してグラデーションさせることができるようになりました。ここでは枠線や区切り線にグラデーションをかける方法を解説します。

画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法

画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法

従来のCSSでしましまの枠線などを作ろうとすると縞模様の画像をリピートさせる方法しかありませんでした。しかしCSSで追加されたrepeating-linear-gradientプロパティを使うと画像を使うことなくきれいな縞模様のついた枠線や区切り線を作ることが可能です。ここではそのような枠線の作り方を解説します。

CSSだけで作れるオシャレな枠線・区切り線デザインまとめ

CSSだけで作れるオシャレな枠線・区切り線デザインまとめ

枠線や区切り線を変えるとサイトがオシャレになったり、読者の注目を引いてに大事な部分を読んでもらいやすくなるなどの効果があります。そこでここではCSSだけでグラデーションやシマシマ模様のついた枠線や区切り線を作る方法について解説します。もし気に入ったデザインがあればコピー・改変して使ってください。