星期三的CSS-CSSBattle#173

Lee Luciano

更新於 2024/01/31發佈於 2024/01/31閱讀時間約 4 分鐘

是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！

很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！

回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！

那麼我們這次從 #173 的問題來提供我的作法，那麼題目圖如下：

我的思維邏輯

將面具圖面置中。
黑點我會看成是點綴樣式，除了眼睛與額頭上的單點其餘皆為整齊排列的方式佈置。
內層會處理額頭單點的部分，會以 Id 作調整。
眼睛的部分也是會以 Id 作調整，來做放大和位移。

下面的 html 是按照上述幾個要點的結構

<div class="mask">
  <div class="dot"></div>
  <div class="dot"></div>
  <div id="one" class="dot"></div>
  <div id="eyeL" class="dot"></div>
  <div id="eyeR" class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

這裡應該有11個黑點裝飾面具，大家不要算錯了喔！透過外層 mask 的 div 包住所有的黑點，那麼我們一樣先處理圖面置中：

body {
    display: grid;
    place-items: center;
    margin: 0;
    background: #A5B5B4;
}

接著，我們來處理mask的部分，這邊我統一都採用 grid 的方式做排列調整，當然各位想用 flex 的方式做調整也可以，只是 html 的結構可能要再考慮重構一下，會比較好做微調，那麼下面就是 for grid 的解決方案：

.mask {
    width: 150px;
    height: 170px;
    background: #FFFFFF;
    border-radius: 50%;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 10px 0;
    padding-bottom: 10px;
}

這裡的高度和 padding 是最後圖面完成大致定位的時候，才做出的微調，最一開始我是調成180px的高度，讓它和預覽圖面相覆蓋，這做法可以看個人喜好做決定，那麼我們來處理黑點的部分：

.dot {
    margin: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000000;
}
#one {
    grid-column: span 2;
}
#eyeL {
    width: 30px;
    height: 30px;
    translate: -20px -10px;
}
#eyeR {
    width: 30px;
    height: 30px;
    translate: 20px -10px;
}

上面包含了額頭上單一個點和眼睛的部分作出微調。

技術總結

這題除了考驗怎麼解構圖案之外，排列方式也很重要，你當然也可以透過 position: relative; & position: absolute;的方式做逐個微調，但是實務上做了之後在不同 size 的螢幕大小微調上會變得很麻煩，此外，這裡也考驗對 grid 或是 flex 的熟悉程度，以及對 translate 位移微調的掌握度。

以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !