iT邦幫忙

css相關文章
共有 1069 則文章
鐵人賽 開發技術 DAY 35
30天掌握Sass語法 系列 第 31

技術 Sass開發流程設計 - (5) Sass設計資源整理

除了閉門造車設計Sass網站設計流程外, 我自己也時常會去搜尋其他網頁設計師的Sass資源, 再去從對方的設計風格和理念找出優缺, 衡量是否該改善我自己撰寫Sa...

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

技術 Animation 的各項設定值(2)

[ animation-delay ]:檢索或設置對象動畫延遲的時間 [ animation-iteration-count ]:檢索或設置物件動畫的迴圈次數...

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

技術 Sass開發流程設計 - (4) 排版流程(下)

延續昨天的版面, 已將所有的大框架建立好了, 這裡先來提自己的排版流程習慣: 1.我習慣先把大框架設定用好後,再來微調各元素間的距離。 2.在排網頁時,我會先將...

鐵人賽 開發技術 DAY 18
作個網站吧! 系列 第 18

技術 作個網站吧!Beauty CSS(7)-CSS動一動

CSS3的特殊效果也是不得不提的功能之一, 有了它可以減少些jQuery撰寫, 對我來說相當方便. 以下紀錄一些用法, 若有誤還請指正, 謝謝. CSS3的特殊...

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

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

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

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

技術 Animation 的各項設定值(1)

範例請到:http://ashareaday.wcc.tw/#2013-10-18 和其他屬性一樣,animation有許多屬性可以設定,當然也可以用一個ani...

鐵人賽 開發技術 DAY 17
作個網站吧! 系列 第 17

技術 作個網站吧!Beauty CSS(6)-CSS好方便

CSS最方便的地方之一在於圓角陰影等外觀上的設定,可以減少依賴圖片,達到讀取速度加快,重點是語法打一打就不用一直存圖縮圖啦xD以下紀錄一些外觀上面的設定。如有誤...

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

技術 Animation 和 keyframe

範例網址:http://ashareaday.wcc.tw/#2013-10-17 CSS的Animation分為兩個部分,一個是決定動畫該如何跑的Keyfra...

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

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

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

鐵人賽 開發技術 DAY 16
作個網站吧! 系列 第 16

技術 作個網站吧!Beauty CSS(5)-選擇器part3

今天是CSS小孩系列!(小孩系列是我自己取的...) 我在寫網頁時常常遇到的問題是,當我想在一區塊裡某些部份作不同設定的時候,往往要再增加一個選擇器,而且只有這...

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

技術 CSS沒有極限 - 如何用sass寫animation

都寫了...就順便貼過來了 範例連結:http://ashareaday.wcc.tw/#2013-10-16 Compass目前版本似乎沒有支援animati...

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

技術 Sass開發流程設計 - (1) 切圖、規劃Layout

關於Sass的基礎在前30天已經介紹得差不多了, 但畢竟理論的東西要導入自己的實務開發流程始終會有陣痛期。 所以之後的文章我會用Sass從無到有實際做一個版型出...

鐵人賽 開發技術 DAY 15
作個網站吧! 系列 第 15

技術 作個網站吧!Beauty CSS(4)-選擇器part2

選擇器學不好,要飯要到老(誤)我認為學好CSS選擇器對於網站效率有很大幫助,當然這點我也還在學習當中。 今天繼續紀錄CSS的選擇器,文章若有謬誤還請不吝指正m(...

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

技術 CSS沒有極限 - 鐵人賽不是開始,也不是結束

在鐵人賽前一個月,我在進行一個計劃,就是挑戰100天發文,內容以前端為主,雖然每天都有新的文章,但我都不會特別去核對文章的內容。而鐵人賽開始後,將主題調整為CS...

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

技術 30天掌握Sass語法 - (30)inline-image()與Livereload介紹

上篇文章好像太早發了,導致系統沒更新,所以第30天煩請以此文章為主 關於Sass的基礎知識, 其實在這30天都講得差不多了, 如果有興趣想再深入了解的話, 可以...

鐵人賽 開發技術 DAY 14
作個網站吧! 系列 第 14

技術 作個網站吧!Beauty CSS(3)-選擇器part1

選擇器學不好,要飯要到老(誤)我認為學好CSS選擇器對於網站效率有很大幫助,當然這點我也還在學習當中。 以下是紀錄CSS的選擇器,文章若有謬誤還請不吝指正m(_...

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

技術 Shower.js 與其他的HTML簡報工具

在 前一篇 簡介了很易用的 HTML 簡報, 如果希望在簡報裡是比較多的照片為底圖, 可能就不大方便,後來才發現已有一堆的 HTML 簡報工具可利用。 一堆的...

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

技術 30天掌握Sass語法 - (29) @for+random()創造無限可能

for迴圈不論是在哪個程式語言上都非常的常見, 這一次則是介紹Sass @for的運用方法。 我們先來一個簡單的範例 @for $i from 1 throu...

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

達標好文 技術 CSS沒有極限 - CSS 的相關資料

今天沒有要介紹任何效果,是要介紹這些CSS資料是從何處獲得的~ 前端社群 台灣的前端社群也是高手雲集的地方,如果想要知道最新的技術資訊,從社群進入是最快的方式...

鐵人賽 開發技術 DAY 13
作個網站吧! 系列 第 13

技術 作個網站吧!Beauty CSS(2)-CSS Hack

今天紀錄一下修正不同瀏覽器間顯示問題的利器--CSS Hack。 今天紀錄一下修正不同瀏覽器間顯示問題的利器--CSS Hack。 如果要把全部CSS寫在同一檔...

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

技術 CSS沒有極限 - CSS only responsive navigation

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-13 (建議使用Chrome瀏覽器) 這篇要介紹的是noscript的C...

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

技術 30天掌握Sass語法 - (28)Compass圖片合併功能(CSS Sprite)

在早期網頁設計師要做CSS Sprite的時候, 除了自己手做土法煉鋼以外, 同時也會使用線上網站工具來解決這個問題, 剛好翻到六年前我自己在photoshop...

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

技術 套用 Bootstrap 裡的導覽列

常會用到的導覽列,透過 Bootstrap 可快速地套用。 常在網頁上的每一頁常用的樣版裡, 會有同樣的導覽列出現, 最常用的是連結、搜尋或登入的表格以及按鍵...

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

技術 CSS沒有極限 - pure CSS 專輯列表效果

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-12 (建議使用Chrome瀏覽器) 鐵人賽快要結束了,今明兩天會介紹純...

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

技術 30天掌握Sass語法 - (27) 使用@if提升@Mixin靈活度,以CSS圖形化為例

在第20天的時候, 我有分享關於@Mixin與Sass運算的運用手法, 但在一些設計情境下, 你會發現有些樣式如果只單純用Sass運算還是不太夠的, 所以這一次...

鐵人賽 開發技術 DAY 12
作個網站吧! 系列 第 12

技術 作個網站吧!Beauty CSS(1)-愛美是人的天性

愛美是人的天性,版面漂漂亮亮不用說,原始碼當然也要整整齊齊,除了(程式)看著心情好比較不會找你麻煩(喂)以外,除錯也比較容易。 愛美是人的天性,版面漂漂亮亮不用...

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

技術 為元件上色及小圖示的運用:Bootstrap

以前在HTML裡,按鍵通常只有在做表單送出時才會用到, 但用 Bootstrap 的過程中,按鍵反而成為美化網頁的好方法。 有關美工的設計或怎麼美化, 自己的...

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

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

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

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

技術 30天掌握Sass語法 - (26) 如何讓你的CSS動畫更具動態效果

.box height: 30px width: 30px transition: all 1s &:hover width:...

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

技術 圖與文的佈局利用 Bootstrap 完成

圖和文排在一起,沒什麼設計經驗者, 不是排得太單調,就是排得很亂, Bootstrap 把常會用到的樣式, 設計成易於套用或變化。 可能會有一堆的圖與文需要並...