作品網址:https://steven5j.github.io/03-CSS-Variables/

↑每次進去圖片都會不一樣↑

思考需求分析

1.spacing對應到下方圖片的邊框寬。

2. blur 會對應到下方圖片整體的模糊度。

3.color點下去會跳出顏色選擇框,然後可調整顏色。

4.color調整顏色後,標題JS 和圖片外框顏色會變化。

5.當滑鼠移動 spacing 和blur的範圍調整器的時候,下方圖片會監聽這個動作並產生相應的狀態。

特別技術、函式

<HTML>

<input type=”color”>:是input元素中的一個特定種類,用來創建一個允許用戶使用顏色選擇器,或輸入兼容CSS語法的顏色代碼的區域。(不支持Alpha通道)此元素的外觀會因瀏覽器不同而不同,可能是簡單的驗證顏色輸入格式的文本框,也可能使用平台原生或自定義樣式的顏色選擇器。

<CSS>

 CSS 原生變數(Variables):– 宣告變數、var() 呼叫變數

:root:代表文檔樹的根元素,在聲明全局CSS變量時很有用。

<JavaScript>

dataset: 當我們要取得 data-* attribute 的屬性值時,我們可以簡單利用 JavaScript 中的 dataset 物件,就可以取得了

documentElement:屬性以一個元素對象返回一個文檔的文檔元素。

參考資料

SASS, LESS 退散,原生 CSS 可以使用變數啦!:https://muki.tw/tech/native-css-variables/

CSS3 :root 选择器: https://www.w3school.com.cn/cssref/selector_root.asp

filter: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

JS 30 – 03 – CSS Variables:https://ithelp.ithome.com.tw/articles/10202668

[技術分享] 什麼是 HTML 5 中的資料屬性(data-* attribute): https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html

發佈留言