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

3 Like 0 留言 4340 瀏覽

鐵人賽 Modern Web DAY 27

連續30天的超實務網頁設計的垂直置中教學系列第 27 篇

技術 RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

RWD等比例目前RWD網頁應該是個再普通不過的需求了，這樣的需求在製作網頁時到底怎麼做到垂直置中的需求呢? 基本上我們當然先從等比例區塊這裡先處裡啦，等比例區...

CSScoke ‧ 2018-11-11

2 Like 0 留言 2591 瀏覽

鐵人賽 Modern Web DAY 26

連續30天的超實務網頁設計的垂直置中教學系列第 26 篇

技術 IE8以上的網頁我該如何做垂直置中?

講了這麼多垂直置中... 從一開始鐵人賽開賽以來，Amos寫了 25種這麼多的垂直置中技巧，但或許仍舊有人搞不懂這 25種垂直置中方式的使用時機，今天我們就來看...

CSScoke ‧ 2018-11-10

2 Like 0 留言 7350 瀏覽

鐵人賽自我挑戰組 DAY 15

前端之 " wow~原來是這樣啊 " 系列第 15 篇

技術 Day15 CSS 動畫 Animation - 基礎篇

利用 keyframes (影格)來設定更細節的動畫吧！之前講解過 Transitions 的動畫效果，也實作一些範例。這一篇文章我們來講講另一個動畫實現方式...

Lai ‧ 2018-10-30 ‧團隊好想工作室第二屆鐵人賽

1 Like 0 留言 30086 瀏覽

鐵人賽 Modern Web DAY 24

連續30天的超實務網頁設計的垂直置中教學系列第 24 篇

技術使用 table 來做垂直置中區塊

簡言這個方式...沒甚麼好講的，就是一個很單純的用表格來做垂直置中，應該算是初初初初初級垂直置中技巧啦。原理說明去看這篇使用 Display: tabl...

CSScoke ‧ 2018-11-08

5 Like 0 留言 5529 瀏覽

鐵人賽影片教學 DAY 23

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 23 篇

技術金魚都能懂網頁設計入門 : RWD選單(鐵人賽第二十三天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧媒體查詢設定方式選單控制方式 CSS選取器使用方式行動優先還是桌機...

CSScoke ‧ 2018-11-07 ‧團隊阿莫斯の推坑教

2 Like 0 留言 4381 瀏覽

鐵人賽影片教學 DAY 22

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 22 篇

技術金魚都能懂網頁設計入門 : RWD排版試做(鐵人賽第二十二天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧從手機先設定還是桌機先設定如何設定HTML結構如何設定CSS 圖片...

CSScoke ‧ 2018-11-06 ‧團隊阿莫斯の推坑教

2 Like 0 留言 5028 瀏覽

鐵人賽影片教學 DAY 21

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 21 篇

技術金魚都能懂網頁設計入門 : RWD入門(鐵人賽第二十一天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧各種裝置的網頁寬度要怎麼設定製做RWD時會遇到的問題媒體查詢的設定...

CSScoke ‧ 2018-11-05 ‧團隊阿莫斯の推坑教

2 Like 0 留言 4001 瀏覽

鐵人賽影片教學 DAY 20

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 20 篇

技術金魚都能懂網頁設計入門 : 媒體查詢 (鐵人賽第二十天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧撰寫方式條件設定方式有甚麼作用追蹤 Amos 收好康資訊 Li...

CSScoke ‧ 2018-11-04 ‧團隊阿莫斯の推坑教

2 Like 0 留言 3141 瀏覽

鐵人賽影片教學 DAY 19

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 19 篇

技術金魚都能懂網頁設計入門 : Animation(鐵人賽第十九天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 animation 的用途 animation 值有哪些動畫跟關鍵影...

CSScoke ‧ 2018-11-03 ‧團隊阿莫斯の推坑教

2 Like 0 留言 2960 瀏覽

鐵人賽影片教學 DAY 18

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 18 篇

技術金魚都能懂網頁設計入門 : Transition (鐵人賽第十八天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 transition 特性 transition 值有哪些設定方式...

CSScoke ‧ 2018-11-02 ‧團隊阿莫斯の推坑教

3 Like 0 留言 4220 瀏覽

鐵人賽影片教學 DAY 17

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 17 篇

技術金魚都能懂網頁設計入門 : 排個稀飯版 (鐵人賽第十七天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧 flex特性垂直置中的寫法圖片下方的微幅距離怎麼處理掉追蹤...

CSScoke ‧ 2018-11-01 ‧團隊阿莫斯の推坑教

3 Like 0 留言 3252 瀏覽

鐵人賽影片教學 DAY 16

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 16 篇

技術金魚都能懂網頁設計入門 : Absolute定位 (鐵人賽第十六天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧絕對定位的特性有哪些我們在哪些情境可以利用到絕對定位的特性範例實...

CSScoke ‧ 2018-10-31 ‧團隊阿莫斯の推坑教

1 Like 0 留言 4597 瀏覽

鐵人賽 Modern Web DAY 23

連續30天的超實務網頁設計的垂直置中教學系列第 23 篇

技術使用 Writing-mode 來做垂直置中區塊

簡言這個方式應該是比較少見到有人使用的了，這個想法是被老友 Paul 所激發的，writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上...

CSScoke ‧ 2018-11-07

1 Like 1 留言 4111 瀏覽

鐵人賽 Modern Web DAY 22

連續30天的超實務網頁設計的垂直置中教學系列第 22 篇

技術使用 Padding 來做垂直置中啦

簡言「什麼！這也算垂直置中技巧？連我阿嬤都知道這方式吧？！！」對的！這的確也算是一種垂直置中的方式，不可諱言的這方式真的是簡單過頭了，以至於有些開發者認為這...

CSScoke ‧ 2018-11-06

1 Like 0 留言 3791 瀏覽

鐵人賽 Modern Web DAY 21

連續30天的超實務網頁設計的垂直置中教學系列第 21 篇

技術使用相對定位 Relative + translateY 來做垂直置中

簡言這個技巧利用了 Top: 50% 的招式，讓你的物件上方能產生固定％數的距離，接著讓要置中的物件本身使用 tranlateY 的％數來達成垂直置中的需求，...

CSScoke ‧ 2018-11-05

1 Like 0 留言 3577 瀏覽

鐵人賽 Modern Web DAY 20

連續30天的超實務網頁設計的垂直置中教學系列第 20 篇

技術使用計算機 calc 來做到垂直置中效果

簡言 Calc 是計算機英文單字「calculator」的縮寫，這個由微軟提出的 CSS 方法，真的是網頁開發的一大福音啊！我們竟然可以在網頁中直接做計算！？這...

CSScoke ‧ 2018-11-04

2 Like 0 留言 11984 瀏覽

鐵人賽 Modern Web DAY 19

連續30天的超實務網頁設計的垂直置中教學系列第 19 篇

技術使用 Display: table-cell 做網頁垂直置中

簡言這一招我想有點年紀的開者應該都有看過了，當然像我這麼嫩的開發者當然是第一次看到啦（這是什麼幹話），這一招的原理在於使用 CSS display 屬性將di...

CSScoke ‧ 2018-11-03

1 Like 0 留言 3577 瀏覽

鐵人賽 Modern Web DAY 18

連續30天的超實務網頁設計的垂直置中教學系列第 18 篇

技術使用 Grid + margin 來達到垂直置中目的

簡言繼續用 Grid 來置中，由於 Grid 物件對空間解讀的特殊性，我們只要在父層物件設定 display: grid，接著在需要垂直置中的物件上設定 ma...

CSScoke ‧ 2018-11-02

2 Like 0 留言 2767 瀏覽

鐵人賽 Modern Web DAY 17

連續30天的超實務網頁設計的垂直置中教學系列第 17 篇

技術使用 Grid + place-content 製作垂直置中區塊

簡言 place-content 這個 CSS Grid 的屬性不知道有多少人用過，此屬性是 align-content 與 justify-content 的...

CSScoke ‧ 2018-11-01

2 Like 0 留言 5599 瀏覽

鐵人賽 Modern Web DAY 16

連續30天的超實務網頁設計的垂直置中教學系列第 16 篇

技術使用 Grid + place-items 來做垂直置中效果

簡言 place-items 這屬性不知道有多少人用過，我們可利用這個屬性來快速設定 X 跟 Y 軸的對齊，達到垂直置中的效果。原理說明 place-item...

CSScoke ‧ 2018-10-31

1 Like 0 留言 2745 瀏覽

鐵人賽 Modern Web DAY 15

連續30天的超實務網頁設計的垂直置中教學系列第 15 篇

技術使用 Grid + align-self 達到垂直置中效果

簡言 align-self 應該大家都不陌生，基本上就是對 grid Y軸的個別對齊方式，只要對單一子層物件設定 align-self: center 就能達成...

CSScoke ‧ 2018-10-30

3 Like 0 留言 2861 瀏覽

鐵人賽影片教學 DAY 15

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 15 篇

技術金魚都能懂網頁設計入門 : Relative定位 (鐵人賽第十五天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧關於Fixed 設定Relative之後會有的特性有哪些設定Rela...

CSScoke ‧ 2018-10-30 ‧團隊阿莫斯の推坑教

6 Like 2 留言 4068 瀏覽

鐵人賽影片教學 DAY 14

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 14 篇

技術金魚都能懂網頁設計入門 : Fixed定位 (鐵人賽第十四天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧關於Fixed 設定Fixed之後會有的特性有哪些如何水平垂直置中...

CSScoke ‧ 2018-10-29 ‧團隊阿莫斯の推坑教

0 Like 0 留言 4500 瀏覽

鐵人賽 Modern Web DAY 14

CSS Secrets 導讀系列第 14 篇

技術 Secret 12: 截角效果 (CSS gradient)

裁切的截角不只是用來收集折價券省錢，也是印刷和網頁上常見的設計圖案。它的表現方式是以45度角裁去元素一個或以上的角落。尤其當近年扁平化設計(flat desig...

yowlonglee ‧ 2018-10-29

2 Like 0 留言 3731 瀏覽

鐵人賽自我挑戰組 DAY 14

前端之 " wow~原來是這樣啊 " 系列第 14 篇

技術 Day14 CSS3 動畫 Transitions實作練習(下）

續上上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！在上篇實作中完成了上方兩個動畫效果，本篇我們繼續實作下方兩個動畫效果吧！左下動畫...

Lai ‧ 2018-10-29 ‧團隊好想工作室第二屆鐵人賽

0 Like 0 留言 1261 瀏覽

鐵人賽 Modern Web DAY 13

CSS Secrets 導讀系列第 13 篇

技術 Secret 11: 鑽石形圖片

鑽石形的圖片是常見的一種視覺設計，但是用 CSS 不容易做到。事實上，一直到最近，它還是不可能實現的效果。以前網頁設計師要實現鑽石形圖片，必須從原始圖片下手，先...

yowlonglee ‧ 2018-10-28

7 Like 0 留言 4674 瀏覽

鐵人賽影片教學 DAY 13

金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎系列第 13 篇

技術金魚都能懂網頁設計入門 : 排版的聖品 (鐵人賽第十三天)

教學影片不要錯過 CSS coke 的影片快按此訂閱CSS coke的頻道重點回顧關於Flex 預設子項目不換行預設子項目寬度自動縮減換行使用的屬性...

CSScoke ‧ 2018-10-28 ‧團隊阿莫斯の推坑教

2 Like 1 留言 4600 瀏覽

鐵人賽自我挑戰組 DAY 13

前端之 " wow~原來是這樣啊 " 系列第 13 篇

技術 Day13 CSS3 動畫 Transitions實作練習(上）

續上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中，...

Lai ‧ 2018-10-28 ‧團隊好想工作室第二屆鐵人賽

3 Like 0 留言 5474 瀏覽

鐵人賽 Modern Web DAY 13

前端「設計」聖光之路系列第 13 篇

技術文字大小、行高與空間上的關係

一般平面設計師再進入網頁環境時，會不清楚網頁設計所用的單位數值，造成設計稿與開發的畫面有嚴重的落差；且網頁設計本身有許多「慣用的數值」，建議一開始也能先使用大...

卡斯伯 ‧ 2018-10-27

3 Like 0 留言 7602 瀏覽

鐵人賽自我挑戰組 DAY 12

前端之 " wow~原來是這樣啊 " 系列第 12 篇

技術 Day12 講講 CSS3 動畫 - Transitions

在網頁中設定動畫效果，可以吸引使用者目光到特定區域，也可以與使用者間有更好的互動關係，以提升使用者經驗。在 CSS3 當中有兩個主要用來實現動畫的方式，分別爲...

Lai ‧ 2018-10-27 ‧團隊好想工作室第二屆鐵人賽

技術 RWD網頁等比例的區塊，我該如何選擇垂直置中的方式?

技術 IE8以上的網頁我該如何做垂直置中?

技術 Day15 CSS 動畫 Animation - 基礎篇

技術 使用 table 來做垂直置中區塊

技術 金魚都能懂網頁設計入門 : RWD選單(鐵人賽第二十三天)

技術 金魚都能懂網頁設計入門 : RWD排版試做(鐵人賽第二十二天)

技術 金魚都能懂網頁設計入門 : RWD入門(鐵人賽第二十一天)

技術 金魚都能懂網頁設計入門 : 媒體查詢 (鐵人賽第二十天)

技術 金魚都能懂網頁設計入門 : Animation(鐵人賽第十九天)

技術 金魚都能懂網頁設計入門 : Transition (鐵人賽第十八天)

技術 金魚都能懂網頁設計入門 : 排個稀飯版 (鐵人賽第十七天)

技術 金魚都能懂網頁設計入門 : Absolute定位 (鐵人賽第十六天)

技術 使用 Writing-mode 來做垂直置中區塊

技術 使用 Padding 來做垂直置中啦

技術 使用相對定位 Relative + translateY 來做垂直置中

技術 使用計算機 calc 來做到垂直置中效果

技術 使用 Display: table-cell 做網頁垂直置中

技術 使用 Grid + margin 來達到垂直置中目的

技術 使用 Grid + place-content 製作垂直置中區塊

技術 使用 Grid + place-items 來做垂直置中效果

技術 使用 Grid + align-self 達到垂直置中效果

技術 金魚都能懂網頁設計入門 : Relative定位 (鐵人賽第十五天)

技術 金魚都能懂網頁設計入門 : Fixed定位 (鐵人賽第十四天)