iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2 Like 0 留言 3972 瀏覽

鐵人賽其他技術 DAY 22

快寫HTML靜態網頁系列第 19 篇

技術用 ez-css 輕量框架快速佈局

如果只需要大區塊的網頁佈局， EZ-CSS是既輕量，又提供一些常用的例子可立即使用。早期的網頁佈局常是用 table 的HTML元件來進行，而用 tab...

逮丸逮丸 ‧ 2013-10-07

7 Like 1 留言 11649 瀏覽

鐵人賽開發技術 DAY 22

CSS沒有極限系列第 18 篇

技術 CSS沒有極限 - Checkbox的妙用

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-07 (建議使用Chrome瀏覽器) CSS3 新增了:checked的...

卡斯伯 ‧ 2013-10-07

3 Like 2 留言 9217 瀏覽

鐵人賽開發技術 DAY 22

30天掌握Sass語法系列第 18 篇

技術 30天掌握Sass語法 - (22)Sass顏色函數介紹

網頁設計師在設計網頁時，通常都會直接瀏覽繪圖軟體工具來觀看色盤，但如果是透過Sass顏色函數的話，就可以自動產生出所想要的顏色。同時也會介紹一個Sass...

廖洧杰 ‧ 2013-10-07

5 Like 1 留言 10737 瀏覽

鐵人賽其他技術 DAY 21

快寫HTML靜態網頁系列第 18 篇

技術利用 CSS 框架加速HTML的佈局及美化

前2/3的篇幅是介紹快寫HTML的語法、工具，以及能夠像動態網頁似地快速更新網頁的靜態網頁產生器。接下來介紹如何快速安排網頁元素的佈局及美化。一片空白的...

逮丸逮丸 ‧ 2013-10-06

4 Like 0 留言 5103 瀏覽

鐵人賽開發技術 DAY 21

CSS沒有極限系列第 17 篇

技術 CSS沒有極限 - CSS3 Fliter 效果

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-06 (建議使用Chrome瀏覽器) 假日都來介紹些單篇的主題吧~，今天...

卡斯伯 ‧ 2013-10-06

3 Like 2 留言 9529 瀏覽

鐵人賽開發技術 DAY 21

30天掌握Sass語法系列第 17 篇

技術 30天掌握Sass語法 - (21) Sass常見編譯錯誤介紹

一般網頁設計師在編譯Sass時，時常會遇到一些無法編譯成功的問題，通常要找很久資源才會知道該怎麼撰寫正確的Sass格式，所以這裡也提供一些除錯細節，讓大...

廖洧杰 ‧ 2013-10-06

5 Like 0 留言 10717 瀏覽

鐵人賽開發技術 DAY 20

CSS沒有極限系列第 16 篇

技術 CSS沒有極限 - Web-font & icons 3連發 - 自製web font icons

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-05 (建議使用Chrome瀏覽器) 接下來會連接3篇文章都介紹web-...

卡斯伯 ‧ 2013-10-05

2 Like 0 留言 8180 瀏覽

鐵人賽開發技術 DAY 20

30天掌握Sass語法系列第 16 篇

技術 30天掌握Sass語法 - (20) 利用@Mixin與Sass運算建立Grid System

雖然說如果你的網頁設計有符合960grid或其他grid system的話，做網頁就相對方便許多，但如果美術設計對grid system觀念不是很熟，或者...

廖洧杰 ‧ 2013-10-05

3 Like 0 留言 5643 瀏覽

鐵人賽開發技術 DAY 19

CSS沒有極限系列第 15 篇

技術 CSS沒有極限 - Web-font & icons 3連發 - 第二發 Icons

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-04 (建議使用Chrome瀏覽器) 接下來會連接3篇文章都介紹web-...

卡斯伯 ‧ 2013-10-04

6 Like 2 留言 12180 瀏覽

鐵人賽開發技術 DAY 19

30天掌握Sass語法系列第 15 篇

技術 30天掌握Sass語法 - (19) Sass @Mixin and Compass結合運用範例

在之前我們都是在講關於Sass與Compass的語法教學，這次我們來談談該如何使用Sass Mixin與Compass該如何結合，才可以提升網頁設計師撰寫C...

廖洧杰 ‧ 2013-10-04

9 Like 2 留言 9646 瀏覽

鐵人賽開發技術 DAY 18

CSS沒有極限系列第 14 篇

技術 CSS沒有極限 - Web-font & icons 3連發

接下來會連接3篇文章都介紹web-font，而第一篇是基本的web-font的置入，第二篇開始會是web-font icon，並且了解web-font icon...

卡斯伯 ‧ 2013-10-03

5 Like 1 留言 17102 瀏覽

鐵人賽開發技術 DAY 18

30天掌握Sass語法系列第 14 篇

技術 30天掌握Sass語法 - (18)規劃你的Sass結構

在上回我們曾經提到過@import的用法，它的功用在於可以將CSS檔案進行切割，如果是單純要被匯入整合Sass檔，而並沒有要轉出成CSS檔案的話，那就在...

廖洧杰 ‧ 2013-10-03

10 Like 1 留言 5207 瀏覽

鐵人賽開發技術 DAY 17

CSS沒有極限系列第 13 篇

技術 CSS沒有極限 - Transition 實作波動拳動圖

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-02 (建議使用Chrome瀏覽器) CSS3除了有更多的樣式外，其中一...

卡斯伯 ‧ 2013-10-02

2 Like 1 留言 24343 瀏覽

鐵人賽開發技術 DAY 17

30天掌握Sass語法系列第 13 篇

技術 30天掌握Sass語法 - (17)使用@content建構RWD網頁設計

esponsive Web Design(RWD) 又稱為響應式網頁設計，它可以因應網頁解析度上的不同，進而改變網頁上的樣式，如果你不了解什麼是RWD的話...

廖洧杰 ‧ 2013-10-02

1 Like 0 留言 2444 瀏覽

鐵人賽開發技術 DAY 1

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列第 1 篇

技術 [3]用MAN架構打造超人般的網頁應用程式:[課前準備]淺談CSS

CSS 的全名為Cascading Style Sheets，是一種樣式表(Stylesheet) 語言，主要功能是為了提供HTML或 XHTML 在呈現上面的...

blackie1019i ‧ 2013-10-02

7 Like 1 留言 2995 瀏覽

技術 CSS沒有極限 - 利用Sass繪製扁平化風格的long-shadow

網頁設計的趨勢從擬物轉換為扁平化，而扁平化顧名思義就是較扁、較平，去除了真實化實體，扁平化也延伸出許多的視覺風格，而long shadow就是其中一種，讓扁平的...

卡斯伯 ‧ 2013-10-01

4 Like 0 留言 9504 瀏覽

技術 30天掌握Sass語法 - (16)如何將別人撰寫的CSS Framework轉換成Sass格式

我們常常會看到國外的有名大神們都會釋出CSS framework，只要引入他的CSS檔案後，你就可以使用他的樣式進來。而這次的主題則便是跑一次相關的流程給大...

廖洧杰 ‧ 2013-10-01

5 Like 1 留言 8776 瀏覽

技術 CSS沒有極限 - box-shadow

鐵人賽終於到了15天了，再怎麼說也是30天的一半。今天要介紹的是box-shadow，簡單來說它是盒狀元素陰影，雖然他的設定值不多，但是要相信css是沒有極限的...

卡斯伯 ‧ 2013-09-30

4 Like 4 留言 10200 瀏覽

技術 30天掌握Sass語法 - (15)如何透過Sass&Compass支援CSS3動畫效果

這次的主題主要是要分享自己是如何透過Sass&Compass來支援動畫效果，一共會分享Compass Transition，以及國外分享出來的Anim...

廖洧杰 ‧ 2013-09-30

3 Like 0 留言 9304 瀏覽

技術 CSS沒有極限 - CSS3 :target選取器，可以做出許多nojs的互動效果

CSS3多了相當多的selectors，而:target是其中一個，它可以讓html的id被套用上新的樣式，而這功能也可以讓html的互動性更高。本篇內容同步...

卡斯伯 ‧ 2013-09-29

4 Like 1 留言 10754 瀏覽

技術 30天掌握Sass語法 - (14)透過Compass CSS3 Mixin輕鬆撰寫CSS3靜態樣式

在早期如果我們必須要撰寫一個最基礎的圓弧效果時，是必須要寫很多瀏覽器前綴詞的，譬如這樣： .box{ -webkit-border-radius: 100...

廖洧杰 ‧ 2013-09-29

3 Like 1 留言 2193 瀏覽

技術 CSS沒有極限 - CSS藏頭詩 Selection

這是一個很簡單的技術，就是可以改變文字反選後的樣式，而支援的樣式並不多，目前僅有Color、background、background-color、text-s...

卡斯伯 ‧ 2013-09-28

5 Like 2 留言 14987 瀏覽

技術 30天掌握Sass語法 - (13)如何使用sublime text 2 打造撰寫Sass環境

Sublime text 2 網站連結： http://www.sublimetext.com/2 首先Sublime text 2是沒有提供Sass、Scss...

廖洧杰 ‧ 2013-09-28

6 Like 2 留言 15426 瀏覽

鐵人賽開發技術 DAY 12

30天掌握Sass語法系列第 12 篇

技術 30天掌握Sass語法 - (12)以Bootstrap framework淺談HTML、SASS設計模式

相信網頁設計師們都知道bootstrap這個前端framework，載入它的js與css後，之後只要在你的html tag加上他寫好的class樣式即可。...

廖洧杰 ‧ 2013-09-27

9 Like 2 留言 28140 瀏覽

鐵人賽開發技術 DAY 12

CSS沒有極限系列第 12 篇

達標好文技術 CSS沒有極限 - CSS的新"文字"及"尺寸"單位

大多數網站在文字的單位都是使用px，尤其在台灣多數使用者都是用windows系統，不管是什麼瀏覽器，在windows下都是以單數px是較為清楚的，如13xp．1...

卡斯伯 ‧ 2013-09-27

5 Like 1 留言 24415 瀏覽

鐵人賽開發技術 DAY 11

30天掌握Sass語法系列第 11 篇

技術 30天掌握Sass語法 - (11)覺得Sass的寫法不適合你寫CSS嗎？那試試看SCSS吧！

有些人或許對SASS這種太乾淨的寫法有點無法適應，因為他是靠TAB推進來寫CSS與階層性的，如果你覺得SASS你不習慣，那你可以試試看SCSS！舉例來說...

廖洧杰 ‧ 2013-09-26

12 Like 3 留言 63388 瀏覽

鐵人賽開發技術 DAY 11

CSS沒有極限系列第 11 篇

達標好文技術 CSS沒有極限 - CSS的神奇Calc運算

今天來介紹CSS最犯規的function calc，通常會用來做數值的運算，尤其是針對於長寬等等，而他最特別的是運算的數值"不需要"相同單位...

卡斯伯 ‧ 2013-09-26

5 Like 0 留言 9091 瀏覽

鐵人賽開發技術 DAY 10

CSS沒有極限系列第 10 篇

技術 CSS沒有極限 - 意想不到的background-attachment

background-attachment是背景固定模式的屬性，而不同的固定方式就能夠有不同的視覺效果，而人類的視覺是很容易欺騙的，適當的利用可以有意想不到的效...

卡斯伯 ‧ 2013-09-25

5 Like 3 留言 17672 瀏覽

鐵人賽開發技術 DAY 10

30天掌握Sass語法系列第 10 篇

達標好文技術 30天掌握Sass語法 - (10)如何建立自己的Sass Reset CSS

以目前坊間最有名的Reset CSS不外乎是 myer所發表的Reset.css http://meyerweb.com/eric/tools/css/rese...

廖洧杰 ‧ 2013-09-25

9 Like 0 留言 17665 瀏覽

鐵人賽開發技術 DAY 9

CSS沒有極限系列第 9 篇

技術 CSS沒有極限 - CSS3的漸層

本篇介紹CSS3的漸層，而就漸層這功能聽起來，似乎沒有什麼樣的變化，但其實透過復合式的背景可以堆疊出相當多的變化。本篇CSS效果發表於<http://a...

卡斯伯 ‧ 2013-09-24

技術 用 ez-css 輕量框架快速佈局