iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

sass&css 30天學習日誌 系列

參加第二次鐵人賽,藉由網頁排版30天日誌,期望排版速度和效率能慢慢變快!!

鐵人鍊成 | 共 30 篇文章 | 61 人訂閱 訂閱系列文 RSS系列文
DAY 11

CSS: transform 應用(2)

hover特效中,常看到滑過圖片會縮放和文字區塊從上下方向滑入,如下面網站https://tympanus.net/Tutorials/OriginalHove...

2018-10-15 ‧ 由 yuski 分享
DAY 12

CSS: SVG上色

很多網站為了不讓重要圖片不會因為縮放而失真,所以都使用SVG圖片,優點是放大不失真,可用語法去修改,在此利用css來做上色詳情可看: http://t.cn/E...

2018-10-16 ‧ 由 yuski 分享
DAY 13

CSS: Calc +nth選擇器應用: 欄位排版

在做購物網站必定會有產品列表網頁,產品欄位之間的尺寸間距常因為不同需求而有所變動因此在這範例中嘗試用Calc和 nth-of-type選擇器編排 流程如下:...

2018-10-17 ‧ 由 yuski 分享
DAY 14

CSS: CSS Sprite icon 圖示合併

網頁menu li選單最常用滑鼠滑過換圖的特效,通常都是合併icon圖片為一張圖,製作網頁時後再慢慢往上往下多少px,實在很耗工,網路上有線上合併icon工具,...

2018-10-18 ‧ 由 yuski 分享
DAY 15

CSS: 陰影原理應用

css陰影可分為3種常見效果:drop-shadow、box-shadow、text-shadow除了text-shadow是文字陰影外,其他兩個最常使用在圖...

2018-10-19 ‧ 由 yuski 分享
DAY 16

SASS : VSCode 套件安裝

之前有寫過使用「prepros」學習SASShttps://ithelp.ithome.com.tw/articles/10193263 事實上諸如大部分的線上...

2018-10-20 ‧ 由 yuski 分享
DAY 17

SASS&CSS : 程式註解、大於符號、inline-block

使用SASS會常用到巢狀結構,詳情可看https://ithelp.ithome.com.tw/articles/10192987遇到需要指定某些子層才會作用時...

2018-10-21 ‧ 由 yuski 分享
DAY 18

SASS : 變數-運算單位

CSS常會看到重複性的樣式設定,在SASS會給予「變數」省下不少時間去修改,詳情可看這篇:https://ithelp.ithome.com.tw/articl...

2018-10-22 ‧ 由 yuski 分享
DAY 19

SASS : #{ } 插值

css使用calc可提升計算的效率https://ithelp.ithome.com.tw/articles/10202197但如果在使用Sass時候,把cal...

2018-10-23 ‧ 由 yuski 分享
DAY 20

SASS : extend繼承

sass中extend 是用來把css中重複的樣式作模組化,未來如要修改語法,只要改一次就能全部修改 以下是他的介紹: 新增extend內容 用a標籤作成按...

2018-10-24 ‧ 由 yuski 分享