Ming Apps

Archive for the ‘CSS3’ Category

網址: 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值改變四角的彎度!

標籤: , ,

%d 位部落客按了讚: