Ming Apps

Posts Tagged ‘css3

網址: CSS3 media queries

css3 media queries screenshot

編寫行動版的網頁上,

一向的做法多是利用兩個domain,

例如yahoo.com以及m.yahoo.com這種方式,

跟著便著手設計兩邊的網頁介面~

有些人覺得麻煩,

何解mobile version的網頁,和本來的網頁要分開設定和設計,

何不將之合併?

CSS3 media query應運而生了~!

大家試到以下的網頁~

http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

http://colly.com/

http://www.edmerritt.com/

http://2010.dconstruct.org/

然後試試將你的瀏覽器(Browser)的闊度(Width)縮小。

你會發現,

他們每一個介面都會隨著不同的大少而改變Layout Design!

有的將Menu移位由右到頂,

有的索性將背景圖片隱藏,

整個頁面變成只可上下拉動~

是否很有趣呢?

原來他們正運用了CSS3 Media Queries的技巧,

在瀏覽器不同闊度的情況下顯示不同的CSS~

聽起來Concept很簡單,

但,

辛苦了UI Designer了吧?

教學方面大家可以到這個中文教學:QK-style的網站!~

英文的則可以到這個Fun with Chameleon~

寫的教學簡單清楚~

馬上試試看~!

標籤: , , ,


HTML5 Powered with CSS3 / Styling

CSS3加埋HTML5同Javascript,

效果千變萬化,

令你的網站毫不一樣!

Buttons 按鈕!

Sweet CSS3 Buttons
Ming Apps Sweet CSS3 buttons example

CSS3 Toggle Button Without JavaScript
Ming Apps CSS3 Toggle Button Example

Pure CSS3 Download Button
Ming Apps Pure CSS3 Buttons Example

CSS3 Button Maker
CSS3 Button Makers

CSS3 Gradient Button Generator
CSS3 Gradient Buttons Generator Screenshot

Switchs 開關制!

CSS3 jQuery Switcher
Ming Apps CSS3 jQuery Switcher Screenshot

iOS Style Sliders
Ming Apps CSS3 iOS Slider Screenshot

Links and Menu 超連結及選單 !

CSS3 popup links
Ming Apps CSS3 popup links screenshots

CSS3 Dropdown Menu
CSS3 Drop down menu screenshot

CSS3 Menu Creator
CSS3 Menu Creator

Maps 地圖!

Worldview
Ming Apps WorldView Screenshots

Map Pins
Ming Apps Map Pins Screenshot

希望對大家有用~

學習更多css3的實用功能吧!


HTML5 Powered with CSS3 / Styling

如何利用CSS3讓不同的DOM加入影子效果呢?

Step 1: 在head的style中加入以下code:

註: 0px 0px 30px #ccc

第一個數值為影子的x-coordinate,

第二個則是y-coordinate,

第三個是影子長度,

第四個為影子的顏色。


.box_shadow {
-moz-box-shadow: 0px 0px 30px #ccc; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 30px #ccc; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 30px #ccc; /* Opera 10.5, IE9, Chrome 10+ */
}

Step 2: 在body中的DOM加入你的class name

<div class="box_shadow">Ming Apps!</div>

Step 3: 完成!

示範網頁: ming-apps-css3-tutorial-box-shadow-demo.htm

Website: http://prefixmycss.com/
Ming Apps - prefixmycss.com

免費 CSS3 工具介紹!

呢一個網頁主要方便大家將你既CSS3 reformat(重新排序)!

大家可以試一試,

佢會自動加入cross-browser compatibility 的css3 code,

以及加入相應的comment(vendor-prefixes),

看來非常好用!


HTML5 Powered with CSS3 / Styling

示範 Demostration:
ming-apps-css3-round-corner.htm

Step 1: 加入以下Source code於Header中:


.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 */
  border: 5px solid #ccc;
  width: 100px;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
}
.box_round_2 {
  -moz-border-radius: 12px 0px 36px 24px; /* FF1+ */
  -webkit-border-radius: 12px 0px 36px 24px; /* Saf3-4, iOS 1+, Android 1.5+ */
  border-radius: 12px 0px 36px 24px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  border: 5px solid #ccc;
  width: 100px;
  text-align: center;
  padding: 15px;
  margin: 10px auto;
  background-color: #ccc;
}

Step 2: 在div等tag name中加入class name box_round or box_round_2:

<div>Ming Apps HTML5!</div>
<div>CSS3 Round corner!</div>

Step3: 完成!

Ming Apps CSS3 tutorial round corner demo

大家可以嘗試改變Color值以及round corner四個corner的radius值改變四角的彎度!

標籤: , ,

前兩篇都以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>
標籤: ,

%d 位部落客按了讚: