(公開日:2010年10月) 「綺麗な背景画像を簡単に作りたい!」 そんな思いから、この写真加工技術「PhotoDramatica(フォト・ドラマティカ)」は生まれました。 この技術は、以下のような特徴があります。
HTML <h3> <span>Harder</span> <span>Better</span> <span>Faster</span><span>Stronger</span></h3> CSS body { background-color: #ece5da; text-align: center; } h3 { /* margin: 20px; */ font-family: "Paytone One"; color: #202020; text-transform: uppercase; letter-spacing: -2px; } h3 span { display: block; margin: 11px 0 17px 0; font-size: 80px; line-height: 80px; color: #f1ebe5; text-shadow: 0 13.36px
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く