CSS範例集

在這裡提供一些雲端字型搭配CSS裝飾,可以做到的效果範例。

使用陰影做出立體的效果

本日
推薦套餐
本日
推薦套餐
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

使用陰影做出立體的效果

PLAY
PLAY
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

使用陰影做出雙重框線效果

實施中
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

使用鏡射與漸層做出的效果

滋潤美白化妝水
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
※本原始碼的實際顯示尺寸會比範例要小一些

類似圓形臂章的效果

能在家裡DIY的 手製雜貨
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
  • Internet Explorer 9 〜
※本原始碼的實際顯示尺寸會比範例要小一些

使用陰影做出發光般的效果

★ 浪漫的滿天星空 ★ 絕景飯店特輯
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

類似包裝紙的傾斜條狀設計

生日快樂
記得請客喔
Happy Birthday!
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
  • Internet Explorer 9 〜
※本原始碼的實際顯示尺寸會比範例要小一些

直條紋設計

鰻魚丼新鮮上市
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

類似超市傳單的特賣價顯示效果

  • 麻豆產
    文旦
    98
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
  • Internet Explorer 9 〜
※本原始碼的實際顯示尺寸會比範例要小一些

使用CSS繪製長條圖

6
橘子
3
蘋果
5
香蕉
7
芭樂
10
草莓
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
  • Internet Explorer 9 〜
※本原始碼的實際顯示尺寸會比範例要小一些

模擬木頭雕刻的效果

造成不便,敬請見諒。
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

以CSS做出的時鐘

1645
顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時文字大小會變化的按鈕

顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時浮現說明文字的效果

植物圖鑑
虎耳草

原產於中國與日本,多生長在林下、灌叢、陰濕的岩石之地。在台灣亦多見於觀賞植物等。
葉狀似圓形(腎圓形),背面帶有紅色。作為中藥可祛風、清熱、涼血解毒。能治風疹、濕疹、中耳炎、咳嗽吐血等。

顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時說明文字滑入的效果

植物圖鑑
三枝九葉草

小蘗科淫羊藿屬,多年生草本。莖高一尺餘,葉為二回掌狀複葉,自九小葉而成,故得其名。味辛、甘,性溫。有補腎助陽、袪風濕的功能。用於腎虛陽痿、腰膝無力、風寒、腎虛水腫、婦女更年期高血壓症等。

顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

滑鼠經過時翻轉出現說明文字的效果

植物圖鑑
鈴蘭

含有強心苷類有毒物質Convallatoxin、Convallamarin和Convalloside的有毒植物,全草有毒,花、根毒性比較強。服用時可能造成噁心、嘔吐、腹瀉、頭暈、頭痛、心律不整、心衰竭等病症,嚴重時甚至可能致死。

顯示原始碼
關閉視窗
HTML
CSS
支援的瀏覽器
  • Safari
  • Google Chrome
  • Firefox
※本原始碼的實際顯示尺寸會比範例要小一些

回上頁