CSSのborder-imageを使ってborderをグラデーションにする方法

今回はCSSのborder-imageを使って、borderをグラデーションにする方法です。

borderをグラデーションにする必要ある??って思いつつもこの記事を作成するにあたり実験したら、思いの外きれいでした(笑)

結構簡単にできるんで、センスのいい方はサイトのデザインい取り入れて活用してください。

CSSのborder-imageを使ってborderをグラデーションにする方法

今回はdivタグでブロック要素を用意し、その要素をぐるっと囲うようにborderを描画し、そのborderをグラデーションにしました。

作成したHTMLとCSSは以下の通りです。

HTML

CSS

コードの解説

CSSの1-7行目はボーダーを設定するブロック要素を用意しているだけです。

 

CSS 9行目 border: 2px solid;

まずブロック要素に border を指定します。

2pxは太さで solid は実線になります。

 

border-image: linear-gradient(90deg, #0000FF, #FF0000);

border-imageプロパティはborderに画像を指定するものですが、上記のように linear-gradient() を使うとグラデーションを表示できます。

linear-gradient() でグラデーションの設定をする方法は次の記事を参考にしてください。

≫ CSSでグラデーションを作成する方法

 

border-image-slice プロパティは、、、ぶっちゃけあまり使い方分かってないです!すみません!

 

これでブラウザに出力するとグラデーションの出来上がりです。

簡単ですね。

上のコードを出力したサンプル画面は次のリンクです。

グラデーションを縦方向にする方法

上のサンプルでは左から右へ横方向にグラデーションになるサンプルでした。

この方法だと簡単に縦方向のグラデーションもできます。

実際にグラデーションを描画する部分の角度を変えればOKです。

border-image: linear-gradient(180deg, #0000FF, #FF0000);

180degの部分です。

この部分はグラデーションの方向の角度を指定します。

180degにすると上から下になります。

 

150degとかを指定すれば斜めにもなります。

色々試してみてください。

まとめ

CSSのborder-imageを使ってborderをグラデーションにする方法を紹介しました。

サンプル画面はみましたか?

意外と綺麗なもんですね!

分かりやすいように青と赤でしたけど、別の色も指定できますし色を3食にしたりもできます。

是非試してみてください。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

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

CAPTCHA