デイトラ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サイトを制作する時には、ボタンと見出しの利用頻度が一番多かったりと、

とにかく良いこと尽くしみたいなのでコーディング練習にはもってこいだと思いました!

コメントを残す

メールアドレスが公開されることはありません。