【主題一：Flexbox】單元： Flexbox基礎 彈性容器（flex container） 排列彈性項目 彈性內容 調整內容 對齊項目 align-sel...
最高為100px時出現捲軸 .content{ max-height: 100px; overflow: auto; } codepen
之前介紹過 SCSS 的基礎功能了，沒看過可以看這裡唷，這次來介紹一些小知識與進階的功能吧! SCSS 小知識 註解 SCSS 的註解有分為兩種，一種會被輸出一...
接續上篇繼續介紹剩下的功能，這邊就比較偏程式面，設計函式會比較常使用到，GO!GO!GO! 迴圈部分 迴圈可使用 @each 與 @for 來產生重複的樣式，使...
CSS 比較常用的有3種定位方式： position float flex 以新手來說，一開始學習定位的方式，以position居多。 其中最容易令人搞...
在練習的過程中，踩到了margin的地雷。 明明屬性值都對，在chrome的開發人員工具看，也都正常。 但版型就是不對，花了一段時間才找到原因。 來看看問題是怎...
CSS 專家密技筆記 自我筆記用 CSS 專家密技 CSS Coke講解 CSS 取得 data-* 內容 (實用) .test {...
CSS 動畫 animation 較複雜、客製化的動畫 @keyframe 使用必須考慮某些屬性的支援度 animation-* 語法 animation...
SCSS 倍數間格 @function line($count: 1){ @return $baseLineHeight * count } .test {...
JS Conf Youtube錄影 Animation purpose making context clear (突顯內容) displaying hier...
media type all 所有裝置 (此為默認值，可省略不寫) screen 螢幕裝置 print 印刷裝置 speech 朗讀裝置 @medi...
SASS / SCSS 簡介 SASS 是 CSS 的預處理器，它能編譯出原生 CSS，且提供了更多程式面的東西來撰寫 CSS，讓其更簡潔、更好維護，而 SAS...
誠徵網頁前端合作伙伴,希望能夠長期合作者為佳,至少網頁做一年以上吧,最好是常在切版,能夠做動畫之類的更好,然後可以介接API,希望是能夠前後端分離的,不過就算無...
重要的一天，記錄一些筆記: HTML ::after 解釋在原本的元件後面增加內容。 []的運用 style{ .img img[alt]{ wi...
相較於前一篇用文字記憶法，這篇則是用原始碼做為比較，詳細列出一眼辯英雄的矛盾大對決！從第5項實驗，我們成功證明了id確實強過class的效果！ 但是這時我突然靈...
幾年前當我們開始可以用:nth-child()/:nth-of-type()這類的CSS虛擬類別（pseudo-class）時，最常用來做「斑馬條紋的table...
就像我們偶爾遇到的雙胞胎同學～ 名字和樣子可能有所差距，但是到底誰先出生，誰才是哥哥或姊姊……大概只有接生的產醫才能清楚了。 現實生活或許可以不必追究長幼，但是...
需要用CSS換行的時機通常是在使用definition lists的時候，但有時在其他的場合也會有同樣需求。會使用definition lists因為我們想做一...
老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧，其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式，只是有些概念頗...
數位生態 蓋板廣告太常見到了，目前幾乎人手多機的情況下，我們每天幾乎都離不開上網這行為，上網除了上班用電腦以外，幾乎都是用行動裝置上網了，也就經常會看到蓋版廣告...
想轉職當網頁工程師，你有聽過 freeCodeCamp 嗎？ 轉職寫網頁？ 每當朋友說想要轉職當工程師，我都會推薦直接去寫網頁，因為資源豐富啊！而且市場需求...
其他角度的折角 前面我們做了45度的折角，但現實的折角並不會剛好都45度，如果要模擬得更為真實，我們可以試試看其他的角度，比如說用-150deg做30度的折角。...
設計師很喜歡在排版中將文字分散對齊，如果你看設計類雜誌或書籍就會發現到處都是。但是在網頁上，分散對齊卻很少用到，甚至連設計師們也少使用，為什麼呢？即使在CSS...
折角是一個很普遍的設計技巧 有許多有用的的CSS方法能實現這個效果，最早在2010年就有了，它的原理是用偽元素做二個三角形，一個跟背景色一樣，假裝是被折去的角，...
如果HTML是人，那CSS就決定了他的髮膚顏色，而JS則是這個人的行為。 其中，HTML負責確定網頁中有哪些內容。CSS確定如何展現元素的外觀(比如：大小、粗...
毛玻璃效果是指用一層半透明的色片覆蓋複雜的背景，讓在毛玻璃前面的文字能容易閱讀。會這麼做是因為在背景裡有些有趣的地方，我們希望保留給使用者看得見，同時也要讓在前...
分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上，目前走到了 Javascipt，幾週前開啓 scss 時，感到有點陌生啊~~ 人的記憶不可...
當你有一些形式各異的照片，卻要讓它們具有視覺上的一致性，一個常用且優雅的做法是先將照片灰階化，再加上同一種色調。在網頁設計上，會先在照片加上這種效果，然後在ho...
box-shadow在可使用border-radius的元素上，能產生很好的陰影效果。不過當用在偽元素或者其他透明的圖案上時就不管用了，因為box-shadow...
Amy
IrisAndMimi
yowlonglee
CSScoke
nienzu
Lai
iThome鐵人賽
看影片追技術