🆕 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 區段),並提供給頁面顯示讓使用者可以看到。如果頁面沒有使用這個範圍內的任何字元,則不會下載該字體;如果至少使用了一個,則會下載整個字體。這個屬性的目的主要是對字體資源進行分段處理,這樣瀏覽器只需要下載特定頁面文本內容所需的字體資源,可節省網路流量。
🆕 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 中,