グラデーションと交差線ボタン

勉強にかかりきりで更新できてなかったのに自己紹介の記事にスキを頂いたり、フォローしていただいたりと嬉しい限りです✨
ありがとうございます！😊
今日からできるだけ投稿していこうと思います！

勉強の備忘録として上げていくので違うぞとかこれはこうじゃない？こうしたら？等有りましたら教えていただけると嬉しいです❣

背景のグラデーション

・背景のグラデーション（縦横斜め）
cssだけでそれも簡単にできてびっくり！

body {background: linear-gradient(-135deg, #D69098 , #89BBAD , #90A8D6 );}

で実装できて角度も自分でスキなようにいじれる。

・円形のグラデーションにしたいとき

body {background: radial-gradient(#F2B9A1, #EA6264 );}

radial-gradientを使うことでできる。

・グラデーションのオーバーレイ
画像にグラデーションを重ねて背景として使用できる。

body {
background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
url(images/bg-cherrybrossam.jpg);
background-size: cover;
}

・線のグラデーション
①疑似要素の背景をグラデーションにする。
レスポンシブ🙆お手軽だけど斜めのグラデーションは❌

.border{
  width: 300px;
  height: auto;
  padding: 0;
  text-align: center;
  border-left: 2px solid #43C6AC;
  border-right: 2px solid #d9e653;
}
.border::before,
.border::after{
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(to right,  #43C6AC 0%, #d9e653 100%);
}

②border-imageで設定する。
レスポンシブ🙆画像をつくる必要🐜

.border{
  width: 300px;
  height: auto;
  padding: 15px 0;
  text-align: center;
  border: solid 2px transparent;
  border-image: url("https://www.infocrest.co.jp/ykxbdgs5qgq3/uploads/2019/10/blog_m02_2.jpg");
  border-image-slice: 1;
  border-image-repeat: stretch;
}

border-imageから下は一括指定可能。

③要素を入れ子にする。
斜めのグラデーション🙆デザイン次第ではできない場合もある。

html
<div class="border">
    <div class="border-inner">テキスト</div>
</div>

css
.border{
  width: 300px;
  height: auto;
  padding: 2px;
  text-align: center;
  background: linear-gradient(to right bottom, #ff5f6d, #ffc371);
}
.border-inner{
  padding: 5%;
  background-color: #FFF;
}

・文字のグラデーション

#about .btn {
display: block;
text-align: center;
}
.btn:hover {
background: -webkit-linear-gradient(225deg,  #89bbad 0%,  #90a8d6 50%,  #d69098 90%);
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
}

ちょっと特殊な感じがしたけどやってみたらちゃんとなりました👏

交差線のボタン

可愛いなって思ってしてみたらちょっとめんどくさかったから忘れないようにφ(..)メモメモ

.btn {
    display: block;
    padding: 5px;
    border-top: 2px solid #696a6a;
    border-bottom: 2px solid #696a6a;
    position: relative;
}
.btn::before,　.btn::after {
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% +20px);
    background-color: #696a6a;
}
.btn::before {
    left: 10px;
}
.btn::after {
    right: 10px;
}

一番長かった！！いろいろ考えて作らなきゃいけなくて頭ぐちゃぐちゃになりそうだったけどなんとかできました✌

ってことでまた明日ばいばい👋