スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

FC2ブログでHTML5+CSS3を試してみる

5分でわかるCSSグラフィック」という記事を読む。
この記事ではCSS3(とHTML5)で実現するグラフィック表現を紹介していましたが、そのサンプルページが面白かったので、当FC2ブログでも表現できるかどうかチャレンジしてみます。

単純なボックスシャドウ



width:200px;
height:100px;

background-color: #fff4e0;
border-radius: 8px;
box-shadow: 4px 4px 4px 2px #ccc;


insetを指定したボックスシャドウ



width:200px;
height:100px;

background-color: #fff4e0;
border-radius: 8px;
box-shadow: inset 4px 4px 4px 2px #ccc;


insetと通常の影を併用



width:200px;
height:100px;

background-color: #fff4e0;
border-radius: 8px;
box-shadow:
4px 4px 4px 2px #ccc,
inset 2px 4px 4px 2px #ffe;


多数の影を組み合わせる



width:200px;
height:100px;

background-color: #fff4e0;
border-radius: 8px;
border: 1px solid #876;
box-shadow: inset 4px 6px 20px #fff,
inset -4px -4px 10px #ccbba0,
inset 0 -45px #fec,
0 0 4px #876,
4px 4px 6px 2px #ccc;


単純なアニメーション




position:relative;
width:20px;
height:20px;
background:#c44;
"class="animation1

.animation1 {
animation: anim1 4s infinite;
}

@keyframes anim1 {
0%, 100% { left:0px; }
50% { left:280px; }
}


キーフレームごとのtiming-function




position:relative;
width:20px;
height:20px;
background:#c44;
"class="animation2

.animation2 {
animation: anim2 4s ease-in infinite;
}

@keyframes anim2 {
0% { left:0px; }
50% { left:280px;
animation-timing-function:ease-out; }
100% { left:0px; }
}


マウスオーバーでアニメーション




class="animation3"
position:relative;
width:20px;
height:20px;
background:#c44;

.animation3 div {
animation: anim3 4s infinite;
animation-play-state: paused;
}

.animation3:hover div {
animation-play-state: running;
}

@keyframes anim3 {
0%, 100% { left:0px; }
50% { left:280px; }
}


複数のアニメーション




position:relative;
width:20px;
height:20px;
background:#c44;
"class="animation4

.animation4 {
animation:
anim4-1 0.5s infinite ease-out alternate,
anim4-2 4s infinite linear alternate;
}

@keyframes anim4-1 {
0% { top:50px; }
100% { top:0px; }
}

@keyframes anim4-2 {
0% { left:0px; }
100% { left:280px; }
}



問題なくちゃんと表現できているようですね。

特にアニメーションは面白い!
スポンサーサイト
[ 2012/04/19 21:42 ] その他 | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

いけぢー

Author:いけぢー
備忘録がメインです。
あとは思いついた内容など。

カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
アクセスカウンター
押さないでください


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。