CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
Retina時代のWeb制作
Retinaディスプレイを搭載したiPhone 4が発売されて一年半。 巷では高解像度のiPadやMacBookの発売が噂され、Mac OS XではiPhoneのRetinaディスプレイに相当するHiDPIモードがほぼ完成に近付いています。 これら高解像度ディスプレイを搭載した環境では、互換性を維持するため、低解像度の環境に合わせて作られたコンテンツは基本的に低解像度のまま表示されます。 それはウェブブラウザにおいても例外ではありません。従来のウェブページは何の問題も無く表示されますが、新しい高解像度のデバイスには、新しい高解像度のコンテンツを提供したいものです。 Retinaディスプレイを搭載したiPad、そしてパソコンが普及した時、ウェブ制作の手法も変化を求められます。来るべき時代に備え、今のうちにRetinaディスプレイへの対応方法を確認しておきましょう。 ※ 以下に記した手法はMa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
