UI小細節，做了文字陰影，反白時記得拿掉 ::selection 1
雖然目前還不是標準CSS，但是大部分都能用了 ::-moz-selection, ::-webkit-selection, ::selection { text-shadow: none; background: #333; //不一定要，反白時的背景色 color: #fff; //不一定要，反白時的字色 }
設計
[新手前端]CSS3動畫效果 transition, animation 2
簡介CSS3 裡的動畫效果，其實… 是W3C的文件精簡翻譯版 另附神人範例說明。 CSS3的動畫效果可以藉由CSS的 keyframe 參數來控制動畫的 期間、重覆及重覆的模式例如重覆次數、起始延遲、暫時停止。 支援度，標準化進行中。現行的瀏覽器都支援包括IE10，但還是要加上prefix。 CSS3發佈的 transitions提供了參數可以製作簡單的動畫效果。其動畫效果是由起始參數及結束時的參數所決定。transitions 只是提供設計師一個可以指定中間過度動畫的方法。 animation和transitions最大的不同在於，tansitions是當參數改變時觸發，而animation則是直接就執行，所以動畫效果需要明確的指定關鍵影格的參數。
[新手前端]從平面設計前進 CSS-9 字型
今天來講 CSS 如何控制HTML內的文字 font-style 字型 首先在文字設定時最基本的- 表示為 font-style: “新細明體” ,helvetica ,serif; 可以指定多組不同的字型在同一個元素上，因為字型會因為每個使用者電腦的狀態不同而出現缺少這個字型的情況，所以CSS裡可以用兩種指定方式來設定字型，如果使用者電腦裡沒有這個字型，就會用下一種，所以第一種就是字型的名字像是”新細明體”、”華康中黑體”，使用時要用”” 把字型名稱包起來。 另一種就是 serif sans-serif cursive fantasy monospace 這幾個是字型的基本樣式，學過設計的都知道，字體有幾種基本的差別，襯線有無、粗細、圓字、黑體、等寬，另一種就是單純指定形式，然後電腦就會去系統裡找最類似的來使用，就是傳說fallback啊!!
[新手前端]從平面設計前進 CSS-8 背景及overflow
今天來講最常用的背景色及背景吧~ color:#fff | rgb(255,0,0) | red 顏色可以用三種方法指定，不過在CSS裡直接用color是指定字的顏色 要用background-color: #333; 才是指定背景顏色。 background 背景：預設是透明的,可以放顏色及影像 background-color: green; background-image: url(image/img.jpg); 背景比較有趣的是可以決定要不要重覆及放置的位置 background-repeat: 背景重覆：有四個參數 no-repeat; repeat; repeat-x; repeat-y 即，不重覆、重覆、重覆X、重覆Y
[新手前端]從平面設計前進 CSS-7 元素排序規則- DOM,float,position 1
繼續說明 CSS 如何控制HTML元素在頁面裡的空間及位置配置。 上篇介紹了 display 屬性，可以針對元素的盒模型有不同的設定，display 設定了元素的顯示方式以及和其他元素的互動關係，今天來談談 position 位置。 HTML元素出現在頁面什麼位置可以依據三種主要的規則： 1. 普通 DOM樹 隨著HTML 的DOM元素順序 display是塊級還是行內不同，元素由上至下，由左而右依序排列。 2. 浮動 float 元素從普通的 DOM樹順序中浮到上方圖層，然後依元素被設定的float方向延著母元素邊界排列，display:block 的元素會被蓋住，如果左右的浮動元素堆到需要換行時，會依原本DOM 樹裡的順序，如果float:left 的元素寫在比較前面就會有優先權，空間不夠的 float:right會被擠到下一行裡。如果碰到 display為table時，table會無視float，從設為tabl置開始，做出類似block的行為。 見下圖：
[鐵人賽07]從平面設計前進 CSS-5 盒模型
CSS的部分講了四篇，都還在基本概念和 HTML的元素選擇器上，今天終於要正式講到樣式本身的基礎- box 盒模形。 網頁設計和平面設計最大的差異之一就在元素的空間組成上，平面設計時頁面上的元素是用線條、區塊、形狀、顏色來區分不同的元素，同時元素間可能沒有明顯的邊界，但是在網頁設計的”頁面”中設計師其實是在針對 HTML裡的元素像是標題 <h1>、區隔 <div>、影像 <img>等等元素設計不同的造型，然而這些元素在頁面中佔有的空間 “全部都是矩形”。 沒錯! 全~~部~~ 都是矩形，不管是標題、錨點或是影像，在瀏覽器眼中就像一個個的用HTML <tag> </tag>包起來的箱子box 堆在頁面中，而且常常是一個包一包，盒子裡面還有盒子，這些盒子會依網頁設計者指定的寬高形成一個個不同長寬的矩形空間。 所幸是網頁設計也有圖層的概念，可以讓這些矩形元素有不同的位置變化，但是不管你眼睛看到什麼造型，實際上他們在瀏覽器眼中「全部都是矩形」，只不過這個矩形有不同的長寬、顏色、邊界、內外間距、背景甚致還給你圖層可用。見下圖： 這張圖展示的是任何元素都有的共通的空間性質，每一個元素都具有自己的長寬等上述屬性來確定本身在頁面中佔了多少空間。
[鐵人賽06]從平面設計前進 CSS-4 權重及覆蓋 1
承上篇，繼續針對選擇器說明，我們已經知道在CSS指定樣式的型式： E {color:red;} 選擇器 {類型:參數}; 同時知道選擇器可以串連，程式碼都是由上往下讀取並解析 另外之前的文章裡也提到，想要使用CSS的樣式可以用三種不同的方法來讓瀏覽器讀取CSS，分別是 行內、頁面、鍊入(載入式)。 現在知道有這麼多的方法可以指定樣式給在HTML裡的元素，那麼如果出現下面這種情況，瀏覽器要怎麼知道該呈現什麼結果，就要靠權重來區分，就像在軍隊裡要以官階大的長官下的指令算數，在家裡媽媽說了算一樣，CSS也有一套計算選擇器權重的方式。 不然如果像下例，有很多選擇器都選到同一個元素 <p> 最後字會變成什麼顏色呢? <style> p{color:red;} p{color:blue;} </style>
[鐵人賽05] 從平面設計前進 CSS-3 選擇器詳解
上一篇提到要套用樣式，就需要指定某一個特定的元素E 告訴瀏覽器，我就是要把樣式套在這個 E 上面，就像我們作圖時先找出要做特效的圖層然後套用特效一樣。 這個指定元素的部分我們叫做 “選擇器”，也就是利用這個地方來指定特定的元素，其實就是不同的選出元素的方法。 (有點像在教室裡叫第一排站起來，或全部的女生站起來，也許更像在：玩大風吹、吹什麼~ 吹我叫到的元素 E ) 選擇器可分成下表裡的類別，看得懂英文的可以直接參考 w3c的 selector說明頁(註1)： 除了”全域”、”型態”及最常見的.class, #ID之外，有幾個是類似的選擇法 繼承 偽類 參數
[鐵人賽04] 從平面設計前進 CSS-2 選擇器之.class #ID
[新手前端]從平面設計前進 CSS-2 選擇器之.class #ID 上一篇簡介了如何在HTML內使用CSS，簡單來說有3種引入CSS的方法： 一是行內，如： <img src=”” style=”border:1px soild red”> 二是頁面插入式： <sytle> E{font-size:14px; color:red;} </style> 三是鍊入式： <link href=”../css.css” rel=”stylesheet” type=”text/css” /> 然後在css.css的檔案裡寫 E{樣式類別:參數;} E2{border: 1px soild red ; color: red;} 可以很簡單的知道在HTML裡因為 style是直接寫在 HTML的tag裡，所以不需要特別去指定想要套用的樣式該放在哪個元素上。不過頁面式、鍊入式的CSS就會需要特別指定好你想在哪一個元素E 上套用樣式，表示法就變成 E{類別:參數;} 在{}前方的是元素，{}中間是想要指定的樣式，對不同的元素可以分別指定不同的樣式。
[鐵人賽03]從平面設計前進 CSS-1
[新手前端]從平面設計前進 CSS-1 上一篇簡介了HTML，版面來比喻，HTML就是不同的元素，而CSS就是這些元素的造型。 如果說HTML是一篇有標題、大綱的文章，那麼CSS就是用來指定字型、大小、顏色、排版的樣式，所謂的CSS就是樣式表的意思。 同HTML一樣，CSS也是一種網頁設計師用來和瀏覽器溝通用的語言，瀏覽器永遠都會照你給的指示做出呈現，唯一的問題是設計師必需學會怎麼和他們溝通，所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異，其中尤以 IE的解讀方式和其他瀏覽器相差最多，所以在做樣式設計時，一般是以firefox 或 chrome的呈現結果為主，其次再修改指定讓IE也能做出類似的呈現。 <!–more–> 既然CSS也是一種和瀏覽器溝通用的語言，首先就來介紹CSS的基本語法。 首先，你必需告訴瀏覽器你想要改變樣式的是HTML裡的哪一個元素 E (element)，這個E 可以是任何一個HTML裡的 tag (標籤)，再來就用CSS的語法把想要改變的樣式及其參數寫入文件中。 例如針對一個HTML裡的 <a> 指定字型、顏色： <a style=” font-family:Aral; font-size:14px”> <tag a 錨點的 樣式=” 字型: Aral ; 字級: 14像素”> 其中的 style=”” 部分是HTML裡的參數指定方式，像 <a href=”” alt=””> </a> 裡面的一樣，只是這個參數是針對HTML的造型(style)來指定。而在CSS樣式裡面的指定方式也很簡單，造型類別:參數; 結尾用分號分隔。 如上述的標示方法，就叫做行內 CSS, 顧名思義就是把 style 造型寫在 […]