The post ボーダーの枠線や区切り線にグラデーションをかける方法を解説 first appeared on Fukuro Press.
]]>最近はCSS3でグラデーションが使えるようになったためグラデーションを使うサイトが増えてきました。
サイトの見栄えをよくしたり、ちょっとしたアクセントになるのでグラデーションは効果的です。
そこでここではそのようなアニメーションの1つグラデーションを使って枠線や区切り線などの線系の要素にグラデーションをかける方法を解説します。
従来までの方法だと背景などをグラデーションさせるには背景画像などを設定しなければなりませんでしたが、CSS3ではグラデーションがサポートされるようになりました。
グラデーションには線形や円形などの種類がありますがここで使用するのは方向が一定の線形グラデーション(linear-gradient)です。
線形グラデーションを背景などに適用する場合は画像をとれるプロパティに次のようにlinear-gradient関数を渡します。
background-image: linear-gradient(90deg, red, green);
linear-gradient関数はbackground-imageプロパティ、list-style-imageプロパティ、border-imageプロパティなど画像をサポートするほとんどのプロパティで使用できます。
linear-gradientは次のようにグラデーションの方向と開始色、途中色、終了色を引数にとります。
linear-gradient(方向, 開始色, [途中色]... , 終了色);
1つめの引数にはグラデーションの向きを指定するのですが次の2つの指定方法があります。
例えば次のCSSを見てください。
background: linear-gradient(to right, red, blue);
このCSSを適用したdiv要素は次のように左から右に赤から青でグラデーションされます。
そしてそれ以降の引数にはカラーを渡していきます。開始色と終了色の間には好きなだけ途中色を置くことが可能です。また%を指定することでその場所にカラーストップも置くことができます。
linear-gradient(to right, red, green 30%, blue);
この例では方向は左から右で、赤から始まり、30%のところで緑になり、最後は青色で終わります。実際にdiv要素に適用すると次のようなグラデーションになります。
線形グラデーションにはlinear-gradientが使われますが、古いブラウザにも対応させるために一応ベンダープリフィックス(接頭字)はつけておいた方が良いです。次のように「-webkit-」「-moz-」「-o-」「-ms-」などを関数名の前に書いて複数定義します。
background: -moz-linear-gradient(to right, red, blue);
background: -webkit-linear-gradient(to right, red, blue);
background: -o-linear-gradient(to right, red, blue);
background: linear-gradient(to right, red, blue);
ただし見やすさの観点からこれらのプリフィックスは省略します。以下で解説する枠線や区切り線のグラデーションにはこれらのプリフィックスがついているものとして読んでください。
区切り線要素(hr)にグラデーションをかけるには次のようにbackground-imageプロパティにグラデーションを指定します。
hr
{
background-image: linear-gradient(to right, red, green);
height: 10px;
}
この区切り線はブラウザでは次のように表示されます。
他にも方向や色を変えると次のような区切り線が作れます。
See the Pen MQRZaw by kaz1503 (@kaz1503) on CodePen.dark
次は要素を囲むボーダーの枠線にグラデーションをかける方法を紹介します。
ボーダーにグラデーションをかける場合、1つの手としてborder-imageプロパティにグラデーションを渡す方法があります。例えば次のようなコードです。
border-image: linear-gradient(to left, red, blue);
これでも枠線がグラデーションしますが、次のような問題点があります。
上下にはグラデーションがかからないので疑似要素の::afterや::beforeを使って疑似的に枠を追加することになるのですが、あまりにも手間がかかりすぎます。また枠線を丸めることもできません。
なのでここではborder-imageは使いません。代わりにある要素に::afterで疑似的な子要素を追加してその要素を親要素より大きくすることで疑似的に枠を再現します。次がそのコード例です。
HTMLコード
<div id="box">
グラデーションする枠線
</div>
CSSコード
#box
{
position: relative;
background-color:rgba(255, 255, 200, 1);
padding: 12px;
}
#box::after
{
position: absolute;
top: -5px; bottom: -5px;
left: -5px; right: -5px;
background: linear-gradient(to left, red, blue );
content: '';
z-index: -1;
}
このコードで重要なのは親要素(div#box)にposition:rerativeを設定し、その中の疑似的な子要素(div#box::after)にposition:absoluteを指定していることです。こうすることで親要素の中で相対的な位置を決めることができます。
そして子要素のtop,left,bottom,rightにそれぞれ-5pxを指定することで親要素の大きさに対して5pxだけ大きくなるので、z-indexに-1を指定すれば子要素が親要素の背後に来て子要素が親要素で隠されるので枠線のように機能します。
以下はコード付きの実行例です。
See the Pen aqxPww by kaz1503 (@kaz1503) on CodePen.dark
またこの方法を使うとborder-radiusプロパティを親要素と子要素の両方に指定すれば次のように角を丸めることも可能です。
See the Pen paBqrj by kaz1503 (@kaz1503) on CodePen.dark
親要素のborder-radiusプロパティの値が枠線内側の丸め半径、子要素のborder-radiusプロパティの値が枠線外側の丸め半径になります。内側より外側の方が値が大きいと見栄えがいいように見えます。そこはいろいろ値を変えて試してみてください。
以上linear-gradientを使って枠線と区切り線をグラデーションさせる方法について解説しました。
The post ボーダーの枠線や区切り線にグラデーションをかける方法を解説 first appeared on Fukuro Press.
]]>The post 画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法 first appeared on Fukuro Press.
]]>シマシマ模様の枠線や区切り線に模様を作りたい場合、従来のCSSだと枠線の背景に縞模様の画像をリピートさせて作っていました。
しかし縞模様の画像を用意するのは面倒なうえに画像の作り方を間違えると縞模様がいびつになることもあります。
しかしCSS3で追加されたグラデーションプロパティを使うと簡単にそういう枠線も作れます。そこでここではシマシマ模様の枠線を作る方法について解説します。
CSSだけでしま模様を作るにはCSS3で新たに追加されたrepeating-linear-gradient関数を使います。この関数の構文は次の通りです。
repeating-linear-gradient(方向, 開始色, 途中色..., 終了色)
方向には次の2つの形式の値を渡します。
次に色ですが、シマシマ模様を作る場合は次のように色の後にその色でどの距離までグラデーションをするか段階的に指定することで縞模様が作れます。
background: repeating-linear-gradient(to right, blue, blue 3px, white 3px, white 6px);
このbackgroundプロパティを指定した要素は次のように青と白の縞模様がかかって表示されます。
さらに向きや色を変えることで次のような縞模様を作ることが可能です。
向きが45度で赤白のしま模様
background: repeating-linear-gradient(45deg, red, red 5px, white 5px, white 10px);
下から上へ赤緑青の3色のしま模様
background: repeating-linear-gradient(to top, red, red 5px, green 5px, green 10px, blue 10px ,blue 15px);
このようにrepeating-linear-gradientを使うと簡単に縞模様が作れます。
ただし未対応のブラウザのために次のように「-moz-」「-webkit-」「-o-」などのベンダープリフィックス(接頭字)をつけておいた方がいいです。
background: -webkit-repeating-linear-gradient(to right, red, red 5px, white 5px, white 10px);
background: -moz-repeating-linear-gradient(to right, red, red 5px, white 5px, white 10px);
background: repeating-linear-gradient(to right, red, red 5px, white 5px, white 10px);
ただし以下のコードでは見やすさのためにベンダープリフィックスは省略します。
しましまの区切り線を作るにはhrタグのbackgroundプロパティにグラデーションを指定するだけです。
CSSコード例
hr
{
background: repeating-linear-gradient(45deg, red, red 5px, white 5px, white 10px);
height: 5px;
}
実際のブラウザでは次のように表示されます。
枠線のborder-imageプロパティにもグラデーションを指定できますが、あまり表示がきれいにならないので別の方法を使います。
ここではafter疑似要素にグラデーションをかけ、もとの要素で内側を塗りつぶすことで疑似的に枠を作ります。次の例を見てください。
CSSコード例
.stripe_border
{
position: relative;
background: rgba(255, 255, 255, 1);
padding: 12px;
width: 200px;
height: 100px;
}
.stripe_border::after
{
position: absolute;
top: -10px; bottom: -10px;
left: -10px; right: -10px;
background: repeating-linear-gradient(45deg, red, red 3px, white 3px, white 6px);
background-color: black;
content: '';
z-index: -1;
}
このCSSクラス(stripe_border)を適用した要素は次のようにしましまの枠線で囲まれます。
しましまの間隔や色などを変えると面白い縞模様も作れます。
次が色々なしま模様のついた枠線とそのコード例です。
See the Pen いろんなしましま枠線 by kaz1503 (@kaz1503) on CodePen.dark
以上画像を使わずCSSだけでしましまの枠線や区切り線を作る方法について解説しました。しまの間隔や色や角度などを変えると面白いしましまが作れると思います。
The post 画像を使わずCSSだけでシマシマ模様の枠線や区切り線を作る方法 first appeared on Fukuro Press.
]]>The post CSSだけで作れるオシャレな枠線・区切り線デザインまとめ first appeared on Fukuro Press.
]]>枠線や区切り線は記事内で中心になるものではないですが、デザインをちょっと変えるだけでサイトの雰囲気にアクセントをつけることができます。
また特徴的な枠線にすることで読者の注意を引き、記事の大事な部分に注目してもらいやすくなるという効果もあります。
ここではCSSだけで作れるオシャレな枠線や区切り線のデザインをいくつか紹介します。気に入ったものがあればコピペして自由に使ってください。
まずは区切り線のデザインを紹介します。
次のようなグラデーションのついた区切り線です。
この区切り線を作るにはまず次のhr要素を定義します。
<hr class="hr_grad">
そしてこのhr要素に次のCSSを適用することで作れます。
.hr_grad{
background: linear-gradient(to right, rgba(0, 50, 200), rgba(0, 200, 50));
background-color: gray;
width: 270px;
height: 10px;
margin: auto 0;
}
このCSSコードの次の部分を変更するとグラデーションの向きや色などを変更できます。
background: linear-gradient(to right, rgba(0, 50, 200), rgba(0, 200, 50));
この部分を変更すると次のような区切り線も作れます。
(1).緑系から赤系の色にグラデーションする区切り線
CSSコード
background: linear-gradient(to right, rgba(50, 250, 0), rgba(250, 100, 0));
(2).レインボーな区切り線
CSSコード
background: linear-gradient(to right, rgba(250, 50, 50), rgba(50, 250, 50) 50%, rgba(50, 50, 250));
次のように色が交互に変化するしま模様の区切り線です。
この区切り線を作るにはまず次のhr要素を定義します。
<hr class="hr_grad">
そしてこのhr要素に次のCSSを適用します。
.hr_stripe{
background: repeating-linear-gradient(45deg, blue , blue 10px, white 10px, white 20px);
background-color: gray;
width: 270px;
height: 10px;
margin: auto 0;
}
区切り線のしま模様の間隔や色を変えるには上のCSSの次の部分を変更してください。
background: repeating-linear-gradient(45deg, blue , blue 10px, white 10px, white 20px);
この部分を変更すると次のような区切り線が作れます。
(1).しま間隔を狭くした区切り線
CSSコード
background: repeating-linear-gradient(45deg, blue , blue 5px, white 5px, white 10px);
(2).3色の縞模様の区切り線
CSSコード
background: repeating-linear-gradient(45deg, red , red 10px, white 10px, white 20px, green 20px, green 30px, white 30px, white 40px);
次はコンテンツの内容を囲む枠線のデザインを紹介します。
次のようにある方向にグラデーションのついた枠線です。
この枠線を作るにはまず次のようなdiv要素を定義します。
<div class="border_grad"></div>
そして次のようなCSSをこの要素に適用します。
.border_grad{
position: relative;
background-color: white;
border-radius: 6px;
width: 250px;
height: 150px;
margin: 10px;
}
.border_grad:after{
position: absolute;
content: "";
top: -10px; bottom: -10px;
left: -10px; right: -10px;
background: linear-gradient(to top, rgba(0, 50, 200), rgba(0, 200, 50));
background-color: rgba(200, 200, 200);
border-radius: 6px;
z-index: -1;
}
このCSSではborderプロパティは使用していません。after疑似要素を使ってdiv要素でグラデーションのついたafter疑似要素を切り抜くことで枠線を作っています。
枠線の太さは次のtop,left,bottom,rightプロパティの値で変更できます。例えば太さを6pxにしたいなら次のようにこれらのプロパティに「-6px」と指定してください。
top: -6px; bottom: -6px;
left: -6px; right: -6px;
また枠線のグラデーションの方向や色などは次の部分を変更することで変えることができます。
background: linear-gradient(to top, rgba(0, 50, 200), rgba(0, 200, 50));
この部分を変更すると次のような区切り線が作れます。
(1).左から右の方向にグラデーションする枠線
CSSコード
background: linear-gradient(to right, rgba(0, 50, 200), rgba(0, 200, 50));
(2).青から紫で斜め45度方向にグラデーションする枠線
CSSコード
background: linear-gradient(45deg, blue, purple);
(3).カラフル枠線
CSSコード
background: linear-gradient(to right bottom, red, green 50%, blue);
次のようにしましまな模様が付いた枠線です。少しオシャレな感じになります。
この枠線を作るにはまず次のようなdiv要素を定義します。
<div class="border_stripe"></div>
そしてこのように次のCSSを適用すると縞模様付きの枠線になります。
.border_stripe{
position: relative;
background-color: white;
width: 250px;
height: 150px;
margin: 10px;
}
.border_stripe:after{
position: absolute;
content: "";
top: -10px; bottom: -10px;
left: -10px; right: -10px;
background: repeating-linear-gradient(45deg, red , red 10px, white 10px, white 20px);
background-color: gray;
z-index: -1;
}
グラデーションつき枠線の時と同じようにborderプロパティは使っていません。枠線の太さの変更もグラデーション枠線の時と同じ方法で変更できます。
枠線の縞模様の間隔や方向や色を指定するには次の部分を変更してください。
background: repeating-linear-gradient(45deg, red , red 10px, white 10px, white 20px);
この部分を変えると次のような枠線が作れます。
(1).しま模様の間隔が狭い枠線
CSSコード
background: repeating-linear-gradient(45deg, red , red 6px, white 6px, white 12px);
(2).3色のしま模様の枠線
CSSコード
background: repeating-linear-gradient(45deg, red , red 6px, white 6px, white 12px, lime 12px, lime 18px, white 18px, white 24px);
ここで紹介した枠線ではCSS3のグラデーション関係の2つのプロパティを使っています。
この2つのプロパティを未対応のブラウザで機能させるには先頭に「-moz」「-webkit-」「-o-」などのベンダープレフィックスが必要です。
例えばベンダープレフィックスは次のように指定します。
background: -moz-linear-gradient(to right bottom, red, green 50%, blue);
background: -webkit-linear-gradient(to right bottom, red, green 50%, blue);
background: linear-gradient(to right bottom, red, green 50%, blue);
ここではコードが長くなりすぎるので省略しましたが、多くのブラウザに対応させたいならベンダープレフィックスをつけるのを忘れない方が良いです。
以上オシャレな枠線や区切り線のデザインをいくつか紹介しました。もし気に入ったものがあればコピー・改変して使ってください。
The post CSSだけで作れるオシャレな枠線・区切り線デザインまとめ first appeared on Fukuro Press.
]]>