阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 02月14日

CSS 卡通

標題: CSS 卡通

發表：真實

描述：comiCSS 本週兩歲了。為了慶祝，我出版了每日漫畫，為這個重要的日子做準備。這是這七部漫畫的收藏。

標籤： css,webdev,showdev

封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa95c4u6o8475xxwl3kz.png

canonical_url：https://alvaromontoro.com/blog/68051/css-cartoons-for-comicss-second-anniversary

發佈時間：2024-02-08 09:00 +0000

comiCSS本週兩歲了。為了慶祝，我出版了每日漫畫，為這個重要的日子做準備。這是這七部漫畫的收藏。

comiCSS 是一部關於 CSS 編碼的 CSS 漫畫。是的，漫畫和卡通都是用 HTML 和 CSS 編碼的（有幾個 SVG 例外，它們也在內部使用 CSS）。是的，我已經這樣做兩年了。為什麼？因為它很有趣，所以它們可能很愚蠢，但是，希望它們也具有教育意義（有些比其他的更有教育意義）……因為，為什麼不呢？

這是我本週製作的漫畫集。我希望你喜歡他們。

h2 id =「雲端開發人員」>

雲端開發者

一個人使用電腦的卡通，背景中有云，旁邊是一個有以下 CSS 程式碼的方塊：.cloud-developer { background: azure;隔離的英文休息：無；壓力：100；內容：無； }

有趣的事實：這部動畫片中的背景顏色是真正的「天藍色」。

h2 id="國王">

國王

一個留著鬍子、頭戴王冠、手持權杖的男人的卡通畫，旁邊是一個帶有以下 CSS 程式碼的框： .king {position:absolute;豐富度：100；顏色：寶藍色； :first-child { 所有：繼承； } }

有趣的事實：國王的長袍是「寶藍色」的。這部漫畫是該系列所有漫畫中在社群媒體上最成功的一部。

h2 id="歌劇魅影">

歌劇魅影

歌劇魅影的卡通（一個披著斗篷、戴著面具遮住臉的男人）手拿一朵玫瑰，旁邊有以下 CSS 程式碼：#phantom-of-the-opera { mask:url(#face);背面可見性：隱藏；可見性：隱藏；音高：低；音量：柔和； }

我喜歡這個想法，但實施需要更充分。我仍然認為它有潛力...也許改天我可以改進...

h2 id =「獲勝者」>

優勝者

卡通畫中，一個人舉起手臂舉起獎杯，而五彩紙屑落在他們周圍。場景旁邊有以下 CSS 程式碼：#winner { order: 1;跑步：第一；顏色: 金色; &::after { 內容: '獎盃'; } }

有人建議關於ABBA 的《勝者為王》，內容應該是「全部」……而我討厭我自己沒有考慮到這一點。儘管如此，我還是保留了獎盃。

h2 id="獨裁者">

獨裁者

獨裁者：一個穿著軍裝、戴著獎章、戴著太陽眼鏡的簡約卡通人物，旁邊是以下 CSS 程式碼： .dictator {position:fixed!important;將改變：順序！重要；不透明度：0！重要；邊框：雙實心！重要； .country:has(&) :not(.supporter) { will-change: 孤兒，寡婦！重要;翻譯：100vmax 0！重要； } }

這部漫畫比我以前出版的漫畫更黑暗。直到最後一刻我才懷疑是否要刪除orphans和widows的提及。

h2 id="籃球運動員">

籃球運動員

籃球運動員：一個人用一根手指旋轉籃球的簡約卡通畫，旁邊有以下 CSS 程式碼： .basketball-player { 海拔：更高；最小高度：75 英吋；最大高度：91 英吋；將改變：位置；玩期間： url(#game);位置：跑動（球）；流：'進攻'； }

有趣的事實：NBA 有史以來最高的球員（迄今為止）是馬努特·波爾（Manute Bol），他身高7 英尺7 英寸……或91 英寸。對一個大塊頭球員來說，這只是一個小小的眨眼。

h2 id =「太空人」>

太空人

太空人：一個穿著太空人服的人的簡約卡通，裡面有很多星星。背景。緊接著以下 CSS 程式碼： .astronaut { elevation: 上方;隔離的英文流自：太空船；流向：外太空；過渡：浮動； }

我對兩個選擇器之間的懷疑： .astronaut和#MajorTom 。 CSS 可以描述David Bowie 的 Space Oddity ，但採用了更明顯的選項。

我喜歡這種風格和格式，我可能會繼續畫這樣的漫畫……但速度會放慢。除了常規的 CSS/Web 開發漫畫之外，可能每週更新一次。

同時，如果您喜歡這些漫畫，請存取comiCSS網站並關注Twitter或LinkedIn上的帳戶以獲取更新。或成為 Patreon 的支持者並幫助該專案。

原文出處：https://dev.to/alvaromontoro/css-cartoons-29bp

0個讚 0留言 190瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

CSS 卡通

CSS 卡通

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！