🆕 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

🆕 https://mnya.tw/cc/word/1410.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🖥HTML , 🎨CSS , ⚙️JavaScript , ⚙️jQuery】
網頁上也能使用 Emoji（表情貼／表情符號），網頁原生表情貼就是直接採用系統內建的圖示，但 Emoji 發展得相當快速，有時候系統更新速度常常不夠快，導致部分...
#Twemoji #網頁原生表情貼 #完美替換 #Twitter表情貼 #示範 #Twitter #表情貼 #表情符號 #圖示 #Emoji #網站技術 #HTML #CSS #JavaScript #jQuery

🆕 https://mnya.tw/cc/word/1422.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript , ⚙️jQuery】
🍪 Cookie（餅乾）在網路世界中無所不在，可以讓使用者儲存網頁設定到瀏覽器中，下次瀏覽時網站就能提供更個人化的服務給同位訪客，其實是一個不錯運用的技術...
#js_cookie #運用餅乾製作簡易黑暗模式示範 #黑暗模式 #夜間模式 #深色模式 #Cookie #餅乾 #示範 #教學 #網站技術 #HTML #CSS #JavaScript #JS #jQuery

🆕 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 #軟體應用 #網站技術 #網頁壓縮 #網頁封裝 #壓縮 #封裝

🆕 https://mnya.tw/cc/word/1435.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , 🎨CSS , ⚙️JavaScript , 🎬串流錄製】
在 OBS（Open Broadcaster Software） 場景中放上日期與時間一點都不困難！只要透過內建的瀏覽器就可以辦到！熱心的網友...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #日期與時間 #日期時間 #日期 #時間 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製

🆕 https://mnya.tw/cc/word/1436.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🎞多媒體 , 🌐網路應用 , ⌨️網站技術 , ⚙️JavaScript , 🎬串流錄製】
因為要開氣象圖資直播的關係，我發現大多氣象單位所提供的圖資都是要手動重新載入才可以獲取最新的圖資，OBS（Open Broadcaster Software）內建的瀏覽器也...
#OBS #Open_Broadcaster_Software #錄影 #串流 #網路串流 #內建瀏覽器 #瀏覽器 #抓參數可指定間隔時間不斷重新載入指定網址 #抓參數 #指定間隔時間不斷重新載入 #重新載入指定網址 #重新載入 #OBS瀏覽器自動重載解決方案 #CDN #軟體應用 #多媒體 #網路應用 #網站技術 #CSS #JavaScript #JS #串流錄製

🆕 https://mnya.tw/cc/word/1504.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
開場我就先說，純 CSS 無法做到，因為 CSS 無法由子元素的 hover（游標碰觸）來變更父元素的樣式，所以就要用到萬能的 JavaScript！運用 DOM 的控制來做到 CSS...
#JavaScript #游標碰觸子元素使父元素樣式變更 #子元素 #父元素 #樣式變更 #HTML #CSS #hover #游標碰觸 #mouseover #mouseout #事件 #addEventListener #監聽

🆕 https://mnya.tw/cc/word/1545.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS】
很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉...
#純CSS #網頁元素水平垂直置中 #網頁元素 #水平垂直置中 #置中 #網頁元素置中央 #置中央 #HTML #CSS #網站技術

🆕 https://mnya.tw/cc/word/1547.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️JavaScript】
JavaScript 有個內建的事件 DeviceOrientationEvent 可用來獲得裝置陀螺儀的動向/方向資訊，結合 CSS 的 transform 就可以做到翻轉裝置使圖片三維翻轉的效果...
#JavaScript #JS #HTML #CSS #transform #陀螺儀 #陀螺儀使圖片三維翻轉 #圖片三維翻轉 #圖片 #三維翻轉 #翻轉裝置 #網站技術 #DeviceOrientationEvent #事件 #DeviceOrientation #監聽

🆕 https://mnya.tw/cc/word/1559.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網路應用 , 🌐網站技術 , 🎨CSS】
昨天開始著手研究網頁字體的運用，研究了一個晚上到隔天凌晨終於完成！萌芽系列網站也已經成功套用了全新的網頁字體（Web Font）。在研究的過程中發現...
#Font_Converter #線上字體轉換器 #線上轉換器 #轉換器 #網頁字體生成器 #生成器 #網頁字體 #網頁字型 #字體 #字型 #Web_Font #Font #TTF #OTF #EOT #SVG #WOFF #WOFF2 #網路應用 #網站技術 #CSS

🆕 https://mnya.tw/cc/word/1560.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 🎨CSS】
CSS 樣式表內的 @font-face 可用來自定義字體（字型），其中有個 unicode-range 屬性用來設置 @font-face 定義字體所要使用的特定字元範圍（或者說 Unicode 區段）...
#CSS #font_face #unicode_range #描述自定義字體中使用的字元範圍 #自定義字體 #自定義字型 #字體 #字型 #字元範圍 #Unicode區段 #Unicode #區段 #CSS #網站技術

🆕 https://mnya.tw/cc/word/1595.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 🎨CSS】
一般來說如果網頁要使用文字的修飾線條，都會用到 CSS 的「text-decoration」屬性，不過這個傳統的屬性並沒辦法做太多動態的變化，因此這次教大家使用...
#CSS #text_decoration #background_image #動態下橫線 #動態底線 #動態 #下橫線 #底線 #網站技術

🆕 https://mnya.tw/cc/word/1596.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 🎨CSS】
以前在網頁上做背景毛玻璃非常麻煩，要特別在需要毛玻璃背景的元素上加偽元素 ::before，然後直接對偽元素加網頁背景影像本身 + filter: blur(5px);，數值可調整...
#CSS #backdrop_filter #原生背景毛玻璃 #原生毛玻璃背景 #原生 #背景毛玻璃 #毛玻璃背景 #背景 #毛玻璃 #網站技術

🆕 https://mnya.tw/cc/word/1720.html
【作者：萌芽站長；💻萌芽綜合天地； 🌐網站技術 , 📄HTML , 🎨CSS , 🟪Bootstrap】
近期 Bootstrap 穩定版已經開發到 5.1 了！不過很多人還是用較舊的版本在進行網頁的開發，而我自己在用 Bootstrap 3.4.1 做面板（Panel）時，就發現了其一個很棒的功能...
#Bootstrap_3_4_1 #多彩改良式可折疊面板 #多彩 #改良式 #可折疊面板 #可折疊 #面板 #Panel #HTML #CSS #Bootstrap #網站技術

🆕 https://mnya.tw/cc/word/1735.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕，特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕，輕鬆就能使用！基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術

🆕 https://mnya.tw/cc/word/1737.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS】
某些狀況之下，需要在網頁上做區塊輪播的效果，以達到一個畫面可以顯示更多資訊的目的，舉例來說：要顯示的資料過多、一次顯示在畫面上會很雜亂...
#純CSS區塊輪播效果 #純CSS #區塊輪播效果 #區塊輪播 #區塊 #輪播 #HTML #CSS #網站技術

🆕 https://mnya.tw/cc/word/1746.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS】
::-webkit-scrollbar 是 CSS 的一種虛擬（偽）類別選擇器，可以針對特定元件或全局修改其捲軸樣式，但僅適用於支援 WebKit 的瀏覽器，舉例來說...
#webkit_scrollbar #純CSS捲軸 #CSS捲軸 #捲軸 #WebKit #虛擬類別選擇器 #類別選擇器 #類別 #選擇器 #CSS #網站技術

🆕 https://mnya.tw/cc/word/1747.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 🎨CSS】
CSS Scrollbars 標準化了 Windows IE 5.5 在西元 2000 年引入的過時捲軸顏色屬性，這個屬性可以自訂捲軸的寬度與顏色，但可用的選項與整體自由度就比 Webkit 瀏覽器支援...
#CSS_Scrollbars #Scrollbars #自定義捲軸樣式s #自定義 #捲軸樣式 #捲軸 #僅支援Firefox #CSS屬性 #屬性 #CSS #網站技術

🆕 https://mnya.tw/cc/word/1810.html
【作者：萌芽站長；💻萌芽綜合天地；🌐網站技術 , 📄HTML , 🎨CSS】
Master 是一套由台灣人開發的前端框架，倡導虛擬 CSS（Virtual CSS）的概念，將 CSS 語法都寫在 HTML 的 class 中，這樣開發者就不用每次都還要去想怎麼命名 class，或者...
#Master #虛擬CSS #Virtual_CSS #快速製作響應式GRID格線佈局 #響應式 #響應式網頁設計 #RWD #GRID格線佈局 #GRID #格線佈局 #HTML #CSS #網站技術

🆕 https://mnya.tw/cc/word/1811.html
【作者：萌芽站長；💻萌芽綜合天地；🖥軟體應用 , 🌐網站技術 , 📄HTML , 🎨CSS , ⚙️Visual Studio Code】
「Visual Studio Code」是由微軟（Microsoft）開發的開放原始碼程式編輯器。
「Master Styles Language Service」這個擴充功能可以幫助您使用 Master 框架開發網頁！因為這個框架採用較新穎的概念...
#Master_Styles_Language_Service #Visual_Studio_Code #VSCode #擴充功能 #Master框架 #Master #框架 #語法突顯 #完成提示 #延伸模組 #軟體應用 #網站技術 #HTML #CSS #IDE #開發工具