Tag: css

Smooth Touch Scrolling in iOS with -webkit-overflow-scrolling

Posted by – April 17, 2015

在開發一個兼容 iPad 的網站專案時,發現 <div style="overflow: scroll;"> 在 iOS 下捲動很不順暢,手感很糟糕。好奇地搜尋了一下,找到一個 webkit 特有的語法:-webkit-overflow-scrolling: touch。加上這個屬性後,在 iOS Safari 上連回彈的效果都出來,手感與原生程式無異。

可惜 Android 上的 Chrome 似乎沒有作用,有點希望這屬性能成為正式語法。

範例先丟在 Codepen,不過看來要註冊才能 embed,先醬。
http://codepen.io/anon/pen/oXvjvJ

Pure CSS One Div Weather Animated Icons

Posted by – July 17, 2014

用純 CSS 做出來的天氣動畫圖示,真厲害

See the Pen Pure CSS One Div Weather Animated Icons by Fabrizio Bianchi (@fbrz) on CodePen.

Bookmark: CSS Text Filling With Water

Posted by – November 13, 2013

用 CSS 與 Javascript 模擬出液體填充的效果,附上實際的效果。

See the Pen CSS Text filling with water by Lucas Bebber (@lbebber) on CodePen

CSS Text filling with water - CodePen

Bookmark: CSS Number Scroll

Posted by – November 13, 2013

用 CSS 和 Javascript 製作數字轉動的效果,還沒用過,先留個書籤。

css_number_scroll

CSS Number Scroll

Bookmark: CSS ARROW PLEASE!

Posted by – August 12, 2013

CSS ARROW PLEASE! 是一個相當簡潔有力的服務,用 CSS 產生帶有箭頭的框框,可以省下自己刻的時間,方便啊。

css_arrow_pls

Creating Retina Images for Website

Posted by – October 15, 2012

最近在撰寫一個給 iOS UIWebView 用的迷你網站,在等待設計師繪製網站圖片的時候,好奇地看起來了一些關於視網膜螢幕 (retina display) 的資料。順便找了些用 CSS 顯示 retina image 的資料。

感謝行動平台上的瀏覽器對 CSS3 的普遍支援性,透過 CSS3 的 media queries 來分辨平台就可以切換內容了。

.navbar {
	background-image: url('../img/button01.png');
	background-size: 320px 49px;
}

/* -- for Retina Display -- */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and    (-moz-min-device-pixel-ratio: 2),
       only screen and      (-o-min-device-pixel-ratio: 2),
       only screen and         (min-device-pixel-ratio: 2) {
	.navbar {
		background-image: url('../img/button01@2x.png');
		background-size: 320px 49px;
	}
}

檔案命名依慣例在高解析度圖的檔名後面附加 @2x 文字做為辨識,小圖是 320px x 49px,大圖是 640px x 98px,後者指定為顯示一半大小。這樣的寫法會先累到設計師,各種圖示、影像,凡是要支援高解析度的素材都要準備兩套。要注意的是以上的寫法因為一般圖 (Line 1 ~ 4) 並沒有用 @media 包起來,所以要寫在 @media 前面,不然會因為 CSS 先後順序的關係造成只讀一般圖片。

Bookmark: Google HTML/CSS Style Guide

Posted by – May 29, 2012

這是 Google 的 HTML / CSS 編寫指南,用以解決大型專案或多人開發情境下程式碼風格混亂的現象。內容淺顯易懂,部份寫法是針對 HTML5 最佳化。
 
updated on 2017/02/03 :

Google HTML/CSS Style Guide

 

CSS: How To Use @font-face

Posted by – December 17, 2011

過去在開發網站時,字體的選擇一直都很保守,因為每個瀏覽器與作業系統對字型的支援很有限,幾乎就那幾種安全字型可以用。不過自從 CSS 多了 @font-face 這個指令後,事情開始有了些微的變化。@font-face 允許設計師在 CSS 指定特殊別的字型,瀏覽器會根據設定去下載這個字型來顯示,就像 background-image: url('link/to/image'); 一樣,瀏覽器會下載背景圖來顯示。 More

Image Problems in HTML Emails

Posted by – November 30, 2011

身為一個 PHP 工程師,寫過好幾支 Email 程式也是很正常的經歷,尤其是寄送廣告傳單 EDM 之類的功能。EDM 還是很多公司行號及機關愛用的行銷模式。美術人員製作 EDM 的時候通常會將廣告內容製成一張大圖,然後根據各個連結或功能來切割圖片,最後用表格 <table> 標籤來排版。雖然聽起來很古老,不過因為在 Email 裡能使用的 HTML、CSS 有限,所以老派的做法有其優點。 More

WordPress: Fix Syntax Highlighter MT Vertical Scrollbars in Chrome/Webkit/Opera

Posted by – September 21, 2011

本部落格有裝了一個 WordPress plugin: Syntax Highligter MT,用來顯示程式碼片段,效果很好。不過自從某次更新後,在 Chrome 和 Opera 瀏覽器裡卻會出現垂直的捲軸,這並不影響使用,但是明明沒有多餘的內容要顯示,卻硬生生多了 scrollbar,實在是有礙觀瞻。

More