本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-04 (建議使用Chrome瀏覽器) 接下來會連接3篇文章都介紹web-...
在之前我們都是在講關於Sass與Compass的語法教學， 這次我們來談談該如何使用Sass Mixin與Compass該如何結合， 才可以提升網頁設計師撰寫C...
接下來會連接3篇文章都介紹web-font，而第一篇是基本的web-font的置入，第二篇開始會是web-font icon，並且了解web-font icon...
在上回我們曾經提到過@import的用法， 它的功用在於可以將CSS檔案進行切割， 如果是單純要被匯入整合Sass檔， 而並沒有要轉出成CSS檔案的話， 那就在...
本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-02 (建議使用Chrome瀏覽器) CSS3除了有更多的樣式外，其中一...
esponsive Web Design(RWD) 又稱為響應式網頁設計， 它可以因應網頁解析度上的不同， 進而改變網頁上的樣式， 如果你不了解什麼是RWD的話...
CSS 的全名為Cascading Style Sheets，是一種樣式表(Stylesheet) 語言，主要功能是為了提供HTML或 XHTML 在呈現上面的...
網頁設計的趨勢從擬物轉換為扁平化，而扁平化顧名思義就是較扁、較平，去除了真實化實體，扁平化也延伸出許多的視覺風格，而long shadow就是其中一種，讓扁平的...
我們常常會看到國外的有名大神們都會釋出CSS framework， 只要引入他的CSS檔案後，你就可以使用他的樣式進來。 而這次的主題則便是跑一次相關的流程給大...
鐵人賽終於到了15天了，再怎麼說也是30天的一半。今天要介紹的是box-shadow，簡單來說它是盒狀元素陰影，雖然他的設定值不多，但是要相信css是沒有極限的...
這次的主題主要是要分享自己是如何透過Sass&Compass來支援動畫效果， 一共會分享Compass Transition，以及國外分享出來的Anim...
CSS3多了相當多的selectors，而:target是其中一個，它可以讓html的id被套用上新的樣式，而這功能也可以讓html的互動性更高。 本篇內容同步...
在早期如果我們必須要撰寫一個最基礎的圓弧效果時， 是必須要寫很多瀏覽器前綴詞的，譬如這樣： .box{ -webkit-border-radius: 100...
這是一個很簡單的技術，就是可以改變文字反選後的樣式，而支援的樣式並不多，目前僅有Color、background、background-color、text-s...
Sublime text 2 網站連結： http://www.sublimetext.com/2 首先Sublime text 2是沒有提供Sass、Scss...
相信網頁設計師們都知道bootstrap這個前端framework， 載入它的js與css後， 之後只要在你的html tag加上他寫好的class樣式即可。...
大多數網站在文字的單位都是使用px，尤其在台灣多數使用者都是用windows系統，不管是什麼瀏覽器，在windows下都是以單數px是較為清楚的，如13xp．1...
有些人或許對SASS這種太乾淨的寫法有點無法適應， 因為他是靠TAB推進來寫CSS與階層性的， 如果你覺得SASS你不習慣， 那你可以試試看SCSS！ 舉例來說...
今天來介紹CSS最犯規的function calc，通常會用來做數值的運算，尤其是針對於長寬等等，而他最特別的是運算的數值"不需要"相同單位...
background-attachment是背景固定模式的屬性，而不同的固定方式就能夠有不同的視覺效果，而人類的視覺是很容易欺騙的，適當的利用可以有意想不到的效...
以目前坊間最有名的Reset CSS不外乎是 myer所發表的Reset.css http://meyerweb.com/eric/tools/css/rese...
本篇介紹CSS3的漸層，而就漸層這功能聽起來，似乎沒有什麼樣的變化，但其實透過復合式的背景可以堆疊出相當多的變化。 本篇CSS效果發表於<http://a...
今日教學重點： (1)用_mixin.sass來整理自己曾經寫過的CSS (2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法 (3)你相信嗎？Comp...
text-shadow算是CSS3中較早出現的語法，而且不需要打前輟詞就能夠執行，text-shadow是一個很簡單的效果，但是可以有非常多的變化。 本篇CSS...
之後會講到Compass的功能， 它是一個支援Sass的強大工具， 所以這裡就順道講一下該如何在windows的環境下使用Sass， 同時錄製安裝流程影片，提供...
偽元素在IE8之後全面都有支援，而這樣功能在CSS3可以創造出更多的效果。 圖片來源：動畫 火影忍者 本篇CSS效果發表於http://ashareaday....
有的時候我們為了不要讓CSS太龐大， 所以有class用到相同樣式時， 都會將其合併起來， 如下CSS碼： /* 第200行位置 */ .header h1,...
在過去我們只要使用色碼來表示顏色，色碼是用三組十六進制數位表示，每位元組從00到FF，相當十進位數位從0到255...，而現在我們有了新的屬性alpha(透明度...
在以前寫CSS的時候， 我們時常會遇到以下的情境， 在開發多種CSS樣式時，會講第一次寫的程式碼複製貼上後， 再進行修改，但當樣式整個大修時(例：圓形改方形)，...
承上篇，上一篇主要是介紹Sass和Compass是什麼，而本篇會介紹Sass和Compass究竟對CSS的撰寫有什麼樣的影響，讓許多工程師及設計師都說已經回不去...
卡斯伯
廖洧杰
blackie1019i
iThome鐵人賽
看影片追技術