Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探

1. 範例說明


http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面,並且嘗試CSS3的設定

請延續上個主題的內容,將之完成,作為期中作業



2. 上課影音


4/8上課影音
CSS3圓角做法
http://youtu.be/_Z_QPEDPiRg




CSS3漸層與陰影
http://youtu.be/i0NtLm4Ukyg




LINKS頁面設定
http://youtu.be/ftl3wyXcB5U




3. 內頁實作篇-連結頁面


僅供參考,內容及設定請自行修改
新增之HTML部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

新增之CSS部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt



4. CSS3語法初探



參考講義:
[CSS3/IE filter] 漸層背景 Gradient Background
http://mepopedia.com/forum/read.php?844,17157

CSS3實作即時語法請參考
http://www.css3maker.com/

1. 邊框圓角語法


可自行調整數值

四邊圓角皆一致
-moz-border-radius: 10px; -webkit-border-radius:10px; border-radius: 10px;
只有下方圓角
border-radius: 0 0 10px 10px;



2. 漸層語法


radial為放射式漸層
linear為線性漸層
可自行調整數值,但須注意整體畫面質感
background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))


3. 邊框陰影語法


請自行調整數值
請注意,勿誇張
-moz-box-shadow: 1px 0px 7px #333333; -webkit-box-shadow: 1px 0px 7px #333333; box-shadow: 1px 0px 7px #333333;


4. 文字陰影語法


請自行調整數值
請注意,勿誇張
text-shadow:1px 2px 1px #000000;


5. 透明背景語法


1. 內部所有物件皆透明opacity


不透明度80%
opacity: 0.80; filter:alpha(opacity=80);

2. 僅背景透明 rgba 及 hsla


rgba 及 hsla 為 CSS level 3 (CSS 3) 起,新一代表示色彩的單位 (color units),最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值;顏色的指定,當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等

rgb值
可以是0~255的整數值,與一般 位元顏色的十進位值相同,惟這類表示法不接受十六進位值(如ff,8c);也可以是0%~100%的百分比值。所以例如,rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。

alpha 值 (alphavalue)
0.0 ~ 1.0 允許小數一位的數值, 0 →完全透明, 1 →完全不透明, 0.7 → 70% 不透明。

background: rgba(40%,0%,0%,0.4); border-bottom: 20px solid rgba(50%,20%,30%,0.4); border-left: 60px solid rgba(50%,20%,30%,0.4);
*資料來源:
http://blog.xuite.net/andy19890411/Orz/37407628-【CSS】半透明效果+-+CSS3+rgba,+hsla,+filter,+-ms-filter
http://boohover.pixnet.net/blog/post/20556952-半透明與透明效果設計-css-rgba,-hsla-色彩單位-(



Edited 8 time(s). Last edit at 04/16/2015 11:49AM by JinJin.
(編輯記錄)