CSS3動畫已足夠強大，不過還是有一些它做不到的地方。配合SVG，讓Web動效有更多的可能性。這次要做的效果是一個loading動畫（如圖）：其中旋轉通過CSS來完成，但是旋轉之後圓弧縮短變成笑臉的嘴巴需要借助SVG來實現。

近年來，隨著移動端對視口單位的支持越來越成熟、廣泛，使得我們可以嘗試一種新的辦法去真正地適配所有設備尺寸。

自從去年下半年開始，CSS Grid佈局的相關教程在互聯網上就鋪天蓋地，可謂是聲勢浩大。就針對於Web佈局而言，個人認為Grid佈局將是Web佈局的神器，它改變了以往任何一種佈局方式或者方法。不管以前的採用什麼佈局方法都可以說是一維的佈局方式，而Grid最大的特色，採用了二維佈局。@Rachel Andrew也一直致力於完善Grid的規範。

CSS Grid VS Flexbox：實例對比

Sticky Footer，完美的絕對底部

佈局是CSS中一個重要部分，本文總結了CSS佈局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列佈局、多列佈局的多種實現方式（包括傳統的盒模型佈局和比較新的flex佈局實現），希望能給需要的小夥伴帶來一些幫助。

現今移動裝置盛行，有各種不同螢幕大小的裝置來瀏覽網站， 若在網站上要內嵌入Google地圖（ Google Maps ）， 如何讓地圖可以根據瀏覽裝置的螢幕大小自動調整地圖嵌入大小呢？

above the fold 的原來意義以及在網頁設計裡的意義。

Bootstrap 利用圖片(image)來觸發 modal 視窗

利用HTML data屬性來達成純CSS響應式Table

現今移動裝置盛行，有各種不同螢幕大小的裝置來瀏覽網站， 若在網站上要內嵌入Youtube的影片， 要如何讓該影片可以根據瀏覽裝置的螢幕大小自動調整影片嵌入大小呢？