網頁文字預設都是水平由左往右，像是由左至右的垂直排列中國文字，這時就可用CSS writing-mode 屬性，設置文本行是水平還是垂直放置。
![[CSS] writing-mode 垂直文字文本行是水平還是垂直放置](https://res.cloudinary.com/citiar/image/upload/v1644658583/ucamc/images/pexels-karolina-grabowska-4966414-large.jpg)
使用Google Web Designer軟體做HTML5 CSS動畫
專案需要做如上的動畫效果按鈕，因為不想要自己手寫HTML + CSS，想說有沒有更快速且有效率的方法，使用介面化動畫工具，像做Flash動畫一樣，現在Adobe 把它改名了，應該叫Adobe Animate，但是因為礙於Adobe Animate並不是免費開源軟體，感覺上產生出的應當是HTML5 Canvas，加上我只需要做個簡單的動畫按鈕，且最好是online edit 線上編輯工具，幫助我產生HTML動畫所需要的HTML + CSS Code，這樣就真的太棒了。 就在當下google了一下，發現Google Web...
jQuery + CSS 動畫背景擴展效果按鈕animation @keyframes
使用jQuery + CSS animation 關鍵影格@keyframes，定義設定動畫漸變，達到按鈕hover後背景從中間展開，擴展到填充整個背景按鈕效果。 開始前先將HTML <button> 先寫好，class為elementor-button ，並再多加入四個同樣的<button>在後面，分別給這四個class加入不同顏色名稱green 、blue、red、orange。 <button class="elementor-button"> Effect...
CSS 文字限制字數、行數過長的文字隱藏”…”
****> CSS to make text overflow elegant is with ellipses, single or multiple lines 設計網頁常會使用…(三個點)文字限制字數長度，來符合設計的版面。 過去使用程式控制，但現在RWD網頁的關係，很多情況使用程式控制變的複雜許多，其實這樣的文字限制字數長度功能可以完全使用CSS達到目的，完全不需要用到很複雜的程式碼。 CSS text-overflow: ellipsis; 主要使用CSS屬性： text-overflow: ellipsis;...
CSS中使圖片白色背景轉透明
如果背景顏色為白色，有一種方法可以使用CSS混合模式，添加mix-blend-mode: multiply;CSS屬性： img{ mix-blend-mode: multiply; } Demo See the Pen CSS中使圖片白色背景轉透明 by Leon Cheng (@jq153387) on CodePen. CSS混合模式: background-blend-mode - CSS: Cascading Style Sheets | MDN mix-blend-mode - CSS: Cascading Style...
如何讓CSS HTML Table RWD方法
Table RWD Css-Trick 提供了四種響應式網頁的解決方案，分為：擠壓（Squish）、捲動（Scroll）、摺疊橫列（Collapse Rows）、摺疊直行（Collapse Columns），以下簡單實作各種方式CSS方法。 Squish 形式相對來說比較簡單，針對顯示裝置的解析度，改變每個欄位長度，整體來說較無破壞原有表格之樣式，但當表格內某幾個欄位文字訊息特別多時，會造成這些欄位變得特別的長，因此影響觀看流程，使用者體驗自然不佳。這樣的表格較適合資訊量不大或每個欄位資訊量較一致資訊表。 Scroll...
jQuery Bootstrap tabs分頁應用兩階層連結開啟指定tab
使用Bootstrap3 tabs網址轉跳後指定要開啟某個tabs，包含指定第二階的tabs。 指定連結到某個tab可使用一下網址參數做選取，tab1為第一階，tab2為第二階。 /index.html?tab1=2&tab2=3 程式碼 先在網址取得網址列參數後使用:eq(1)開啟指定的tabs。 ``` //先取得網址字串，假設此頁網址為「index.aspx?id=U001&name=GQSM」 var url = location.href; //再來用去尋找網址列中是否有資料傳遞(QueryString)...
如何RWD調整Google noCAPTCHA reCAPTCHA的大小
調整大小Google noCAPTCHA reCAPTCHA 無論嘗試使用CSS還是CSS和javascript，似乎都無法改變驗證碼的外觀，原因它使用的是嵌入你的網頁上。相對要去更改由Google外部加載的javascript和css文件生成的內容，事情將變得複雜。 是否有更簡單的方式實現RWD Google noCAPTCHA reCAPTCHA，通過使用CSS transform屬性，您可以更改**reCAPTCHA的整個比例來實現寬度的更改**。。 transform:scale(0.77); ` ## CSS...