CSS3 の object-fit と object-position プロパティ - Dev.Opera
CSS3 の object-fit と object-position プロパティ Translated by Masataka Yakura · 3 May, 2011Published in: opera 11, css3, open web, japaneseThis is a translation of The CSS3 object-fit and object-position properties, written by Chris Mills. はじめに CSS でよくある問題に、やなどの置換要素のアスペクト比を制御するというものがあります。たとえば、アスペクト比の違うものが混ざってもそれが変形されないように、ページに画像を同じ大きさで並べたいという場合を考えてみましょう。画像を切り抜いたり無理やり変形させるよりも、アスペクト比を保ちながらリサイズし、レターボックス表示に
[CSS3+jQuery] 画像なしでどこまで作れるのか？の限界に(forkして)挑戦 – jsdo.pigg
[CSS3+jQuery] 画像なしでどこまで作れるのか？の限界に(forkして)挑戦 – jsdo.pigg jsdo.itで今診断テスト作ったら来月末ごろに3DS当たるかもよキャンペーンやってますよ。 それはそれで熱いんですが、私の中でいまブームになってるのは GeckoTangさんが作ったjsdo.piggのfork祭り（勝手に祭り化）です。 まあとにかくSafariかChromeで実物を見ていただきたい。 jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS かわいい顔してるだろ…。これ画像使ってないんだぜ…？ 見た瞬間ティンと来た。 つぶやいたらtsmallfieldさんが実行してくれた。 背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 an
![[CSS3+jQuery] 画像なしでどこまで作れるのか？の限界に(forkして)挑戦 – jsdo.pigg](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
CSS3の3Dトランスフォームを使って螺旋状に画像をアニメーションさせるサンプル:phpspot開発日誌
Breathtaking animated CSS3 helix using 3d transforms CSS3の3Dトランスフォームを使って螺旋状に画像をアニメーションさせるサンプル。 スクリプトを使わず、3Dトランスフォームだけで次のようにアニメーションさせてるようです。 JSだけでやるのでも大変そうな処理ですが、ＣＳＳで出来ちゃうっていうのがすごいですね デモページ イメージとしては、画像を縦に100分割して、CSSスプライトみたいにして画像を分割させます。 あとはアニメーションさせるというハックによって実現させてるようです。 CSS3の機能が拡張されて、今後、あっと驚くようなハックもどんどん出てくるんでしょうね。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種 IE6-8で
マイコミジャーナル｜【レポート】iPhone 4に対応したWebサイトを作る方法（2010/07/05）
The WebKit Open Source Project iPhone 4にはRetinaディスプレイと呼ばれる高解像度ディスプレイが搭載されている。これは従来のiPhone 3GSの4倍の解像度にあたり、その美しさはiPhone 4の売りのひとつになっている。iPhone 4 Retinaディスプレイの美しさはユーザを満足させるものかもしれないが、同時に、WebデベロッパやWebデザイナに対してこれまで議論に上がっていた「High DPIに対応するWebサイト」という課題を実感させるものにもなった。 サイズが同じでディスプレイの解像度だけが上がるということは、従来と同じ方法でレンダリングすればその分小さく表示されることを意味している。これでは読めたものではないため、見やすいサイズまでスケールを上げる。iPhone 3GSとiPhone 4のケースなら、縦を2倍、横を2倍にすればいい。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
