為Logo製作節日小彩蛋 — 聖誕帽

聖誕節剛過，拿掉彩蛋前突然想分享一下，如何用超簡單方式為你的Logo戴上一頂聖誕帽。

小彩蛋的目的是為節日增加一點趣味。這次會想到為 Logo 加上一頂聖誕帽是因為前一年發生的 Ant-Design 彩蛋事件 ho-ho-ho。

Ant Design - 一套企业级 UI 设计语言和 React 组件库

科普一下，Ant Design 是一個 UI 的函式庫，由阿里巴巴旗下的螞蟻金服團隊所做，定位跟 Material UI、Bootstrap 差不多，幫你打造好各種 UI，直接用起來或是基於他們制定自己的 Style，不需要重複造輪子。幫大大小小的公司省了很多時間。（順便一提，托特是用 Uber 團隊出的 baseui）

2018年的聖誕節很多公司的網站突然變得很怪，甚至壞掉。原來是 Ant Design 在聖誕節當天放了彩蛋：按鈕出現了聖誕節的樣式，Tooltip 放上了 Merry Chrismas 的字樣… 你沒看錯，Chrismas 拼錯 ：）後果因為太多公司用了 Ant Design，所以當天很多人被 call 起來加班，有些人聽說還被開除了。

回到正題，這次要加的彩蛋很簡單，過程就是：

1. 找一張免費的聖誕帽圖（用別人的圖記得 Credit 作者）
2. 用個 CSS 偽元素把聖誕帽橋上去…，可能都不需要改 HTML

例子如下：

我們在 logo 加上 position: relative，然後做一個偽元素 after，在裡面放上position: absolute 的聖誕帽就行。

.logo {
  position: relative;
}
.logo:after {
  transform: rotate(45deg);
  background-image: url(https://firebasestorage.googleapis.com/v0/b/thoth-f591c.appspot.com/o/christmas-hat.png?alt=media&token=27f45f0e-6aa2-40e0-99d2-19b322fbc6ae);
  background-size: 50px 50px;
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  left: 80px;
  top: -28px;
}

— END —

技能交換、讀書會、家教｜知識分享平台｜托特 thoth