為Logo製作節日小彩蛋 — 聖誕帽
聖誕節剛過,拿掉彩蛋前突然想分享一下,如何用超簡單方式為你的Logo戴上一頂聖誕帽。
Published in
3 min readJan 10, 2020
小彩蛋的目的是為節日增加一點趣味。這次會想到為 Logo 加上一頂聖誕帽是因為前一年發生的 Ant-Design 彩蛋事件 ho-ho-ho。
科普一下,Ant Design 是一個 UI 的函式庫,由阿里巴巴旗下的螞蟻金服團隊所做,定位跟 Material UI、Bootstrap 差不多,幫你打造好各種 UI,直接用起來或是基於他們制定自己的 Style,不需要重複造輪子。幫大大小小的公司省了很多時間。(順便一提,托特是用 Uber 團隊出的 baseui)
2018年的聖誕節很多公司的網站突然變得很怪,甚至壞掉。原來是 Ant Design 在聖誕節當天放了彩蛋:按鈕出現了聖誕節的樣式,Tooltip 放上了 Merry Chrismas 的字樣… 你沒看錯,Chrismas 拼錯 :)後果因為太多公司用了 Ant Design,所以當天很多人被 call 起來加班,有些人聽說還被開除了。
回到正題,這次要加的彩蛋很簡單,過程就是:
- 找一張免費的聖誕帽圖(用別人的圖記得 Credit 作者)
- 用個 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 —