iT邦幫忙

css相關文章
共有 1069 則文章
鐵人賽 開發技術 DAY 25
CSS沒有極限 系列 第 21

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

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

鐵人賽 開發技術 DAY 25
30天掌握Sass語法 系列 第 21

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

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

鐵人賽 其他技術 DAY 24
快寫HTML靜態網頁 系列 第 21

技術 使用 Bootstrap 佈局網頁

Bootstrap 的 Grid system 是依循 960.gs 的方式來佈局。 其中的 .row 是列的單位, 而.col-{媒體形式}-{數字} 算是...

鐵人賽 開發技術 DAY 24
CSS沒有極限 系列 第 20

達標好文 技術 CSS沒有極限 - CSS transform 軸線的謊言

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-09 (建議使用Chrome瀏覽器) 從小上數學課,都會知道X軸是左右,...

鐵人賽 開發技術 DAY 24
30天掌握Sass語法 系列 第 20

技術 30天掌握Sass語法 - (24) 淺談Sass協作流程分享

該如何讓兩位以上的隊友發揮1+1=3以上的更大價值, 一直以來都是公司團隊間時常需要討論的議題, 又會因為每個隊友的能力不同, 所以每間公司的團隊流程也會有所調...

鐵人賽 其他技術 DAY 23
快寫HTML靜態網頁 系列 第 20

技術 選用 Bootstrap 框架協助加速前端開發

在眾多 CSS 框架裡, Bootstrap 在網頁程式開發的環境裡, 可能是簡潔又易用的前端框架工具。 此框架最早是以 Twitter Bootstrap 為...

鐵人賽 開發技術 DAY 23
CSS沒有極限 系列 第 19

技術 CSS沒有極限 - CSS transform 概觀

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-08 (建議使用Chrome瀏覽器) 接下來要介紹CSS transfo...

鐵人賽 開發技術 DAY 23
30天掌握Sass語法 系列 第 19

技術 30天掌握Sass語法 - (23) 介紹Sass與Compass的config.rb設定

今天如果你創立了一個Compass專案後, 會發現資料夾內會有一個config.rb, 它的用處主要是拿來設定一些有用的參數, 透過這一次分享來進行一一的介紹。...

鐵人賽 其他技術 DAY 22
快寫HTML靜態網頁 系列 第 19

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

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

鐵人賽 開發技術 DAY 22
CSS沒有極限 系列 第 18

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

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

鐵人賽 開發技術 DAY 22
30天掌握Sass語法 系列 第 18

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

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

鐵人賽 其他技術 DAY 21
快寫HTML靜態網頁 系列 第 18

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

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

鐵人賽 開發技術 DAY 21
CSS沒有極限 系列 第 17

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

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

鐵人賽 開發技術 DAY 21
30天掌握Sass語法 系列 第 17

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

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

鐵人賽 開發技術 DAY 20
CSS沒有極限 系列 第 16

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

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

鐵人賽 開發技術 DAY 20
30天掌握Sass語法 系列 第 16

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

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

鐵人賽 開發技術 DAY 19
CSS沒有極限 系列 第 15

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

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

鐵人賽 開發技術 DAY 19
30天掌握Sass語法 系列 第 15

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

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

鐵人賽 開發技術 DAY 18
CSS沒有極限 系列 第 14

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

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

鐵人賽 開發技術 DAY 18
30天掌握Sass語法 系列 第 14

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

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

鐵人賽 開發技術 DAY 17
CSS沒有極限 系列 第 13

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

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

鐵人賽 開發技術 DAY 17
30天掌握Sass語法 系列 第 13

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

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

鐵人賽 開發技術 DAY 1

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

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

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

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

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

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

技術 CSS沒有極限 - box-shadow

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

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

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

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

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

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

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

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

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