iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 26
0
Modern Web

喪屍黑白切系列 第 26

Day 26 | 打破規則,勇敢創新 - 破格式設計

今天要講的是金魚都能懂的網頁切版 : 破格式設計 NO011
破格式的設計在很多樣版網站可以見到,
近期工作中也有接觸到,
滿多時候就是拿來製造兩物件重疊的效果。

本篇關鍵字

  • margin
  • border
  • transform: rotate()

範例檔


(icon 是用 Font Awesome)

HTML

<div class="wrap">
  <div class="container">
    <div class="item">
      <div class="icon">
        <i class="fa fa-trash"></i>
      </div>
      <div class="text">
        <h2>Step 1</h2>
        <p>千萬不要只是看別人寫,要自己動腦去想、動手去做,你就會發現看的跟想的根本不一樣,大量的練習,伴隨著的就是大量的垃圾產出。</p>
      </div>
    </div>
    <div class="item">
      <div class="icon">
        <i class="fa fa-recycle"></i>
      </div>
      <div class="text">
        <h2>Step 2</h2>
        <p>學習到一定程度的時候,你就會開始檢視自己以前寫的東西,接著就會發現自己原來真的寫過一堆不知道在幹嘛的 Code,當你有自己怎麼會寫出這種東西的想法時,代表你成長了。</p>
      </div>
    </div>
    <div class="item">
      <div class="icon">
        <i class="fa fa-money"></i>
      </div>
      <div class="text">
        <h2>Step 3</h2>
        <p>前面兩個步驟不停的循環,你也就在不斷的進步,進步能讓你寫出垃圾 Code 的機會越來越低,或是你意識到可以改進的機率變高變快,然後...最終目標就是希望可以賺錢啦啦啦~~~</p>
      </div>
    </div>
  </div>
</div>

CSS

.wrap {
  width: 100%;
  height: 100vh;
  background-color: rgba(111, 123, 115, 0.5);
  display: flex;
  align-items: center;
}

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

.item {
  width: 370px;
  margin: 0 15px;
  text-align: center;
  box-sizing: border-box;
  background-color: #fff;
  border: 10px solid#707C74;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(69, 76, 71, 0.8);
}

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

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

.item .fa {
  color:#707C74;
}

.item:hover .fa {
  animation: shake .2s linear infinite alternate;
}

.item .text {
  padding: 0 30px 30px;
}

.item .text h2 {
  margin-bottom: .5em;
  color:#707C74;
}

.item .text p {
  font-weight: 300;
  color: #888;
  line-height: 1.8;
}

@keyframes shake {
  from {
    transform: rotate(-10deg);
  }

  to {
    transform: rotate(10deg);
  }
}

喪屍分解

  • margin 負值將元素推出原本框架外
  • .icon::before 做出跟 .icon 一樣的大的圓,不直接用 .icon 做是因為後續還要做旋轉,這樣內容物才不會一起被轉到
  • 利用 border 做出外框線,但只有一半要,所以設定 border-topborder-right 有顏色,另外兩邊透明
  • 要注意的是另外兩邊的 border 也要設定寬度,否則會變成邊邊漸細的樣子,像這樣

    (會歪掉是因為我偷懶沒有改 topleft 設定)
  • 最後再設定 transform: rotate(-45deg),將 border 轉到正確的位置
  • .icon 設定 animation 做出不停擺動的效果

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是 loader。


上一篇
Day 25 | 不是古代的那種翻牌 - 翻牌效果
下一篇
Day 27 | 等待的時間不無聊 - loader
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言