iT邦幫忙

linear-gradient相關文章
共有 7 則文章

技術 旅館預約服務練習紀錄-首頁練習

前言 這次找了 The F2E 前端修練時光屋 的稿件,找到了這份稿件(如果您有興趣,可以再找自己喜歡的設計稿來練功)。 其實原本滿逃避面對這件事情,因為對於...

鐵人賽 自我挑戰組 DAY 27
網頁學習紀錄 系列 第 27

技術 鐵人賽 Day27 人員卡片介紹:加上互動色彩

人員卡片介紹除了可以做一點動態的互動外,顏色上的互動特效也是非常棒的特效效果!這次想做的感覺如下圖: 這部分的 SCSS 如下: .card { wid...

鐵人賽 Modern Web DAY 14
CSS Secrets 導讀 系列 第 14

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

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

鐵人賽 Modern Web DAY 10
CSS Secrets 導讀 系列 第 10

技術 Secret 8: 不間斷的圖片邊界

有時我們想在邊界而不是背景裡放圖片或是圖案以美化border。而且圖案會填滿整個容器,隨著容器改變尺寸但是比例維持不變,如同backgroud-size: co...

鐵人賽 Modern Web DAY 9
CSS Secrets 導讀 系列 第 9

技術 Secret 7:(偽)隨機背景圖案

在自然界完美重複的圖案根本是不存在,即使是同一品種的花,一定會有少許差異,沒有二朵花是完全一模一樣。 再看一下前面我們做的練習,一模一樣的圖案有規律的重複,不管...

鐵人賽 Modern Web DAY 8
CSS Secrets 導讀 系列 第 8

技術 Secret 6: 更多的背景圖案

世界上並非只有條紋還有許多種圖案像是網格、點點、棋盤等等。好消息是 CSS gradients 幾乎做得到! 上一篇文章我們只使用了一個 linear-gra...

鐵人賽 Modern Web DAY 7
CSS Secrets 導讀 系列 第 7

技術 Secret 5: 條紋背景

條紋是種常見的 pattern. 網頁設計要製作條紋最簡單的方法是用圖片做背景,不過這樣一來修改時就需要麻煩設計師出手。有些人可能會用 SVG,但是這樣還是需要...