標籤: CSS3 頁1

網路資源

純 CSS 的樹狀圖- Treeflex

這是一個由純 CSS 製作的樹狀圖範例,可以讀入其 CSS 再照著設計的結構,就能簡單生出樹狀圖了。

網路資源

[jQuerry Plugin] 好用的響應式 3D cover flow 套件- flipster

flipster 是一個好用的 3D cover flow jQuery 套件,簡單照他的格式設置就能使用。

教學

CSS 的 :nth-child(n) 與 :nth-of-type(n) 選擇器

說明 CSS 的 :nth-child(n) 與 :nth-of-type(n) 選擇器的用法。

網路資源

OBNOXIOUS.CSS- CSS 動畫效果

OBNOXIOUS.CSS 是一個可以套用的 CSS 動畫效果。

網路資源

Woah.css- 有點花俏的 CSS 動畫效果庫

Woah.css 是一組有點花俏的 CSS 動畫效果庫,可以試試看他 demo 的範例再決定是否使用。

網路資源

WickedCSS- CSS 動畫資源庫

WickedCSS 是一個簡單的 CSS 動畫資源庫,可以選擇自己喜歡的並套用。

網路資源

cssanimation.io- CSS 文字動畫效果資源庫

cssanimation.io 是一個 CSS 文字動畫效果資源庫,如果有想要做文字進入或離開的轉場效果可以直接套用很方便。

教學

[CSS3] 使用 font-face 讓頁面可以顯示使用者電腦沒有安裝的字型

在傳統的網頁如果我們要使用字型的話一定要確保使用者的電腦裡面也有,不然使用者看到的會跟我們看到的不一樣,而在 CSS3 之後可以透過 font-face 的技術,讓使用者在開啟頁面的時候可以透過網路下載字型,這樣就能確保看到的樣子跟我們看到的一樣了。

網路資源

ReboundGen- CSS 動畫效果的一個選擇

ReboundGen 是一個 CSS 動畫效果的函式庫,可以看看是否有喜歡的效果可以直接套用。

網路資源

It’s Tuesday.- 輕巧的 CSS 動畫庫

It’s Tuesday. 是一個輕巧的 CSS 動畫庫,可以設定進入或離開的動畫,網站並提供預覽的功能方便使用者觀看效果。

網路資源

Magic Animations CSS3- 實用的 CSS3 動畫效果資源庫

Magic Animations CSS3 是一個實用的 CSS3 動畫效果資源庫,可以即時預覽想要的效果後再套用。

網路資源

All Animation Css3- 收錄許多 CSS3 動畫效果的資源站

All Animation Css3 是一個收錄許多 CSS3 動畫效果的資源站,可以參考看看是否有自己想要的效果。

網路資源

Vivify- 收錄許多動畫效果的 CSS 樣式庫

Vivify 跟 animate.css 類似,可以透過簡單的設定 class name 就使用其設定好的動畫效果。

網路資源

micron- 好用的 javascript 搭配 css 的微互動函式庫

micron 是一個好用輕便的 javascript 搭配 css 的微互動函式庫。

網路資源

Motion UI- 好用的動畫效果函式庫

Motion UI 是一個好用的動畫效果函式庫,可以直接使用預設的效果或透過 SCSS 自訂效果。

網路資源

Animista- 好用的線上 CSS 動畫產生器

Animista 是一個好用的線上 CSS 動畫產生器,可以選擇想要的效果後設定參數並預覽,如果滿意的話就可以直接複製 CSS 的 code 回去使用。

教學

CSS 的 min-content 與 max-content 屬性

CSS 的 min-content 與 max-content 屬性的用法說明。

教學

CSS width 與 height 屬性的響應式值- fill-available、fill-content 與 fit-content

CSS3 在 width 與 height 屬性多了幾個值可以用來配合響應式的網站 UI,來介紹一下 fill-available、fill-content 的用法。