FB event: https://www.facebook.com/events/173472326462938/
GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-01-07

第二次聚會也還是在咖啡廳裡~
只不過不太適合打電腦的店 嘖嘖

這次的主題依舊是 Pokemon Go UI 擇一
因為其實認真看的話，還不少頁，
而且更重要的是，RWD 做得真的不是很好 XDDDD
( 但 app 固定螢幕方向後可以無視 RWD 就是 )

1 ]

我當時選的是 Dialog system
因為滿多資訊都是透過隊長的 dialog 做呈現，
所以就想說來自己來刻一個試試
成品如下 (我不是藍隊的！)

[Pokemon Go UI] Dialog
https://codepen.io/Rplus/pen/wgapbw

這個 Dialog UI 比較有趣的點是：
敘述者人相的定位，需要在不同視窗尺寸下維持位置。

一開始真的是想不到會卡在這邊 XD
原本以為是隨便定個百分比就可以放水流的事情，
結果在不希望塞一堆無意義的 media-query 的情況下，
使用了比較新的 background-position four-value syntax
可以設定背景圖偏移量的相對邊界是哪個方向 (預設是上 & 左)
例：

background-position: left 10px top 80px;
// 等同於以前直接設 10px 80px
background-position:      10px     80px;

細節可以去看 MDN: CSS > background-position
支援度看起來是還不錯啦，連 IE9 都看得懂真的超乎我的意料之外 XDDD

定位那邊也有搭配 viewpoint unit 跟奇妙的數學算式兜在一起
最後總算是能在不同尺寸下都能妥妥地塞好塞滿

相對地，Dialog 框框跟圖示的定位就比較基礎

圖示的尺寸因為限定為圓形，所以有用 object-fit 固定一下比例
這邊也有用 :not(:empty) 直接控制不同狀態的樣式，
讓樣式直接相依於內容而不是外部給定的狀態 class
可以試試不要放圖示~

Dialog 框框主體的陰影當時是使用 box-shadow 來處理，
現在看來，或許全都一起用 filter: drop-shadow() 來讓小三角也能有一致陰影似乎也不錯

這期回顧了一下，還記得一些別人做的 XD

2 ]

Pokemon Go achievement UI
by Neko
https://codepen.io/touneko/pen/egpWre

Neko 做的這個獎牌頁真的是瘋強！

分享時，看到那個六角螺絲帽竟然是用 CSS 直接刻的 XDD
真的是驚呆了！真的是超有心又超猛的！哈哈哈

他這邊是用 clip-path 直接切出六角形，算是直球對決

獎牌是個會重覆使用的 UI，
若有要 refactor 的話，可以試試引入 CSS Variables 來控制元件尺寸

3 ]

Rulin 的長脖子椰蛋樹
https://codepen.io/rulinshyu/pen/RKPxGM

• 隊徽分層來套用透明度算滿好用的技巧
• UI 高度計算有點失誤、椰子樹盡量可以垂直置中
• footer 的 button 理論上應該是要直接用絕對定位

4 ]

Ted 刻了兩個 UI，一個是物品列表、一個是日誌列表

物品列表是直接使用 pure.css 的 grid system
日誌列表則是用 CSS table layout，但左右欄沒有設定 spacing，容易造成子元件不對齊的狀況~

另外就是 Mac 開發者有時要留意一下 scrollbar 是否出現唷 XDD

第二次小聚就這樣啦~
明兒見~