[B! css][HTML5] massavaのブックマーク

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King

WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替えるウィンドウサイズに合わせて画像を切り替えるウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt

massava 2017/04/14

リンク

SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！

2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで

massava 2014/10/08

リンク

AdobeがHTML5とCSS3で出来るスゴ技を紹介「The Expressive Web」:DDN JAPAN

DDN は音楽・映像に関するデジタルアートを中心に情報ミックスを配信中

massava 2013/01/14

html5
css

リンク

HTML5で組んでるならこの魔法のjsも入れておけっていう話

現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応透過PNGに対応 opacityに対応といったことが可能になります。要はCS

massava 2012/12/02

css
html5

リンク

ブラウザのスタイルをリセットするスタイルシート -Normalize CSS

Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。有用なデフォルトはそのまま多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。スタイルの正常化さまざまな種類のエレメントのスタイルを正常化します。バグの修正各ブラウザごとの異なるスタイルやバグを修正します。ユーザビリティの改善ほんのわずかな改良でユーザビリティを改善します。コードの説明各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ対応ブラウザは下記の通りです。 Chrome Firefox