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

2 Like 0 留言 10818 瀏覽

鐵人賽 Software Development DAY 17

可不可以不要寫糙 code 系列第 17 篇

技術過度依賴前置處理器

良好程式碼的優點大同小異。不好的程式碼的糙點卻各有巧妙之處。此篇的 coding 建議，不適用於 C 前置處理器 C 語言做到 template 或 g...

Chris ‧ 2018-11-01 ‧團隊好想工作室第二屆鐵人賽

4 Like 2 留言 10449 瀏覽

鐵人賽開發技術 DAY 25

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

技術 30天掌握Sass語法 - (25) 透過index()與nth()來設計網站版本樣式控制管理

在以往有些網站性質會因為節慶的關係，而會修改網頁樣式，在傳統比較常見的做法，一個網站會有兩隻CSS，第一個CSS是網站全域樣式，譬如Layout、mod...

廖洧杰 ‧ 2013-10-10

5 Like 0 留言 10263 瀏覽

鐵人賽開發技術 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

1 Like 0 留言 10030 瀏覽

鐵人賽開發技術 DAY 40

Sass3.3 & CSS設計模式系列第 41 篇

技術 Sass教學 (40) - 使用Sass Maps提升程式可讀、變數群組性

以下文章同步於Github。範例程式碼 1.Using Sass Maps 2.w3cplus - Sass Maps 3.Handling z-index...

廖洧杰 ‧ 2014-10-26

4 Like 1 留言 10005 瀏覽

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

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

廖洧杰 ‧ 2013-09-29

4 Like 4 留言 9892 瀏覽

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

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

廖洧杰 ‧ 2013-09-30

1 Like 0 留言 9856 瀏覽

鐵人賽開發技術 DAY 24

Sass3.3 & CSS設計模式系列第 25 篇

技術 Sass教學 (24) - Sass 3.3 Source Maps

影片教學請點選下圖連結↓ 以下文章同步於Github。 Sass 3.3新增的Source Maps主要功能就是讓瀏覽器能夠支援下圖效果：透過上圖，就...

廖洧杰 ‧ 2014-10-10

3 Like 0 留言 9011 瀏覽

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

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

卡斯伯 ‧ 2013-09-29

6 Like 1 留言 8953 瀏覽

鐵人賽開發技術 DAY 43

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

技術 Sass開發流程設計 - (13)Susy RWD Grid排版流程(上)

前面花了幾章篇幅討論Susy該怎麼用，這次我們就直接進入實作吧，首先我先找了個free的template：http://www.html5mania.com...

廖洧杰 ‧ 2013-10-28

8 Like 2 留言 8912 瀏覽

鐵人賽開發技術 DAY 32

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

技術 Sass開發流程設計 - (2) Sass結構規劃、全域變數設定

切完所有圖片後，就可以開始規劃Sass檔案了，當你今天新建立一個Sass專案時，裡面預設會有print、ie、screen的Sass檔案，第一次撰寫Sa...

廖洧杰 ‧ 2013-10-17

9 Like 1 留言 8901 瀏覽

鐵人賽開發技術 DAY 26

CSS沒有極限系列第 22 篇

技術 CSS沒有極限 - CSS transform-3D的透視(perspective)

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-11 (建議使用Chrome瀏覽器) 本篇介紹的transform 3D...

卡斯伯 ‧ 2013-10-11

5 Like 2 留言 8879 瀏覽

鐵人賽開發技術 DAY 1

Sass3.3 & CSS設計模式系列第 1 篇

技術 Sass教學(1) - susy2 - Grid settings(上)

影片教學請點選下圖連結↓ 以下文章同步於Github。 susy1到susy2又是一個可怕的里程碑，原本覺得susy1已經很強大了，但在susy2面前...

廖洧杰 ‧ 2014-09-17

1 Like 1 留言 8815 瀏覽

鐵人賽開發技術 DAY 44

Sass3.3 & CSS設計模式系列第 45 篇

技術 Sass教學(44) - Sass教學手冊導讀

Sass教學手冊目錄連結 **目前的你是否適合使用Sass** 如果你來到這裡，代表著你對CSS有著一定的了解，為了讓你能夠儘快進入學習狀況，這個章節主要是...

廖洧杰 ‧ 2014-10-30

9 Like 1 留言 8814 瀏覽

鐵人賽開發技術 DAY 39

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

技術 Sass開發流程設計 - (9) Off-Canvas layout with Susy

這篇文章竟然花了我7個小時XDD 中間忘了存檔重打外，重新打一遍又發現到新的觀念，於是又越拖越晚...冏，不過終於開始講到我想分享的一些較深入的Sass設...

廖洧杰 ‧ 2013-10-24

4 Like 0 留言 8790 瀏覽

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

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

廖洧杰 ‧ 2013-10-01

1 Like 1 留言 8680 瀏覽

鐵人賽開發技術 DAY 9

Sass3.3 & CSS設計模式系列第 10 篇

技術 Sass教學 (9) - susy2 - 透過susy breakpoint、layout設計RWD Grid

影片教學請點選下圖連結↓ 以下文章同步於Github。這章主要是來分享用susy2來設計responsive grid，一開始會先介紹susy2的lat...

廖洧杰 ‧ 2014-09-25

1 Like 0 留言 8631 瀏覽

鐵人賽開發技術 DAY 39

Sass3.3 & CSS設計模式系列第 40 篇

技術 Sass教學 (39) - 輕鬆import資料夾內所有sass檔

以下文章同步於Github。 Sass Globbing Plugin連結在這個plugin還沒有出現之前， Sass是不支援@import整個資料夾所有的S...

廖洧杰 ‧ 2014-10-25

6 Like 2 留言 8503 瀏覽

鐵人賽開發技術 DAY 38

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

技術 Sass開發流程設計 - (8) susy grid教學(2)

本日susy重點： 1.利用omega並排元素內容 2.透過isolation來達成Responsive image gallery grid 在以往我們在設...

廖洧杰 ‧ 2013-10-23

8 Like 0 留言 8489 瀏覽

鐵人賽開發技術 DAY 42

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

技術 Sass開發流程設計-(12) Compass Vertical Rhythm & Susy other setting

Compass Vertical Rhythm - 網頁上的字型大小與行距的統一調整在以往我們在設計網頁時，通常在設定一些文字排版上的元素設定line-he...

廖洧杰 ‧ 2013-10-27

6 Like 0 留言 8465 瀏覽

鐵人賽開發技術 DAY 25

CSS沒有極限系列第 21 篇

技術 CSS沒有極限 - CSS transform-origin 起始點

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-10 (建議使用Chrome瀏覽器) 本篇介紹transform的起始點...

卡斯伯 ‧ 2013-10-10

5 Like 0 留言 8413 瀏覽

鐵人賽開發技術 DAY 10

CSS沒有極限系列第 10 篇

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

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

卡斯伯 ‧ 2013-09-25

3 Like 2 留言 8413 瀏覽

鐵人賽開發技術 DAY 22

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

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

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

廖洧杰 ‧ 2013-10-07

10 Like 3 留言 8255 瀏覽

鐵人賽開發技術 DAY 3

CSS沒有極限系列第 3 篇

達標好文技術 CSS沒有極限 - 瀏覽器的戰爭

CSS不斷的進化及改變，在過去所遇到的問題、解決方式現在都有著不同的解決方法。在接觸網頁設計一年多，不斷的學習CSS技術，到頭來發現這項技術是沒有極限的，每天都...

卡斯伯 ‧ 2013-09-18

8 Like 2 留言 8073 瀏覽

鐵人賽開發技術 DAY 33

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

技術 Sass開發流程設計 - (3) 網頁排版流程(上)

延續第二章，我們就開始排網頁了。由於一天時間有限，所以分上下兩集來播放與解說。你可以從影片內容可以發現到，一個網頁設計在排版時，在一邊進行前端設計時...

廖洧杰 ‧ 2013-10-18

2 Like 0 留言 8073 瀏覽

鐵人賽開發技術 DAY 26

Sass3.3 & CSS設計模式系列第 27 篇

技術 Sass教學 (26) - 使用animate.scss增強網頁瀏覽體驗

影片教學請點選下圖連結↓ 以下文章同步於Github。範例程式碼 animate.css animate sass版本 Github 範例程式碼進入主題...

廖洧杰 ‧ 2014-10-12

5 Like 1 留言 7908 瀏覽

鐵人賽開發技術 DAY 32

Sass3.3 & CSS設計模式系列第 33 篇

技術 Sass教學 (32) - OOCSS - 提升CSS複用性

影片教學請點選下圖連結↓ 以下文章同步於Github。程式碼連結 OOCSS An Introduction To Object Oriented CS...

廖洧杰 ‧ 2014-10-18

8 Like 1 留言 7565 瀏覽

鐵人賽開發技術 DAY 44

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

技術 Sass開發流程設計 - (14)Susy RWD Grid排版流程(下)

延續上章，為了讓大家了解Susy Grid的設計流程，我的程式碼都會以乾淨的色塊來呈現內容，建議下載github原始檔，以方便後續學習： https:/...

廖洧杰 ‧ 2013-10-29

3 Like 0 留言 7441 瀏覽

鐵人賽開發技術 DAY 7

Sass3.3 & CSS設計模式系列第 8 篇

技術 Sass教學 (7) - SMACSS - Base、Laout

影片教學請點選下圖連結↓ 以下文章同步於Github。程式碼連結 SMACSS - Base SMACSS - Layout SMACSS是Jonath...

廖洧杰 ‧ 2014-09-23

4 Like 0 留言 7236 瀏覽

技術 Scss - 基礎功能介紹

SASS / SCSS 簡介 SASS 是 CSS 的預處理器，它能編譯出原生 CSS，且提供了更多程式面的東西來撰寫 CSS，讓其更簡潔、更好維護，而 SAS...

Ares ‧ 2019-07-13

4 Like 1 留言 6617 瀏覽

鐵人賽開發技術 DAY 5

CSS沒有極限系列第 5 篇

技術 CSS沒有極限 - Sass 與 Compass(2)

承上篇，上一篇主要是介紹Sass和Compass是什麼，而本篇會介紹Sass和Compass究竟對CSS的撰寫有什麼樣的影響，讓許多工程師及設計師都說已經回不去...

卡斯伯 ‧ 2013-09-20

技術 過度依賴前置處理器