前端微互動檢查清單：讓技術 Blog 看起來更像品牌網站
UCAMC 整理一份前端微互動檢查清單，從連結 hover、按鈕狀態、卡片陰影、文字選取色、行動版間距到文章內部連結，協助技術 Blog 維持品牌質感。
閱讀文章
UCAMC Category
CSS
這裡彙整 UCAMC 以「CSS」分類標註的文章，方便讀者依主題追蹤技術筆記與數位工作流。
23 篇文章 · 依日期由新到舊排序CSS如何在網頁上實現「懸停縮放圖片」效果教學
大家好！今天我們來聊聊一個非常酷炫的網頁效果——「懸停縮放圖片效果」。這個效果可以讓你的圖片在滑鼠懸停時自動放大，增強視覺吸引力。無論你是初學者還是有經驗的前端開發者，都可以輕鬆上手。現在就讓我們一起來看看如何實現這個效果吧！ 步驟 1：準備你的 HTML 和 CSS 首先，我們…
閱讀文章[CSS] writing-mode 垂直文字文本行是水平還是垂直放置
網頁文字預設都是水平由左往右，像是由左至右的垂直排列中國文字，這時就可用CSS writing-mode 屬性，設置文本行是水平還是垂直放置。
閱讀文章使用Google Web Designer軟體做HTML5 CSS動畫
專案需要做如上的 動畫效果按鈕 ，因為不想要自己手寫 HTML + CSS ，想說有沒有更快速且有效率的方法，使用介面化動畫工具，像做 Flash動畫 一樣，現在Adobe 把它改名了，應該叫Adobe Animate，但是因為礙於Adobe Animate並不是免費開源軟體，感…
閱讀文章jQuery + CSS 動畫背景擴展效果按鈕animation @keyframes
使用jQuery + CSS animation 關鍵影格@keyframes，定義設定動畫漸變，達到按鈕 hover 後背景從中間展開，擴展到填充整個背景按鈕效果。 開始前先將HTML <button 先寫好，class為 elementor button ，並再多加入四個同樣…
閱讀文章CSS 文字限制字數、行數過長的文字隱藏”…”
\ \ \ \ CSS to make text overflow elegant is with ellipses, single or multiple lines 設計網頁常會使用 … 三個點 文字限制字數長度，來符合設計的版面。 過去使用程式控制，但現在RWD網頁的關係，…
閱讀文章CSS中使圖片白色背景轉透明
如果背景顏色為白色，有一種方法可以使用 CSS混合模式 ，添加 mix blend mode: multiply; CSS屬性： img{ mix blend mode: multiply; } Demo Embedded content CSS混合模式 : background…
閱讀文章如何讓CSS HTML Table RWD方法
響應式表格 CSS Trick 表格在不同裝置上的呈現方式一直是前端開發中的一個挑戰。這篇教學將介紹四種使用 CSS Trick 中提供的解決方案，分別是擠壓、捲動、摺疊橫列、和摺疊直行。我們將深入探討每種方法的實作，讓你能夠根據專案需求選擇最適合的方式。 擠壓（Squish）…
閱讀文章div水平垂直居中位置：CSS fixed固定元素
想製作一個以動態寬度和高度為中心的彈出框嗎? 使用css transform 屬性 css transform 這是一種使元素具有動態寬度水平居中的現代方法 適用於所有現代瀏覽器；支持可以在這裡看到。 .jqbox innerhtml { position: fixed; lef…
閱讀文章如何RWD調整Google noCAPTCHA reCAPTCHA的大小
調整大小Google noCAPTCHA reCAPTCHA 無論嘗試使用CSS還是CSS和javascript，似乎都無法改變驗證碼的外觀，原因它使用的是 嵌入你的網頁上。相對要去更改由Google外部加載的javascript和css文件生成的內容，事情將變得複雜。 是否有更…
閱讀文章SEO優化之CSS隱藏關鍵文字
想使用 CSS 將不必要，但可以增加 SEO的關鍵文字隱藏 ，想要讓 google大神搜尋到 ，又不想在網頁上HTML顯示你這些文字，可以使用下列 CSS方法隱藏文字 。 text indent: 9999px; 不要使用 display:none; ，搜尋引擎會判別當成非必要文…
閱讀文章CSS div背景圖片RWD Background-img
如何讓 <div 高度自動調整到背景圖片大小？ 另一種可能效率低下的解決方案是將圖像包含在 <img/ 元素集下 visibility: hidden; ，然後 <div 使 background image 。 這會將 <div 設置為 <img/ 元素中圖像的大小，但將其顯示…
閱讀文章CSS Flex圖片固定區塊高度寬度垂直左右置中
利用CSS Flex將圖片高寬度max100%對應外部區塊，上下垂直左右置中顯示於區塊中，這樣一來不管圖片大小多大，圖片都能正常比例完整顯示於區塊中。 注意:Flex只支援較新的瀏覽器。 HTML <div class="box" <img class="imgcenter" s…
閱讀文章CSS3 新單位寬度高度設定成vh vw – 80vh vs 80%
vh and vw vh :表示的是view height，也就是螢幕可視範圍高度的百分比 vw :表示的是view width，也就是螢幕可是範圍寬度的百分比 範例 比較80vh vs 80% css vh 設定視窗可見寬度高度%百分比，以下範例比較80vh與80%的不同之處。…
閱讀文章CSS3 :target 選擇器做出onClick效果純CSS的lightbox
CSS3 :target 選擇器 定義和用法 URL 後面帶有錨名稱 錨點 ，指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素 target element 。 :target 選擇器可用於選取當前活動的目標元素。 :target CSS 代表一個唯一的元素（目標元件用）i…
閱讀文章CSS文字垂直置中圖片文字對齊align-self: center
CSS圖片垂直至中與文字對齊指的是什麼意思??如下圖顯示，文字自動對齊圖片中間。 使用CSS排版類似以下圖片與文字版面時，通常會使用圖片向左浮動後，圖片就會因為脫離區塊，文字就會靠上圖片。這樣的情況文字是靠最上層區塊，邊緣開始排列下來，有時在設計上的需求並不理想。 此編排需求常應…
閱讀文章CSS3 print 列印紙張大小分頁邊框大小方法
CSS3列印解決許多問題，如 @media print 可對列印頁面做不同的CSS顯示，設定邊框與頁輸出列印的紙張大小調用，都可以很客製化的去製作所需要的呈現的列印頁面，並且想讓某段落分到下一個頁面，也可用 pag break after:always; 強制分頁。 以下簡單的範…
閱讀文章【純CSS 下拉式選單】：CSS多層級menu、CSS下拉式menu
Multi Level Drop Down Menu for CSS STYLE CSS CSS設定裡/ \ show /註解中的內容為下拉選單主要呈現的效果。 / \ show /之外的CSS樣式可自行更換。本人製作最簡單的格式給各位，為在教學使用上較易理解。 { paddin…
閱讀文章【jQuery教學】jQuery切換不同CSS樣式style：切換class、切換樣式、轉換不同CSS
使用 jQuery 控制CSS變換不同Class樣式 ，達到同一頁面切換成不同顯示效果。如以下使用 圖文模式 、 圖片模式 及 文字模式 ，分別為三種class .vw\ 01、.vw\ 02.、vw\ 03 做切換。 jQuery $ function { // 預設顯示第一個…
閱讀文章【CSS筆記】網頁設計寫CSS常碰到的問題
關閉Chrome 12px字體大小限制 網頁設計時檢查遊覽器相容，發現設定12px以下字體，在goole chrome遊覽器卻都無效，上網查了一下結果，原來chrome遊覽器的預設限制最小字體為12px。 查詢了一下解決方法，就如下面的簡單語法，將chrome字體大小的限制關閉。…
閱讀文章【RWD關鍵】CSS media屬性判別使用裝置：(RWD)響應式網頁、手機網頁設計、CSS Media應用
W3C 定義了CSS media type屬性 用於判斷各種不同裝置載入。可分以下幾個： all： 是用於所有裝置 braille： 用於盲文觸覺反饋裝置。 embossed： 用於分頁盲文印表機。 handheld： 用於手持設備（通常是小屏幕，有限的帶寬）。 print： 用…
閱讀文章CSS position:fixed 固定視窗置中-margin-top ,margin-left 減去元素的高度寬度
使用50％設定top 與 left，再用margin top ,margin left 減去元素的高度寬度。 如：top:50% 元素的上方對齊頁面正中央了，再用 margin top: 100px 將元素向上移動一半 元素高度為 200px ，讓中心點對齊頁面正中央。 fixe…
閱讀文章網頁上好用小圖使用CSS ICON 圖示框架Font Awesome
Font Awesome 的設計只需要簡單的應用Html語法，就可輕鬆在網頁加入ICON圖示。 過去 網頁設計師 ，需要為了 網頁的小圖示 ，需要親手 設計ICON ，更或者需要在網路搜尋找尋適用的 ICON ，總是為了這小 ICON 傷腦經，現在 Font Awesome 將提…
閱讀文章