標籤: CSS 頁1

教學

透過 javascript(jQuery) 修改 CSS 變數的值

在 CSS 有原生變數後我們要來撰寫 CSS 也可以變得很有彈性,那如果我們想要用 javascript(jQuery) 來修改變數的值,就跟之前要修改 CSS 的屬性一樣的規則就好。

教學

[CSS] 利用 text-decoration 設定文字的裝飾(底線、刪除線、上方線 )方式

說明利用 text-decoration 設定文字的裝飾(底線、刪除線、上方線 )的方法。

教學

leaflet.js 設定 geoJson 樣式與綁定互動事件

説明設定 leaflet.js geoJson 樣式與綁定互動事件的方法。

網路資源

CSS Values- 線上 CSS 語法展示與查詢工具

CSS Values 是一個用互動方式展示線上 CSS 語法與查詢的網站,可以藉由點擊分類查看各個屬性的用法。

網路資源

CSS 3, Media Queries Cheat Sheet- 要設定 Media Query 製作 RWD 網站時的範圍建議設定

CSS 3, Media Queries Cheat Sheet 是當你要用 Media Query 製作 RWD 網站時,可以參考該網站的設定範圍。

教學

認識 CSS @layer 屬性與應用

認識 CSS @layer 這個屬性以及其應用。

網路資源

Convert pixels to rem- 網頁 px 單位轉換 rem 的計算器

以現在網站開發的觀念來說,使用 rem 會是一個相對 px 這種絕對單位而言更有彈性的單位,但因為目前的原型工具都還沒有 rem 這個單位,所以往往就需要開發者自己去轉換,自己打開計算機來算就滿浪費時間的,而 Convert pixels to rem 就可以讓你輸入 px 的單位就能直接轉換成對應的 rem 數值,給有需要的朋友參考。

網路資源

Easing Functions Cheat Sheet- 收錄許多 CSS 動畫效果的網站

Easing Functions Cheat Sheet 是一個收錄了許多 CSS 動畫效果的網站,可以預覽後,選擇喜歡的效果並複製 CSS 的語法即可。

網路資源

GRID- CSS Grid 的各種語法效果圖示,也可以直接點擊複製語法

GRID 是一個以視覺話來表現 CSS Grid 的各種語法效果的網站,也可以直接點擊複製語法。

教學

理解 CSS Grid 的 grid-row 與 grid-column

理解 CSS Grid 的 grid-row 與 grid-column 的設定以及應用方式。

網路資源

CSS Grid Cheat Sheet- 透過圖形化介面讓你可以預覽使用 CSS grid 排列出來的版型

CSS Grid Cheat Sheet 是一個透過圖形化介面設定,就可以讓你預覽使用 CSS grid 排列出來的版型的線上工具,對於 grid 的初學者或是在排版上有需要的都可以參考看看這個網站。

網路資源

CSS3 Animation Cheat Sheet- 收錄許多 CSS 動畫效果的網站

CSS3 Animation Cheat Sheet 是一個收錄許多 CSS 動畫效果的網站,只要讀入其設計的 CSS 後,就可以依據給予的 class name 設定動畫效果。

網路資源

Cheatography- 收錄超過 5000 則 Cheat Sheets 的網站,包含程式語言、軟體以及遊戲...等

Cheatography 是一個收錄了超過 5000 則 Cheat Sheets 的網站,包含程式語言、軟體以及遊戲...等,如果是程式工程師,可以在上面找到像是 PHP、CSS、javascript、MySQL...的 Cheat Sheets。

教學

[CSS] 超連結的虛擬類別屬性- :any-link

CSS 的 :any-link 可以用來設定 a 或 area 這兩個標籤如果有 href 屬性時的樣式,實際作用等於同時設定 :link 及 :visited 的屬性。

網路資源

Rico’s cheatsheets- 收錄許多 web 相關程式語言語法的網站

Rico’s cheatsheets 是一個收錄許多 web 相關程式語言語法的網站,包含 HTML、javascript、CSS、git、資料庫,前端的框架、函式庫還有後端的許多程式語言都有收錄,可以給做相關工作的參考。

網路資源

HTML Cheat Sheet- 收錄 HTML、CSS 以及 javascript 相關的功能摘要以及簡單的產生器

HTML Cheat Sheet 是一個收錄 HTML、CSS 以及 javascript 相關的功能摘要的網站,裡面還有各自分類的可以產生相關語法的簡單的產生器。

網路資源

OverAPI- 豐富收錄程式語言語法的網站

OverAPI 是一個收錄非常多程式語言語法的網站,你可以到上面去找到你正在學習或有興趣的程式語言,網站上會幫你把各個 API 的用法連結到官網的文件,非常方便。

網路資源

Unminify- 讓你的 CSS, javascript, XML, HTML 和 JSON 的 code 更漂亮以及更有可讀性的線上工具

Unminify 是一個方便的線上工具,只要貼上你的 CSS, javascript, XML, HTML 或 JSON 的 code,就可以轉換成更漂亮以及更有可讀性的內容。