今日教學重點： (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的撰寫有什麼樣的影響，讓許多工程師及設計師都說已經回不去...
在以往寫CSS時， 動輒數百、數千行， 寫多了就會很難找各CSS片段的位置， 且滾輪都必須滾很久才會找到對應的程式碼， 所以都會在CSS上寫註解， 至少用搜尋或...
在先前的幾篇，有提過好幾次的Sass以及Compass、Fire.app等工具，在這邊就來釐清這些是什麼樣的工具。 在先前的幾篇，有提過好幾次的Sass以及C...
Sass還有一個很特別的功能，也就是內建擁有加減乘除的語法， 但是，他究竟能支援設計師寫CSS什麼樣的工作呢？ 首先我們先來假設情境： 1.你的網頁寬度是100...
CSS不斷的進化及改變，在過去所遇到的問題、解決方式現在都有著不同的解決方法。在接觸網頁設計一年多，不斷的學習CSS技術，到頭來發現這項技術是沒有極限的，每天都...
這一天要講的是SASS「變數功能」， 首先模擬一些寫純CSS容易會遇到的情境 1.一個網站內有四組文字連結顏色樣式，總CSS程式碼有5000行，有文字連結顏色的...
寫過CSS的朋友都知道， CSS並不像是其他程式語言 擁有類似變數、條件等方式來撰寫， 僅只能一行行來進行編輯，所以當今天有很多地方需要去做修正時， 就必須花很...
CSS不斷的進化及改變，在過去所遇到的問題、解決方式現在都有著不同的解決方法。在接觸網頁設計一年多，不斷的學習CSS技術，到頭來發現這項技術是沒有極限的，每天都...
SASS是一個可以提升寫網頁CSS效率的程式語言， 但礙於學習曲線門檻過高，導致國內網頁設計師的使用率仍未普及化， 希望藉由個人從CSS轉SASS的經驗分享，...
Responsive Web Design(RWD)為2010年Ethan Marcotte所發表的創新網頁技術。 RWD的設計理念為使用HTML與CSS3 M...
簡介CSS3 裡的動畫效果，其實... 是W3C的文件精簡翻譯版 另附神人範例說明。 CSS3的動畫效果可以藉由CSS的 keyframe 參數來控制動畫的...
現在來介紹一些CSS中的單位 絕對大小：mm, cm, in, pt, pc 相對大小：em, ex 相對於設備(顯示器解析度)：px 常用的是px、em、%...
基本語法 CSS屬性名:屬性值; CSS 樣式語法主要是在做樣式的設定, 每一個 CSS 屬性即代表一種樣式, 故主要的語法即是在指定 CSS 屬性的值, 不分...
介紹CSS裡的float常出現的問題案例 之前有在這篇介紹過 float的特性，簡單說就是會往上浮起來，會脫離原有的DOM順序。 子元素浮動到上層之後，在某些情...
/*P是HTML語法中的<P>和</P>*/ P{ font-size: 110%; font-family: garamond, sa...
今天還是網站範例解說，還是同一個站...的中文版。 昨天就提到該站的中文版是獨立製作的，所以和原站在設計風格、技術上都不同，馬上就來比較一下兩者的差異。 今天...
CSS (Cascading Style Sheet) 中文解釋： 層疊樣式表 功用： 使用CSS來決定網站內容的顏色、字型、排版、大小等顯示特性。 CSS (...
就算是切版也是很講技巧的 配圖和內文無關，只是我今天畫的萬聖應景圖而已... 前幾天的分享裡有聊到，前端的工作並不僅僅是切版而已，整個web的呈現部分都可以廣...
網頁設計 ≠ 平面設計，有些"眉角"還是要了解一下 前端網頁設計的技巧很雜，不過有很多問題其實在企劃或視覺設計版面的階段就要先溝通好，否則等...
CSS3的圓角參數讓網頁開發者能輕鬆的使用圓角設計，不需要使用圖片或是大量的DIV標記，這大概是CSS3裡最令人印象深刻的功能了。 自從2005年發佈的圓角屬性...
現在的網頁設計比較重視語義化的結構，也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品，如果是「是內容」就使用 html的元素來表示，如果單純只是造型...
[翻譯]OOCSS物件導向的CSS設計概念 重點1. 把物件(定位)和skin (皮)分開，以利維護及重覆使用 重點2. 把內容和 容器分開 缺點是HTML那邊...
廖洧杰
卡斯伯
chibc
iamya
iThome鐵人賽
看影片追技術