iT邦幫忙

2021 iThome 鐵人賽
DAY 27
0
自我挑戰組

文組視角的初學前端筆記系列 第 27 篇

Day27 切版筆記 - 破格式設計

13th鐵人賽
1633 瀏覽

  • 分享至 

  • xImage
    •  

今天來練習切這個版面/images/emoticon/emoticon13.gif

運用到的觀念

  1. flexbox
  2. box model 區塊大小的計算
  3. margin設定負值調整版面
  4. border-radius調整外框的角度
  5. 使用line-height作單行文字的垂直居中
  6. 絕對定位&相對定位
  7. 偽元素
  8. 背景漸層色設定 linear-gradient
  9. 用 transform: rotate( ?deg); 來調整圓弧框線的位置
  10. @keyframes & animation搭配:hover 作出互動動畫效果

HTML 結構

<div class="wrap">
    <div class="item">
      <div class="icon">
        <i class="fas fa-door-open"></i>
      </div>
      <div class="txt">
        <h3>維吉尼亞．吳爾芙</h3>
        <p>一個人能使自己成為自己，比甚麼都重要。不需要著急。不需要光芒四射。不需要做任何人，只要做自己。</p>
      </div>
    </div>
    <div class="item">
      <div class="icon">
      <i class="fas fa-fish"></i>
      </div>
      <div class="txt">
        <h3>金魚都懂切版</h3>
        <p>金魚都懂的這個網頁怎麼切，是 IThome 鐵人賽的主題，主要訴求在簡單快速將一個網頁畫面完成，
          但也由於時間有限，所以沒有處理RWD部分，留給廣大網友腦補囉。</p>
      </div>
    </div>
    <div class="item">
      <div class="icon">
      <i class="fas fa-plane"></i>
      </div>
      <div class="txt">
        <h3>三毛說的</h3>
        <p>「一個人至少擁有一個夢想，有一個理由去堅強。心若沒有棲息的地方，到哪裡都是在流浪。」</p>
      </div>
    </div>
  </div>

CSS 結構

  1. 設定css reset
    載入google fonts字型
    載入font awesome圖示
    wrap區塊設定display:flex;讓item區塊橫向並排
    wrap區塊設定固定寬度且設定水平置中
    wrap區塊設定一個背景色方便排版檢查用 margin上下也設定100px

    item區塊寬度設定400px 因為加了左右margin 扣掉30px
    item區塊設定文字置中排列 text-align: center;
    調整item內p和h3的文字排版

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
@import url("https://pro.fontawesome.com/releases/v5.10.0/css/all.css");

* {
  margin: 0;
  padding: 0;
  list-style: none;
   font-family: "Noto Sans TC", sans-serif; 
}

.wrap{
  display: flex;
  width: 1200px;
  margin: 100px auto;
  background-color: #999; 
}

.item{
  width: 370px;
  margin: 0 15px;
  text-align: center;
}

.item h3{
 color: #f5afac;
 font-size: 24px;
 margin-bottom: 1em;
}

.item p{
color: #ccc;
line-height: 1.7;
}

.item .txt{
  padding: 20px 20px 2em;
}

調整wrap區塊的位置垂直置中
實務上不會這樣操作，只是為了好查看

html, body{
  height: 100%;
}

body{
  display: flex;
  align-items: center; 
}

目前的畫面

  1. 製作凸出來的半圓區塊

.item .icon{
  width: 150px;
  height: 150px;
  background-color: #fa0; 
  margin: auto ;
  }

將margin top 設定成負值 讓icon區塊凸出

.item .icon{
  width: 150px;
  height: 150px;
  background-color: #fa0; 
  margin: -75px auto 0 ;
  }

  1. item區塊加邊框，改背景顏色，將邊框角度改成圓弧形
.item{
  width: 370px;
  margin: 0 15px;
  text-align: center;
  border: 10px solid  #f9cec2;
  background-color: #fff;
  border-radius: 20px;
  }

  1. 使用line-height將icon區塊內的icon圖示設成垂直居中 調整大小並且將外框設成圓弧狀
.item .icon{
  width: 150px;
  height: 150px;
  background-color: #fa0; 
  margin: -75px auto 0 ;
  font-size: 85px;
  line-height: 150px;
  border-radius: 50%;
  color: #f5afac;
  }

  1. 使用偽元素作出框線，並運用絕對定位將偽元素固定在icon區塊
.item .icon{
  width: 150px;
  height: 150px;
  background-color: #fa0; 
  margin: -75px auto 0 ;
 font-size: 85px;
  line-height: 150px;
  border-radius: 50%;
  color: #f5afac; 
  position: relative; 
}

 .item .icon::before{
  content:" ";
  position:absolute;
  width: 100%;
  height:100%;
  border: 10px solid #f9cec2; 
  }

定位時要扣掉邊框10px的設定，才會將整個圓形的icon區塊包住

 .item .icon::before{
  content:" ";
  position:absolute;
  width: 100%;
  height:100%;
  border: 10px solid #f9cec2; 
  left:-10px;
  top:-10px;  
  }

  1. 改變邊框角度成圓弧形狀
    因為只需要上半部的圓框線，所以將框線設成上下左右
    把下框線和右框線改成透明色
 .item .icon::before{
  content:" ";
  position:absolute;
  width: 100%;
  height:100%;
  left:-10px;
  top:-10px;  
  border-radius: 50%; 
  border-top:10px solid #f9cec2; 
  border-right:10px solid #f9cec2; 
  border-bottom:10px solid transparent; 
  border-left:10px solid transparent;

會發現半圓的框線是歪的
這時候只要設定transform: rotate(-45deg); 調整框線角度
再將icon區塊顏色改成白色 就完成這個凸出去的半圓區塊了


.item .icon{
 width: 150px;
 height: 150px;
 background-color: #fff; 
 margin: -75px auto 0 ;
 font-size: 85px;
 line-height: 150px;
 border-radius: 50%;
 color: #f5afac; 
 position: relative; 
} 

.item .icon::before{
 content:" ";
 position:absolute;
 width: 100%;
 height:100%;
  left:-10px;
 top:-10px;  
 border-radius: 50%; 
 border-top:10px solid #f9cec2; 
 border-right:10px solid #f9cec2; 
 border-bottom:10px solid transparent; 
 border-left:10px solid transparent;
 transform: rotate(-45deg); 
}

  1. 因為icon區塊超出wrap區塊(父層)，必須調整回到父層內

在wrap區塊設定padding-top: 75px; 和之前在icon區塊設定的margin top -75px相抵消

.wrap{
 display: flex;
 width: 1200px;
 margin: 100px auto;
 background-color: #999; 
  padding-top: 75px; 
}

.item .icon{
 width: 150px;
 height: 150px;
 background-color: #fff; 
 margin: -75px auto 0 ;
 font-size: 85px;
 line-height: 150px;
 border-radius: 50%;
 color: #f5afac; 
 position: relative; 
}

  1. 用linear-gradient增加漸層的背景色彩
    將wrap區塊背景顏色設定刪掉
body{
  display: flex;
  align-items: center; 
  background-image: linear-gradient(-45deg, #fffaf0, #f8c3c1) ;
} 

.wrap{
  display: flex;
  width: 1200px;
  margin: 100px auto;
   padding-top: 75px; 
}

  1. 使用box使用box-shadow將item區塊增加陰影效果
.item{
 width: 370px;
 margin: 0 15px;
 text-align: center;
	border: 10px solid  #f9cec2;
 background-color: #fff;
	border-radius: 20px;
	box-shadow: 10px 20px 50px #f7b6a7;
 }

  1. 設定碰到item區塊 icon圖示就會產生搖晃的動畫效果
.item:hover .fas{
  animation: iconShake .2s linear infinite alternate;
} 

@keyframes iconShake {
  0%{ transform:rotate(-10deg);}
  100%{ transform:rotate(10deg);}
}

參考資料: 金魚都能懂的這個網頁畫面怎麼切 : 破格式設計

以上為個人學習筆記整理
若有錯誤，歡迎指正


上一篇
Day26 切版筆記- 方塊酥版面
下一篇
Day28 切版筆記 - 側邊選單
系列文
文組視角的初學前端筆記 共 30 篇
  1. 26
    Day26 切版筆記- 方塊酥版面
  2. 27
    Day27 切版筆記 - 破格式設計
  3. 28
    Day28 切版筆記 - 側邊選單
  4. 29
    Day29 切版筆記 -訂單進度條
  5. 30
    Day30 切版筆記 - 文字排版
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22043 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙