デイトラweb制作中級編 DAY15

ボタンと見出しのコーディング
①下線の引き方

border ・・・ 色々な種類、太さの線が引ける
擬似要素(before、afterなど) ・・・ 線が対象要素に依存しないため、長さや配置が自由
②マーカーの引き方

background: linear-gradient(transparent 50%, 色);
「transparent」は上から透明にする
transparent 10%の場合 ↓

③吹き出し

・疑似要素(after)
・「relative」「absolute」
を使って作成 CSS三角形作成ツール を使うと楽にできる
④線の角度を変える

transform: rotate( 値 deg);
※rotate ・・・ 回転する deg ・・・ 度
⑤重なり順を指定

z-index: 数字;
最初に線を一本引いて、その上に文字を置くイメージ ↓

⑥色の互い違い

background: repeating-linear-gradient()
例:見出しパターン16の場合
background: repeating-linear-gradient(-45deg, #7385E9 0 15px, #A7BAFF 15px 30px);
⑦色を重ねる

background: linear-gradient(to bottom, 色1, 色2,色3...);
※上から順番に色が付けられる
まとめ
今回はボタンと見出しを大量に作りました。
ボタンや見出しのコーディングにはCSS活用のコツが詰まっていたり、Webサイトを制作する時には、ボタンと見出しの利用頻度が一番多かったりと、
とにかく良いこと尽くしみたいなのでコーディング練習にはもってこいだと思いました!