🆕 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 區段),並提供給頁面顯示讓使用者可以看到。如果頁面沒有使用這個範圍內的任何字元,則不會下載該字體;如果至少使用了一個,則會下載整個字體。這個屬性的目的主要是對字體資源進行分段處理,這樣瀏覽器只需要下載特定頁面文本內容所需的字體資源,可節省網路流量。
🆕 https://mnya.tw/cc/word/1595.html
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 🎨CSS】
一般來說如果網頁要使用文字的修飾線條,都會用到 CSS 的「text-decoration」屬性,不過這個傳統的屬性並沒辦法做太多動態的變化,因此這次教大家使用...
#CSS #text_decoration #background_image #動態下橫線 #動態底線 #動態 #下橫線 #底線 #網站技術
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 🎨CSS】
一般來說如果網頁要使用文字的修飾線條,都會用到 CSS 的「text-decoration」屬性,不過這個傳統的屬性並沒辦法做太多動態的變化,因此這次教大家使用...
#CSS #text_decoration #background_image #動態下橫線 #動態底線 #動態 #下橫線 #底線 #網站技術
萌芽綜合天地
CSS background-image 動態下橫線(底線) – 萌芽綜合天地
一般來說如果網頁要使用文字的修飾線條,都會用到 CSS 的「text-decoration」屬性,不過這個傳統的屬性並沒辦法做太多動態的變化,因此這次教大家使用另一個 CSS 屬性「background-image」實際製作動態下橫線(底線),首先看看效果: 基本上就是網頁連結 <a>,游標移上去後觸發 :hover 進而顯現出動態下橫線(底線)。 首先,HTML 如下: 接著是 CSS:
🆕 https://mnya.tw/cc/word/1596.html
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 🎨CSS】
以前在網頁上做背景毛玻璃非常麻煩,要特別在需要毛玻璃背景的元素上加偽元素 ::before,然後直接對偽元素加網頁背景影像本身 + filter: blur(5px);,數值可調整...
#CSS #backdrop_filter #原生背景毛玻璃 #原生毛玻璃背景 #原生 #背景毛玻璃 #毛玻璃背景 #背景 #毛玻璃 #網站技術
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 🎨CSS】
以前在網頁上做背景毛玻璃非常麻煩,要特別在需要毛玻璃背景的元素上加偽元素 ::before,然後直接對偽元素加網頁背景影像本身 + filter: blur(5px);,數值可調整...
#CSS #backdrop_filter #原生背景毛玻璃 #原生毛玻璃背景 #原生 #背景毛玻璃 #毛玻璃背景 #背景 #毛玻璃 #網站技術
萌芽綜合天地
CSS backdrop-filter 原生背景毛玻璃 – 萌芽綜合天地
以前在網頁上做背景毛玻璃非常麻煩,要特別在需要毛玻璃背景的元素上加偽元素 ::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 #網站技術
【作者:萌芽站長;💻萌芽綜合天地; 🌐網站技術 , 📄HTML , 🎨CSS , 🟪Bootstrap】
近期 Bootstrap 穩定版已經開發到 5.1 了!不過很多人還是用較舊的版本在進行網頁的開發,而我自己在用 Bootstrap 3.4.1 做面板(Panel)時,就發現了其一個很棒的功能...
#Bootstrap_3_4_1 #多彩改良式可折疊面板 #多彩 #改良式 #可折疊面板 #可折疊 #面板 #Panel #HTML #CSS #Bootstrap #網站技術
萌芽綜合天地
Bootstrap 3.4.1:多彩改良式可折疊面板 – 萌芽綜合天地
近期 Bootstrap 穩定版已經開發到 5.1 了!不過很多人還是用較舊的版本在進行網頁的開發,而我自己在用 Bootstrap 3.4.1 做面板(Panel)時,就發現了其一個很棒的功能,就是可折疊面板(Collapsible Panel)!面板本身分為頭(Head)、身(Body)、尾(Footer),前者可以放標題(Title)、中者可以放內容(Content)、
🆕 https://mnya.tw/cc/word/1735.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕,特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕,輕鬆就能使用!基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS , 📄JavaScript , 📄jQuery】
為了方便以後讓任何網站都能快速擁有回頂部按鈕,特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕,輕鬆就能使用!基本上只要在網頁...
#自動隱藏且可直接使用的網頁回頂部按鈕 #自動隱藏 #可直接使用 #網頁回頂部按鈕 #回頂部按鈕 #回頂部 #HTML #CSS #jQuery #JavaScript #JS #網站技術
萌芽綜合天地
自動隱藏且可直接使用的網頁回頂部按鈕 – 萌芽綜合天地
為了方便以後讓任何網站都能快速擁有回頂部按鈕,特別寫了一個結合 HTML、CSS、JavaScript 和 jQuery 的回頂部按鈕,輕鬆就能使用!基本上只要在網頁 <head> 到 </head> 中先引入 jQuery 後即可直接使用。通常這種設計是為了方便讓使用者在看完網頁主要內容後,能快速回到最上面查看導覽列,若您的網站本身就設有固定於頂部的導覽列,可能就比較不需要這種設計。
🆕 https://mnya.tw/cc/word/1737.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS】
某些狀況之下,需要在網頁上做區塊輪播的效果,以達到一個畫面可以顯示更多資訊的目的,舉例來說:要顯示的資料過多、一次顯示在畫面上會很雜亂...
#純CSS區塊輪播效果 #純CSS #區塊輪播效果 #區塊輪播 #區塊 #輪播 #HTML #CSS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS】
某些狀況之下,需要在網頁上做區塊輪播的效果,以達到一個畫面可以顯示更多資訊的目的,舉例來說:要顯示的資料過多、一次顯示在畫面上會很雜亂...
#純CSS區塊輪播效果 #純CSS #區塊輪播效果 #區塊輪播 #區塊 #輪播 #HTML #CSS #網站技術
萌芽綜合天地
純 CSS 區塊輪播效果 – 萌芽綜合天地
某些狀況之下,需要在網頁上做區塊輪播的效果,以達到一個畫面可以顯示更多資訊的目的,舉例來說:要顯示的資料過多、一次顯示在畫面上會很雜亂。當然除此之外,還能用做圖片的幻燈片效果,重點是從頭到尾都不用碰到 JavaScript!純 CSS 搭配 HTML 就能做到囉!現在我就用一組簡易的示範來簡單描述原始碼: 這裡先用一個 <div class="slider-container"
🆕 https://mnya.tw/cc/word/1746.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 🎨CSS】
::-webkit-scrollbar 是 CSS 的一種虛擬(偽)類別選擇器,可以針對特定元件或全局修改其捲軸樣式,但僅適用於支援 WebKit 的瀏覽器,舉例來說...
#webkit_scrollbar #純CSS捲軸 #CSS捲軸 #捲軸 #WebKit #虛擬類別選擇器 #類別選擇器 #類別 #選擇器 #CSS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 🎨CSS】
::-webkit-scrollbar 是 CSS 的一種虛擬(偽)類別選擇器,可以針對特定元件或全局修改其捲軸樣式,但僅適用於支援 WebKit 的瀏覽器,舉例來說...
#webkit_scrollbar #純CSS捲軸 #CSS捲軸 #捲軸 #WebKit #虛擬類別選擇器 #類別選擇器 #類別 #選擇器 #CSS #網站技術
萌芽綜合天地
::-webkit-scrollbar 純 CSS 捲軸 – 萌芽綜合天地
是 CSS 的一種虛擬(偽)類別選擇器,可以針對特定元件或全局修改其捲軸樣式,但僅適用於支援 WebKit 的瀏覽器,舉例來說:Chrome、Edge 與 Safari 都可以看到效果。它有許多相關的選擇器可以使用,常用的列在下面: 捲軸上的按鈕(上下箭頭) 捲軸本體 捲軸底(本體滑動的軌道) 同時有垂直與水平捲軸時交會的部分 直接使用 是針對全局,而若要指定某一區塊修改捲軸,
🆕 https://mnya.tw/cc/word/1747.html
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 🎨CSS】
CSS Scrollbars 標準化了 Windows IE 5.5 在西元 2000 年引入的過時捲軸顏色屬性,這個屬性可以自訂捲軸的寬度與顏色,但可用的選項與整體自由度就比 Webkit 瀏覽器支援...
#CSS_Scrollbars #Scrollbars #自定義捲軸樣式s #自定義 #捲軸樣式 #捲軸 #僅支援Firefox #CSS屬性 #屬性 #CSS #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 🎨CSS】
CSS Scrollbars 標準化了 Windows IE 5.5 在西元 2000 年引入的過時捲軸顏色屬性,這個屬性可以自訂捲軸的寬度與顏色,但可用的選項與整體自由度就比 Webkit 瀏覽器支援...
#CSS_Scrollbars #Scrollbars #自定義捲軸樣式s #自定義 #捲軸樣式 #捲軸 #僅支援Firefox #CSS屬性 #屬性 #CSS #網站技術
萌芽綜合天地
CSS Scrollbars 自定義捲軸樣式(僅支援 Firefox) – 萌芽綜合天地
CSS Scrollbars 標準化了 Windows IE 5.5 在西元 2000 年引入的過時捲軸顏色屬性,這個屬性可以自訂捲軸的寬度與顏色,但可用的選項與整體自由度就比 Webkit 瀏覽器支援的 ::-webkit-scrollbar 還少很多,畢竟一個是選擇器(能加一堆有的沒的屬性,很自由),而這次要解說的這個僅僅只是兩個屬性搭配使用,
🆕 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 #網站技術
【作者:萌芽站長;💻萌芽綜合天地;🌐網站技術 , 📄HTML , 🎨CSS】
Master 是一套由台灣人開發的前端框架,倡導虛擬 CSS(Virtual CSS)的概念,將 CSS 語法都寫在 HTML 的 class 中,這樣開發者就不用每次都還要去想怎麼命名 class,或者...
#Master #虛擬CSS #Virtual_CSS #快速製作響應式GRID格線佈局 #響應式 #響應式網頁設計 #RWD #GRID格線佈局 #GRID #格線佈局 #HTML #CSS #網站技術
萌芽綜合天地
Master:快速製作響應式 GRID 格線佈局 – 萌芽綜合天地
Master 是一套由台灣人開發的前端框架,倡導虛擬 CSS(Virtual CSS)的概念,將 CSS 語法都寫在 HTML 的 class 中,這樣開發者就不用每次都還要去想怎麼命名 class,或者修改一個 class 卻導致多處版面破壞, 非常新穎的觀念!重點是它真的超輕量化,僅僅才 13KB,因此對使用者的流量負擔極小,而且還能將 CSS 屬性縮寫,如:padding → p、
🆕 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 #開發工具
【作者:萌芽站長;💻萌芽綜合天地;🖥軟體應用 , 🌐網站技術 , 📄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 #開發工具
萌芽綜合天地
Master Styles Language Service(Visual Studio Code 擴充功能):Master 框架的語法突顯及完成提示 – 萌芽綜合天地
「Visual Studio Code」是由微軟(Microsoft)開發的開放原始碼程式編輯器。 「Master Styles Language Service」這個擴充功能可以幫助您使用 Master 框架開發網頁!因為這個框架採用較新穎的概念,也就是虛擬 CSS(Virtual CSS),會將 CSS 語法都寫在 HTML 的 class 中,