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

48. 範例說明

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的設定

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

---

49. 上課影音

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

---

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

---

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

---

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

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

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

---

51. 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-色彩單位-(