🆕 https://mnya.tw/cc/word/1340.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS】
之前才寫了一篇 SCSS 介紹文，馬上又回到原生 CSS 的教學啦！試用了 SCSS 後發現到其變數功能真的非常實用，就想查查看這幾年 CSS3 有沒有添加了變數...
#CSS #CSS變數 #原生變數 #變數 #CSS3 #Variables #介紹 #使用教學 #宣告變數 #var #呼叫變數 #網站技術 #樣式表
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS】
之前才寫了一篇 SCSS 介紹文，馬上又回到原生 CSS 的教學啦！試用了 SCSS 後發現到其變數功能真的非常實用，就想查查看這幾年 CSS3 有沒有添加了變數...
#CSS #CSS變數 #原生變數 #變數 #CSS3 #Variables #介紹 #使用教學 #宣告變數 #var #呼叫變數 #網站技術 #樣式表
萌芽綜合天地
CSS 原生變數（Variables）介紹與使用教學：- 宣告變數、var() 呼叫變數 - 萌芽綜合天地 - 萌芽網頁
之前才寫了一篇 SCSS 介紹文，馬上又回到原生 CSS 的教學啦！試用了 SCSS 後發現到其變數功能真的非常實用，就想查查看這幾年 CSS3 有沒有添加了變數功能（Variables） […]
🆕 https://mnya.tw/cc/word/1349.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS , ⚙️JavaScript , ⚙️Node.js】
「Autoprefixer」這款套件（CSS 後處理器）運用最新「Can I Use.」的資訊幫助開發者可以自動化添加或移除這些供應商前綴，超級方便...
#Node_js #Gulp #運行 #Autoprefixer #批次處理 #CSS供應商前綴問題 #CSS供應商前綴 #CSS #供應商前綴 #Yarn #Can_I_Use #gulp_postcss #gulp_sourcemaps #網站技術 #JavaScript #JS
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS , ⚙️JavaScript , ⚙️Node.js】
「Autoprefixer」這款套件（CSS 後處理器）運用最新「Can I Use.」的資訊幫助開發者可以自動化添加或移除這些供應商前綴，超級方便...
#Node_js #Gulp #運行 #Autoprefixer #批次處理 #CSS供應商前綴問題 #CSS供應商前綴 #CSS #供應商前綴 #Yarn #Can_I_Use #gulp_postcss #gulp_sourcemaps #網站技術 #JavaScript #JS
萌芽綜合天地
Node.js：Gulp 運行 Autoprefixer，批次處理 CSS 供應商前綴問題 - 萌芽綜合天地 - 萌芽網頁
《上一篇：Node.js：Gulp 運行 imagemin-mozjpeg，mozjpeg 批次圖片壓縮》已經成功在 Node.js 環境中運用 Gulp 這款任務管理工具加上「imagemin」 […]
🆕 https://mnya.tw/cc/word/1351.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS , ⚙️JavaScript , ⚙️Node.js】
上一篇已經可以知道 Node.js 環境下 Gulp 任務管理工具可以幫助我們快速處理工程師不想手動完成的事情，這篇要講的主題是壓縮 CSS...
#Node_js #Gulp #運行 #gulp_clean_css #clean_css #gulp_sourcemaps #網站技術 #JavaScript #JS #CSS #批次壓縮CSS #批次壓縮 #壓縮CSS
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS , ⚙️JavaScript , ⚙️Node.js】
上一篇已經可以知道 Node.js 環境下 Gulp 任務管理工具可以幫助我們快速處理工程師不想手動完成的事情，這篇要講的主題是壓縮 CSS...
#Node_js #Gulp #運行 #gulp_clean_css #clean_css #gulp_sourcemaps #網站技術 #JavaScript #JS #CSS #批次壓縮CSS #批次壓縮 #壓縮CSS
萌芽綜合天地
Node.js：Gulp 運行 gulp-clean-css，批次壓縮 CSS - 萌芽綜合天地 - 萌芽網頁
《上一篇：Node.js：Gulp 運行 Autoprefixer，批次處理 CSS 供應商前綴問題》已經可以知道 Node.js 環境下 Gulp 任務管理工具可以幫助我們快速處理工程師不想 […]
🆕 https://mnya.tw/cc/word/1410.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🖥HTML , 🎨CSS , ⚙️JavaScript , ⚙️jQuery】
網頁上也能使用 Emoji（表情貼／表情符號），網頁原生表情貼就是直接採用系統內建的圖示，但 Emoji 發展得相當快速，有時候系統更新速度常常不夠快，導致部分...
#Twemoji #網頁原生表情貼 #完美替換 #Twitter表情貼 #示範 #Twitter #表情貼 #表情符號 #圖示 #Emoji #網站技術 #HTML #CSS #JavaScript #jQuery
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🖥HTML , 🎨CSS , ⚙️JavaScript , ⚙️jQuery】
網頁上也能使用 Emoji（表情貼／表情符號），網頁原生表情貼就是直接採用系統內建的圖示，但 Emoji 發展得相當快速，有時候系統更新速度常常不夠快，導致部分...
#Twemoji #網頁原生表情貼 #完美替換 #Twitter表情貼 #示範 #Twitter #表情貼 #表情符號 #圖示 #Emoji #網站技術 #HTML #CSS #JavaScript #jQuery
萌芽綜合天地
Twemoji：網頁原生表情貼完美替換成 Twitter 表情貼示範 – 萌芽綜合天地
網頁上也能使用 Emoji（表情貼／表情符號），網頁原生表情貼就是直接採用系統內建的圖示，但 Emoji 發展得相當快速，有時候系統更新速度常常不夠快，導致部分 Emoji 顯示錯誤，而且系統原生 Emoji 說真的不是說非常好看，所以才會想到要使用 Twemoji 這款表情貼來替換掉網頁上所有的原生 Emoji，Twemoji 是由推特（Twitter）提供的開源表情包，基於 Unicode。
🆕 https://mnya.tw/cc/word/1422.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript , ⚙️jQuery】
🍪 Cookie（餅乾）在網路世界中無所不在，可以讓使用者儲存網頁設定到瀏覽器中，下次瀏覽時網站就能提供更個人化的服務給同位訪客，其實是一個不錯運用的技術...
#js_cookie #運用餅乾製作簡易黑暗模式示範 #黑暗模式 #夜間模式 #深色模式 #Cookie #餅乾 #示範 #教學 #網站技術 #HTML #CSS #JavaScript #JS #jQuery
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript , ⚙️jQuery】
🍪 Cookie（餅乾）在網路世界中無所不在，可以讓使用者儲存網頁設定到瀏覽器中，下次瀏覽時網站就能提供更個人化的服務給同位訪客，其實是一個不錯運用的技術...
#js_cookie #運用餅乾製作簡易黑暗模式示範 #黑暗模式 #夜間模式 #深色模式 #Cookie #餅乾 #示範 #教學 #網站技術 #HTML #CSS #JavaScript #JS #jQuery
萌芽綜合天地
js-cookie 運用餅乾製作簡易黑暗模式示範 – 萌芽綜合天地
🍪 Cookie（餅乾）在網路世界中無所不在，可以讓使用者儲存網頁設定到瀏覽器中，下次瀏覽時網站就能提供更個人化的服務給同位訪客，其實是一個不錯運用的技術！因此萌芽站長就決定應用它來製作現在非常流行的「🌙 黑暗模式」，也有人叫做「夜間模式」或「深色模式」，其實都是一樣的功能，也就是把原先白底黑字為主的版面切換成黑底白字為主，可能有些人以為這要用到「後端技術」，事實上完全不需要後端程式，
🆕 https://mnya.tw/cc/word/1432.html
【✨精選文章；作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🌐網站技術 , 🎨CSS , 🎨Sass/SCSS , ⚙️JavaScript , 🗂Node.js , 🗃Webpack , 📄Visual Studio Code】
上一篇我們已經講到 Webpack 的基礎概念與如何做 JS（JavaScript） 的封裝，這一篇則是要教大家如何用 Webpack 封裝 CSS 與 SCSS...
#Node_js #Nodejs #Webpack #封裝CSS #封裝SCSS #封裝 #CSS #SCSS #Sass #JS #JavaScript #使用VSCode #VSCode #Visual_Studio_Code #軟體應用 #網站技術 #網頁壓縮 #網頁封裝 #壓縮 #封裝
【✨精選文章；作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🌐網站技術 , 🎨CSS , 🎨Sass/SCSS , ⚙️JavaScript , 🗂Node.js , 🗃Webpack , 📄Visual Studio Code】
上一篇我們已經講到 Webpack 的基礎概念與如何做 JS（JavaScript） 的封裝，這一篇則是要教大家如何用 Webpack 封裝 CSS 與 SCSS...
#Node_js #Nodejs #Webpack #封裝CSS #封裝SCSS #封裝 #CSS #SCSS #Sass #JS #JavaScript #使用VSCode #VSCode #Visual_Studio_Code #軟體應用 #網站技術 #網頁壓縮 #網頁封裝 #壓縮 #封裝
萌芽綜合天地
Node.js：Webpack 封裝 CSS、SCSS 成單一 JS 教學（使用 VS Code） – 萌芽綜合天地
上一篇：Node.js：Webpack 基礎概念與 JS 封裝過程教學（使用 VS Code）》我們已經講到 Webpack 的基礎概念與如何做 JS（JavaScript） 的封裝，這一篇則是要教大家如何用 Webpack 封裝 CSS 與 SCSS，而且最終是跟原來的 JS 一起包裝成單一個 JS 檔！這樣最終的「產品」只要要求一個 JS 檔案就可以同時獲得所有需要的樣式表與腳本了！
🆕 https://mnya.tw/cc/word/1435.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , 🎨CSS , ⚙️JavaScript , 🎬串流錄製】
在 OBS（Open Broadcaster Software） 場景中放上日期與時間一點都不困難！只要透過內建的瀏覽器就可以辦到！熱心的網友...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #日期與時間 #日期時間 #日期 #時間 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , 🎨CSS , ⚙️JavaScript , 🎬串流錄製】
在 OBS（Open Broadcaster Software） 場景中放上日期與時間一點都不困難！只要透過內建的瀏覽器就可以辦到！熱心的網友...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #日期與時間 #日期時間 #日期 #時間 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製
萌芽綜合天地
OBS：新增日期與時間至錄影或串流中 – 萌芽綜合天地
在 OBS（Open Broadcaster Software） 場景中放上日期與時間一點都不困難！只要透過內建的瀏覽器就可以辦到！熱心的網友「sam0737」在 GitHub 中公開給大家一個簡單的網頁工具，這是運用 JavaScript 寫的時間顯示器，建議直接用他提供的 CDN 比較方便，只要改網址中的參數，就可以自訂 Style（樣式）與 Format（格式），
🆕 https://mnya.tw/cc/word/1436.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , ⚙️JavaScript , 🎬串流錄製】
因為要開氣象圖資直播的關係，我發現大多氣象單位所提供的圖資都是要手動重新載入才可以獲取最新的圖資，OBS（Open Broadcaster Software）內建的瀏覽器也...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #抓參數可指定間隔時間不斷重新載入指定網址 #抓參數 #指定間隔時間不斷重新載入 #重新載入指定網址 #重新載入 #OBS瀏覽器自動重載解決方案 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , ⚙️JavaScript , 🎬串流錄製】
因為要開氣象圖資直播的關係，我發現大多氣象單位所提供的圖資都是要手動重新載入才可以獲取最新的圖資，OBS（Open Broadcaster Software）內建的瀏覽器也...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #抓參數可指定間隔時間不斷重新載入指定網址 #抓參數 #指定間隔時間不斷重新載入 #重新載入指定網址 #重新載入 #OBS瀏覽器自動重載解決方案 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製
萌芽綜合天地
JavaScript 抓參數可指定間隔時間不斷重新載入指定網址（OBS 瀏覽器自動重載解決方案） – 萌芽綜合天地
因為要開氣象圖資直播的關係，我發現大多氣象單位所提供的圖資都是要手動重新載入才可以獲取最新的圖資，OBS（Open Broadcaster Software）內建的瀏覽器也不支援指定時間不斷重新載入，因此我決定用純網頁前端的技術來自行製作 OBS 瀏覽器自動重載解決方案！ 簡單運用 JavaScript 抓取網址「?」後方之參數，我們可以將自訂的網址（url…
🆕 https://mnya.tw/cc/word/1504.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
開場我就先說，純 CSS 無法做到，因為 CSS 無法由子元素的 hover（游標碰觸）來變更父元素的樣式，所以就要用到萬能的 JavaScript！運用 DOM 的控制來做到 CSS...
#JavaScript #游標碰觸子元素使父元素樣式變更 #子元素 #父元素 #樣式變更 #HTML #CSS #hover #游標碰觸 #mouseover #mouseout #事件 #addEventListener #監聽
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
開場我就先說，純 CSS 無法做到，因為 CSS 無法由子元素的 hover（游標碰觸）來變更父元素的樣式，所以就要用到萬能的 JavaScript！運用 DOM 的控制來做到 CSS...
#JavaScript #游標碰觸子元素使父元素樣式變更 #子元素 #父元素 #樣式變更 #HTML #CSS #hover #游標碰觸 #mouseover #mouseout #事件 #addEventListener #監聽
萌芽綜合天地
JavaScript：游標碰觸子元素使父元素樣式變更 – 萌芽綜合天地
開場我就先說，純 CSS 無法做到，因為 CSS 無法由子元素的 hover（游標碰觸）來變更父元素的樣式，所以就要用到萬能的 JavaScript！運用 DOM 的控制來做到 CSS 目前做不到的事情！這次主題為「游標碰觸子元素使父元素樣式變更」。 需要用到的 JavaScript 事件有兩個：mouseover 與 mouseout，前者代表游標碰觸到元素，後者代表游標沒有碰觸到元素。
🆕 https://mnya.tw/cc/word/1545.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS】
很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉...
#純CSS #網頁元素水平垂直置中 #網頁元素 #水平垂直置中 #置中 #網頁元素置中央 #置中央 #HTML #CSS #網站技術
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS】
很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉...
#純CSS #網頁元素水平垂直置中 #網頁元素 #水平垂直置中 #置中 #網頁元素置中央 #置中央 #HTML #CSS #網站技術
萌芽綜合天地
純 CSS 做到網頁元素水平垂直置中、置中央 – 萌芽綜合天地
很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉！這邊直接示範把網頁元素置於整個網頁畫面的中央位置，這樣如果你要做其他的運用也只要簡單修改就可以做到。 這邊首先要把 、 設定為寬高都為 100%，接著建立一個 容器設定 display 為 flex，接著設定兩個屬性給這個容器： align-items 是垂直方向對齊；
🆕 https://mnya.tw/cc/word/1547.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
JavaScript 有個內建的事件 DeviceOrientationEvent 可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的 transform 就可以做到翻轉裝置使圖片三維翻轉的效果...
#JavaScript #JS #HTML #CSS #transform #陀螺儀 #陀螺儀使圖片三維翻轉 #圖片三維翻轉 #圖片 #三維翻轉 #翻轉裝置 #網站技術 #DeviceOrientationEvent #事件 #DeviceOrientation #監聽
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
JavaScript 有個內建的事件 DeviceOrientationEvent 可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的 transform 就可以做到翻轉裝置使圖片三維翻轉的效果...
#JavaScript #JS #HTML #CSS #transform #陀螺儀 #陀螺儀使圖片三維翻轉 #圖片三維翻轉 #圖片 #三維翻轉 #翻轉裝置 #網站技術 #DeviceOrientationEvent #事件 #DeviceOrientation #監聽
萌芽綜合天地
JavaScript & CSS 陀螺儀使圖片三維翻轉 – 萌芽綜合天地
JavaScript 有個內建的事件 可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的 就可以做到翻轉裝置使圖片三維翻轉的效果！當然這只是測試時好玩做出來的效果，實際上若結合指北、指南等，將可以做到更多應用！這邊簡單列出會用到的三個方向值： 值為裝置水平放置時的 Z 軸動向，介於 0 ~ 360 度之間，可以想像裝置放在桌面上轉動（？）。 值為裝置水平放置時的 X 軸動向，介於 -180 ~…
🆕 https://mnya.tw/cc/word/1559.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網路應用 , 🌐網站技術 , 🎨CSS】
昨天開始著手研究網頁字體的運用，研究了一個晚上到隔天凌晨終於完成！萌芽系列網站也已經成功套用了全新的網頁字體（Web Font）。在研究的過程中發現...
#Font_Converter #線上字體轉換器 #線上轉換器 #轉換器 #網頁字體生成器 #生成器 #網頁字體 #網頁字型 #字體 #字型 #Web_Font #Font #TTF #OTF #EOT #SVG #WOFF #WOFF2 #網路應用 #網站技術 #CSS
【作者：萌芽站長；💻萌芽綜合天地；🌐網路應用 , 🌐網站技術 , 🎨CSS】
昨天開始著手研究網頁字體的運用，研究了一個晚上到隔天凌晨終於完成！萌芽系列網站也已經成功套用了全新的網頁字體（Web Font）。在研究的過程中發現...
#Font_Converter #線上字體轉換器 #線上轉換器 #轉換器 #網頁字體生成器 #生成器 #網頁字體 #網頁字型 #字體 #字型 #Web_Font #Font #TTF #OTF #EOT #SVG #WOFF #WOFF2 #網路應用 #網站技術 #CSS
萌芽綜合天地
Font Converter：線上字體轉換器、網頁字體生成器 – 萌芽綜合天地
昨天開始著手研究網頁字體的運用，研究了一個晚上到隔天凌晨終於完成！萌芽系列網站也已經成功套用了全新的網頁字體（Web Font）。在研究的過程中發現到一般網路上的開源字體不一定會提供每種字體格式，因此就需要轉換器，不過要一個個轉還要撰寫網頁字體需要用到的 CSS 可說是相當費力的工作，不過站長找到一個很棒的線上工具 – 「Font Converter」，不僅能一次轉換各種字體格式，
🆕 https://mnya.tw/cc/word/1560.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 🎨CSS】
CSS 樣式表內的 @font-face 可用來自定義字體（字型），其中有個 unicode-range 屬性用來設置 @font-face 定義字體所要使用的特定字元範圍（或者說 Unicode 區段）...
#CSS #font_face #unicode_range #描述自定義字體中使用的字元範圍 #自定義字體 #自定義字型 #字體 #字型 #字元範圍 #Unicode區段 #Unicode #區段 #CSS #網站技術
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 🎨CSS】
CSS 樣式表內的 @font-face 可用來自定義字體（字型），其中有個 unicode-range 屬性用來設置 @font-face 定義字體所要使用的特定字元範圍（或者說 Unicode 區段）...
#CSS #font_face #unicode_range #描述自定義字體中使用的字元範圍 #自定義字體 #自定義字型 #字體 #字型 #字元範圍 #Unicode區段 #Unicode #區段 #CSS #網站技術
萌芽綜合天地
CSS unicode-range 描述自定義字體中使用的字元範圍（Unicode 區段） – 萌芽綜合天地
CSS 樣式表內的 可用來自定義字體（字型），其中有個 屬性用來設置 @font-face 定義字體所要使用的特定字元範圍（或者說 Unicode 區段），並提供給頁面顯示讓使用者可以看到。如果頁面沒有使用這個範圍內的任何字元，則不會下載該字體；如果至少使用了一個，則會下載整個字體。這個屬性的目的主要是對字體資源進行分段處理，這樣瀏覽器只需要下載特定頁面文本內容所需的字體資源，可節省網路流量。