デイトラweb制作上級編パターン3 DAY31~44②
nakano
卒業制作課題パターン3 2日目
PC版
スマホ版
ホバー時のボタン移動
HTML
<div class="button"><a href="#">詳しくはこちら</a></div>SCSS
.button {
display: block;
max-width: 280px;
padding: 20px 30px;
background: #222222;
position: relative;
transition: all 0.3s ease 0s;
// 枠線
&::after {
position: absolute;
content: "";
right: -6px;
bottom: -6px;
width: 100%;
height: 100%;
border-right: 1px solid #222222;
border-bottom: 1px solid #222222;
transition: all 0.3s ease 0s;
}
// ボタンのホバー時
&:hover {
transform: translate(6px, 6px);
// 枠線は動かないようにする
&::after {
transform: translate(-6px, -6px);
}
}
}表示位置を変えて画像を見切れさせる
HTML
<section class="l-top-concept">
<div class="p-top-concept__beans"></div>
・
・
・
</section>SCSS
.l-top-concept {
position: relative;
}
.p-top-concept__beans {
position: absolute;
top: -201px;
right: 0;
background: url(../img/concept/bg_coffee-beans.png) no-repeat center center/contain;
// positionで調整
background-position: 38px;
width: 292px;
height: 265px;
z-index: 1;
}まとめ
今回も卒業制作課題に取り組みました。
改めてデザインカンプを見返してみたところ、どのページもアイテムを表のように並べていますね。
今まで作ったサイトと少し違うものを作っている感じがして楽しいです。
