星期三的CSS-CSSBattle#107

閱讀時間約 6 分鐘

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

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

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

那麼我們這次從 #107 的問題來提供我的作法,那麼題目圖如下:

raw-image

封印解除XD

  1. 會考慮用一個 wrapper 將整個圓形圖案置中,那我會比較習慣使用 grid 來處理。
  2. 頭和眼睛的部分我們可以把它想成同心圓的蓋念,利用圖層堆疊的原理來組合出圖案,可以想像成紅色環形上面蓋上一個白色環形加上羽毛的圖層。
  3. 嘴巴和頸部可以把它想成長條形的色塊,利用 border-radius 去調整呈現的形狀。
  4. 最後透過 translatez-index 來調整顯示的位置。

下面的 html 是按照上述所描述的產出

<div class="wrapper">
<div class="ring">
<div id="top" class="wing"></div>
<div id="mid" class="wing"></div>
<div id="last" class="wing"></div>
</div>
<div class="mouth"></div>
<div class="neck"></div>
<div class="stick"></div>
</div>

這邊會透過 id 的方式去調整那三個羽毛的長短以及相對位移位置,那麼我們先來處理外層和 wrapper 的部分:

body {
margin: 0;
display: grid;
place-items: center;
background: #161616;
}
.wrapper {
width: 20px;
height: 20px;
border-radius: 50%;
border: 20px solid #A22015;
position: relative;
}

這裡會將 wrapper 調整成 position: relative; 主要是方便後面調整其他色塊匡時有比較直覺的參照點,接下來我們來處理白色環形和羽毛的部分:

.ring {
width: 30px;
height: 30px;
border-radius: 50%;
border: 10px solid #FFFFFF;
translate: -15px -15px;
position: relative;
}
.wing {
height: 12px;
background: #FFFFFF;
position: absolute;
border-radius: 0 0 0 50px;
}
#top {
width: 55px;
translate: -55px -3px;
}
#mid {
width: 40px;
translate: -40px 9px;
}
#last {
width: 25px;
translate: -25px 21px;
}

這個部分可以透過平台的工具去計算寬度,位移的話會依照上面一層的 content 位置去長內層的內容,也就是說我如果要讓圓心重疊,那麼我就必需位移半徑長度的位置,算是一個計算上的小技巧,可以縮短你來回使用工具的時間。

羽毛的計算就比較土法煉鋼,除了高度以外(可以利用已知的高度計算),剩下還得靠工具輔助。

上面處理完之後,剩下的色塊就相較容易許多,使用方法如下:

.mouth {
width: 70px;
height: 40px;
background: #E96A23;
position: absolute;
translate: 20px -61px;
border-radius: 0 40px 5px 0;
z-index: -1;
}
.neck {
width: 30px;
height: 30px;
background: #A22015;
border-radius: 0 0 10px 10px;
translate: -5px -17px;
position: absolute;
z-index: -1;
}
.stick {
width:20px;
height:200px;
background: #E96A23;
position: absolute;
z-index: -2;
}

基本上還得靠點經驗才做得快一點,尤其是對於 border-radius 大小的判斷,剩下的操作和前面基本上是大同小異,最後再調整一下 z-index 就能完成了。

技術總結

這題主要考的應該就是圖層堆疊的使用,有部分是關於圖形解構的能力,如果 position 沒有定位好的話,可能會花很多時間在調整位移,再來就是對 border-radius 的熟悉度,有經驗的話應該猜的到大概是多少大小,但如果面試真的遇到這類題目,要有心理準備會花比較長的時間來處理位移定位,那麼以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !

avatar-img
1會員
22內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Lee Luciano的沙龍 的其他內容
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
在CSS Battle的第153題,我們會使用grid、css選擇器、偽元素等技巧來解決西洋棋盤的排版問題。這篇文章分享了完整的解法,包括選擇器使用、偽元素的應用以及其他排版技巧,並激勵讀者分享自己的解法。
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。
這篇文章將解析CSS Battle第136題的解法,主要考驗基本CSS置中排版的能力,並提供了作者的解法與技術總結。透過互動學習,讓想要學習或練習基礎切版的朋友可以參與討論。
本篇文章介紹了 CSS Battle 第 163 題的解法,並分享了作者的實際操作方法。透過使用 gird 排版、before & after 搭配 overflow: hidden 等修飾來創建多邊形。這篇提供了基本的 CSS 切版技術以及解法分享。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
在CSS Battle的第153題,我們會使用grid、css選擇器、偽元素等技巧來解決西洋棋盤的排版問題。這篇文章分享了完整的解法,包括選擇器使用、偽元素的應用以及其他排版技巧,並激勵讀者分享自己的解法。
本篇文章分享了 CSS Battle 的題目 #160 的解法,並講解了對於前端工程師基礎切版的重要性和技術總結。
這篇文章將解析CSS Battle第136題的解法,主要考驗基本CSS置中排版的能力,並提供了作者的解法與技術總結。透過互動學習,讓想要學習或練習基礎切版的朋友可以參與討論。
本篇文章介紹了 CSS Battle 第 163 題的解法,並分享了作者的實際操作方法。透過使用 gird 排版、before & after 搭配 overflow: hidden 等修飾來創建多邊形。這篇提供了基本的 CSS 切版技術以及解法分享。
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
那陣子的每週三下午,都是令我最期待的一刻。 上完半天的課程後,我火速回家,換個衣服,吃點簡單的午餐,拾起裝備,再衝回去與他們玩耍。
Thumbnail
華燈拍攝的年代,大約是我三、四年級的時候,當時好流行吹高角度,我覺得好漂釀🥰🥰🥰從小擁有實驗精神的我,吵著媽媽幫我買罐果凍髮膠、尖尾梳,利用星期三讀半天的下午,自己想辦法法吹出「夢幻高角度」。輕而易舉的,我破解了高角度的做法,每個星期三下午,我都讓自己頂著美美高角度,在家附近閒晃。 這一天,
週三又是三堂課的日子,早上在九如上活氧舒展(Jun)和熱血戰鼓(Alan),下午在博愛上熱力燃脂(Owen)。 相對靜態,又有練到平衡、肌力和伸展的活氧舒展,對我來說本季是替代樂活瑜珈的一堂課,音樂很好聽,上課很享受。今天有帶新動作,Jun說如果這動作讓屁股很酸,就要去上超能55,呵呵~我不由得會心
Thumbnail
被遺忘的《愛登士家庭》 在本公子的記憶中,跟《愛登士家庭》的初接觸應該是小學時期,曾在電視上看過一些片段。
Thumbnail
今天來聊聊復古作品的延伸新作《星期三》,即使不記得舊作故事,或許也記得經典的家族合照和片頭曲的第一小節!是個很抓眼球的作品
Thumbnail
雖然這幾天持續低溫特報,桃園觀音的風勢也特別大,但這一天孩子卻特別認真於課堂活動,讓老師覺得欣慰。
Thumbnail
「你知道我為什麼喜歡喝威士忌嗎?威士忌源自uisge beatha這,意指「生命之水」……給人生命與活力的水,那不是很美好嗎?」
Thumbnail
這個月開始,我參加了作家朋友帶領的線上讀書會,這一週,她以自己的著作《親愛的,你好》一書中的一篇文章〈我姓白,名老鼠〉為主題,讓大家以醫學這個傳統的權威角色,透過書寫來審視自己的權威議題。
Thumbnail
簡介: 七種不同人格在一個人體內輪流出現,一週中交換醒來。有一天,普通、沒有特別嗜好的星期二突然在星期三時醒來,他發現,星期三不見了。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
那陣子的每週三下午,都是令我最期待的一刻。 上完半天的課程後,我火速回家,換個衣服,吃點簡單的午餐,拾起裝備,再衝回去與他們玩耍。
Thumbnail
華燈拍攝的年代,大約是我三、四年級的時候,當時好流行吹高角度,我覺得好漂釀🥰🥰🥰從小擁有實驗精神的我,吵著媽媽幫我買罐果凍髮膠、尖尾梳,利用星期三讀半天的下午,自己想辦法法吹出「夢幻高角度」。輕而易舉的,我破解了高角度的做法,每個星期三下午,我都讓自己頂著美美高角度,在家附近閒晃。 這一天,
週三又是三堂課的日子,早上在九如上活氧舒展(Jun)和熱血戰鼓(Alan),下午在博愛上熱力燃脂(Owen)。 相對靜態,又有練到平衡、肌力和伸展的活氧舒展,對我來說本季是替代樂活瑜珈的一堂課,音樂很好聽,上課很享受。今天有帶新動作,Jun說如果這動作讓屁股很酸,就要去上超能55,呵呵~我不由得會心
Thumbnail
被遺忘的《愛登士家庭》 在本公子的記憶中,跟《愛登士家庭》的初接觸應該是小學時期,曾在電視上看過一些片段。
Thumbnail
今天來聊聊復古作品的延伸新作《星期三》,即使不記得舊作故事,或許也記得經典的家族合照和片頭曲的第一小節!是個很抓眼球的作品
Thumbnail
雖然這幾天持續低溫特報,桃園觀音的風勢也特別大,但這一天孩子卻特別認真於課堂活動,讓老師覺得欣慰。
Thumbnail
「你知道我為什麼喜歡喝威士忌嗎?威士忌源自uisge beatha這,意指「生命之水」……給人生命與活力的水,那不是很美好嗎?」
Thumbnail
這個月開始,我參加了作家朋友帶領的線上讀書會,這一週,她以自己的著作《親愛的,你好》一書中的一篇文章〈我姓白,名老鼠〉為主題,讓大家以醫學這個傳統的權威角色,透過書寫來審視自己的權威議題。
Thumbnail
簡介: 七種不同人格在一個人體內輪流出現,一週中交換醒來。有一天,普通、沒有特別嗜好的星期二突然在星期三時醒來,他發現,星期三不見了。