Ming Apps

CSS3, please! – HTML5

Posted on: 2011/03/30

前兩篇都以iOS為主題,

其實我對網頁技巧都有相當多的興趣~

 

大家可以click入去右手邊既links,

看看iAccessories,

入面我有嘗試利用一些CSS3的技術,

去設定一個比較具現代Cyber感覺的介面。

 

大家可能會擔心HTML5 / CSS3的技術可能並不具Cross Browser Compatibility,

我倒認為現時Broswer經已經非常接納HTML5技術,

Support HTML5的IE9 亦已經推出了,

CSS3更不用多說,

只是不同的瀏覽器對CSS3 兼容上需要以不同的Syntax,

凡是想利用CSS3 整round corner都可能需要search很多才知道每個Browser的Syntax.

 

現在大家可以利用CSS3PLEASE的網站查閱所有Browser的設定,

各大主要瀏覽器: Google Chrome, Mozilla Firefox, Safari, Opera,

就連Android mobile都已經經過測試,

只需要打入相應的數值便成。

 

例子:

CSS part


.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
}

HTML Part

<div class="box_round">Testing for round corner box</div>
標籤: ,

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: