KOYO DIGITAL WORKSパーツギャラリー

CSS3

グラデーション

  • Chrome
  • Firefox
  • IE11
  • iPad(iOS7)

光沢

  • Chrome
  • Firefox
  • IE11
  • iPad(iOS7)

シャドウ

  • Chrome
  • Firefox
  • IE11
  • iPad(iOS7)
sample

ボタンデザイン

  • Chrome
  • Firefox
  • IE11
  • iPad(iOS7)

矢印アイコン

  • Chrome
  • Firefox
  • IE11
  • iPad(iOS7)

パターン1

パターン2

縦書き

  • Chrome
  • Firefox
  • IE11
  • iPhone(iOS9)
  • Android4.2
  • Androidは、括弧など一部表示できない文字あり。

文字の向き:和文は"立たせ"、英文は"横倒し"にする混在モード

あいうえおかきくけこさしすせそ
[全角]
ABCDEFG abcdefgbr
[半角]
ABCDEFG abcdefgbr
「記号!?!?,.」(数字)

向陽デジタルワークス

文字の向き:和文も英文も、すべて"立たせ"るモード

あいうえおかきくけこさしすせそ
[全角]
ABCDEFG abcdefgbr
[半角]
ABCDEFG abcdefgbr
「記号!?!?,.」(数字)

向陽デジタルワークス

アニメーション

  • Chrome
  • Firefox
  • IE11
  • Microsoft Edge

背景色が移り変わる

See the Pen change bgColor01 by yukako (@niemer) on CodePen.

See the Pen change bgColor02 by yukako (@niemer) on CodePen.

文字色が移り変わる

See the Pen change fontColor03 by yukako (@niemer) on CodePen.

参考:CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう

おすすめコンテンツ

WEBデザイナー/フロントエンドエンジニア 正社員募集中 リッチな動きをWebサイトに パーツギャラリー デザインギャラリー 様々な角度からWebサイトをサポート!Webサイト制作
ページの先頭へ