コーディング
今日は、codestep中級編2つ目のcoffeeshopを精読しました。
知り合いにコーヒーショップに「ホームページ作ってね」と言っていただいているので、気合が入ります。
この課題のテーマは、私の中では
でした。この記事では、3つめのReadMoreについて整理します。
このコードは自力では書けるレベルではありませんでしたので、模範解答のおさらいついでにまとめています。
まずは、模範サイトを見たほうが早いので掲載しますね。
「初期には、左右の赤い鍵状に囲われているボタンですが、hoverすると四角く囲う」というものです。
作り方を見てみましょう。
まずbottnのかたちを作ります。
#about .btn {
width: 160px;
height: 50px;
line-height: 3.5;
display: inline-block;
color: #000;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative; // これを親要素とします
そしてそもそもこのbottunはhtmlを見ると、
<a class="btn" href="#"><span>Read More</span></a>
と、.btnとspanで二重に覆われており、
#about .btn span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
と指定されています。
疑似要素のbefore,afterについてはこちらの記事がわかりやすかったです。before/afterが前後につかなくても良いなんて!
https://mihune-web.com/before_after/
【右縦棒】
.btn::before{
position:absolute; //親要素に対して下のright,bottomを起点にする
content:"";
right:0; //右の
bottom:0; // 底辺を起点
wide:2px; //幅2pxで
height:50%; //高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に
【右横棒】
.btn::after{
position:absolute; //親要素に対して下のright,bottomを起点にする
content:"";
right:0; //右の
bottom:0; // 底辺を起点
wide:20%; //幅は親要素btnの長さの20%
height:2px; //高さ
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に
【左縦棒】
.btn span::before{
position:absolute; //親要素に対して下のleft,topを起点にする
content:"";
left:0; //左の
top:0; // 上辺を起点
wide:2px; //幅2pxで
height:50%; //高さは親要素btnの高さの半分
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に
【左横棒】
.btn span::after{
position:absolute; //親要素に対して下のleft,topを起点にする
content:"";
left:0; //左の
top:0; // 上辺を起点
wide:20%; //幅は親要素btnの長さの20%
height:2px; //高さ
background:#e030131;
transition:all 0.3s ease; //動きは0.3秒かけて自然に
【縦棒は長さを100%にする】
#about .btn:hover::before,
#about .btn span:hover::before {
height: 100%;
}
【横棒の長さを100%にする】
#about .btn:hover::after,
#about .btn span:hover::after {
width: 100%;
}