ララベルで背景色を2色にする方法


背景色などを2色にする方法を紹介していきたいと思います

それでは書き方を紹介していきます(今回はLaravelを使っています)

navbar.blade.php
<nav class="navbar navbar-expand-sm navbar-dark" 
style="background :linear-gradient(to top, #330000 0%, #660000 100%);">

・background :linear-gradientを使用します(classのとこは気にしないでください)
・色の指定は()の中身でしています
この場合ではto topなので下から上にかけて色が変化します 
上の画像がこのパターンですね

nabar.blade.php
<nav class="navbar navbar-expand-sm navbar-dark" 
style="background :linear-gradient(to top, #330000 0%, #330000 50%, #660000 50%, #660000 100%);">

このように0%〜50%、50%〜100%にすると2色をくっきり分けることができるので便利です!
国旗などを表現したいときにいいですね!

今回はto topを紹介しましたが
・to top 下から上へ
・to right 左から右へ
・to left 右から左へ
・to bottom 上から下へ
これらで方向の指定が可能となります

今回のまとめ

今回は背景色の2色について紹介しました
上記はnavタグを使用していますが他のタグでも試してみてくだい!