CSSサンプル集

CSSを使ったテキスト装飾のサンプルです。

シャドウを使った立体表現

今日の
おすすめ
今日の
おすすめ
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

シャドウを使った立体表現

PLAY
PLAY
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

シャドウを使った2重枠線

開催中
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

反射とグラデーションを使った文字の演出

潤い美白化粧水
ソースを表示
ウインドウを閉じる
HTML
CSS
Firefoxではご利用いただけません。
※ソースコードはサンプルよりも見た目のサイズが小さくなります

丸いワッペンのような表現

おうちで作れる 和雑貨特集
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

シャドウを使って発光したような表現

★ 満点の星空が見える ★ 絶景の宿特集
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

たすきがけのような斜めに傾けたデザイン

お誕生日
おめでとう
Happy Birthday!
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

ストライプを表現したデザイン

宅配便承ります
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

スーパーのチラシのような価格表示

  • 山形県産
    398
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

CSSを使った棒グラフ

6
みかん
3
りんご
5
バナナ
7
キウイ
10
いちご
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

木に彫り込んだようなエンボス表現

平成二十五年一月一日
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

CSSを使った時計

1645
ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

マウスオーバーでテキストサイズが変わるボタン

ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

マウスオーバーでフェードしてキャプション表示

植物図鑑
ユキノシタ

本州、四国、九州及び中国に分布し、湿った半日陰地の岩場などに自生する常緑の多年草である。
人家の日陰に栽培されることも多い。葉は円形に近く(腎円形)、裏は赤みを帯びる。根本から匍匐枝を出して繁殖する。

ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

マウスオーバーでスライドしてキャプション表示

植物図鑑
イカリソウ

花は赤紫色で春に咲き、4枚の花弁が距を突出し錨のような特異な形をしているためこの名がある。葉は複葉で、1本の茎に普通1つ出るが、3枚の小葉が2回、計9枚つく2回3出複葉であることが多い。東北地方南部以南の森林に自生し、園芸用や薬用に栽培されることもある。

ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります

マウスオーバーで回転してキャプション表示

植物図鑑
スズラン

強心配糖体のコンバラトキシン、コンバラマリン、コンバロシドなどを含む有毒植物。有毒物質は全草に持つが、特に花や根に多く含まれる。摂取した場合、嘔吐、頭痛、眩暈、心不全、血圧低下、心臓麻痺などの症状を起こし、重症の場合は死に至る。

ソースを表示
ウインドウを閉じる
HTML
CSS
※ソースコードはサンプルよりも見た目のサイズが小さくなります
戻る