iT邦幫忙

鐵人檔案

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

sass&css 30天學習日誌 系列

鐵人鍊成 | 共 30 篇文章 | 37 人訂閱 訂閱系列文
DAY 1

CSS: Checked基本原理

前言: 今年採用的主題是CSS和SASS,透過參加這次活動,把CSS和SASS基礎觀念給建立好,所以有些文章內會直接取材大神的教學內容,文章內也會註明! 特...

2018-10-05 ‧ 由 yuski 分享
DAY 2

CSS: Checked原理應用--Toggle Switch開關

使用checkbox label來做switch開關,如下圖 html <div> <label> <input t...

2018-10-06 ‧ 由 yuski 分享
DAY 3

CSS: Checked原理應用--Tab Panel

Tab Panel面板是單一切換對應內容,所以用radio單選方式比較適合 html <div class="panel-group&quo...

2018-10-07 ‧ 由 yuski 分享
DAY 4

CSS: 偽元素應用- input icon

輸入帳戶、email等資料常看見有小的icon,在此整理兩種作法 使用icon字型(font awesome) 1.載入icon字型(font awesom...

2018-10-08 ‧ 由 yuski 分享
DAY 5

CSS: 偽元素應用- tooltip對話框

對話框主要是由正方形和三角形組成,之後把三角型移動到正方形下面就成了對話框 三角形製作原理 從下圖範例看正方形4個border加寬可看出,border斜邊組...

2018-10-09 ‧ 由 yuski 分享
DAY 6

CSS: 偽元素應用- Ribbon緞帶

流程如下: 1.建立旋轉緞帶 2.裁剪緞帶 3.建立緞帶背面陰影 4.套用到圖片 成品如圖: 1.建立旋轉緞帶 html <div class=&q...

2018-10-10 ‧ 由 yuski 分享
DAY 7

CSS: 偽元素應用- Step progress bar 進度條

進度條使用 ul和li搭配偽元素before和after,結果如下圖 流程如下: 1.排放li位置,使用偽元素放內容 2.使用計數器 3.加上線條 4.設定...

2018-10-11 ‧ 由 yuski 分享
DAY 8

CSS: 偽元素應用- 背景

在此做的背景效果有兩個:毛玻璃和彩色透明背景 如下圖: 毛玻璃 上圖中可看出模糊的圖案是最底層的背景圖,並且滑動時,該區塊以內的背景是模糊的,所以背景和毛玻璃...

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

CSS: RWD技巧-等比例圖片、隱藏多餘文字

使用手機、平板、電腦時會有縮放顯示問題,在此提出幾個常見案例: 圖片等比例 也就是圖片隨裝置縮放以圖片中間裁減縮放,不會整張圖隨著裝置大小縮放,圖片也比較大張,...

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

CSS: transform 應用(1)

滑動區塊是網頁常用的視覺技巧,六角學院的jQuery課程中有兩個簡單效果: 滑動廣告: 滑到圖片時候,文字區塊由下往上移動 滑動選單: 點擊黑色區塊,紅色選單...

2018-10-14 ‧ 由 yuski 分享