底下的那朵花、當滑鼠滑過時、花瓣的顏色會變成紫色。以往、如果我們想要實現這樣的效果、需要準備二張圖片，現在我們只要使用CSS Filters濾鏡效果就可以輕鬆達成。
CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。 Read More
CSS濾鏡效果
CSS 陰影效果的比較：Drop-Shadow 與 Box-Shadow
使用drop-shadow 可以幫透明圖片添加下拉式陰影
drop-shadow 與 box-shadow 都是陰影效果(光暈效果)的css屬性，二者最大的不同點在於： box-shadow只能製作矩形的陰影，而drop-shadow則可以製作和物件不透明區域完全相同形狀的陰影。底下是二個css屬性(property) 的用法： Read More
如何使用 Open Graph, Twitter Card 自訂網頁在 Facebook, Google, Twitter… 的顯示內容
當有人在Facebook, Google+, Twitter這些社群網站平台分享您網站的內容時，這些社群網站會自動從我們的網站中抓取分享的資訊。但這些自動抓取的資訊不見得符合網站的內容，因為社群網站只能猜測哪些內容重要、哪些不重要。若是可以由我們自己決定分享的資訊，是不是可以更符合網站的內容呢？如果希望可以控制分享的資訊該怎麼做呢？這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。
Read More
如何使用HTML5 <picture>實現響應式圖片
<picture>是一個新的HTML5標籤、我們可以使用它來設定在不同條件下(螢幕寬度、高度、方向、像素密度)載入不同的圖片。
當我們在設計響應式網頁時、對於圖片的處理方式通常會使用較高解析的圖片、再利用CSS將圖片縮小以符合小螢幕的畫面。以下的CSS可以將圖片限制在範圍裡、並且能夠維持圖片的長寬比例。
img {
max-width: 100%;
height: auto;
}