いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史
古き良き手法から、最新の手法まで。必要なときのために引き出しにしまっておきたい、画像置換の手法まとめ。 CSSの画像置換（Image Replacement）は長い歴史の中で移り変わってきました。もし、いまでもCSSで画像置換をするのなら、現在でも使える多くの有効な手法があります。一方で近い将来、CSSの画像置換を使うとグーグルが実際にペナルティーを課すようになるかもしれない、ということは知っておくべきことでしょう。いまのところは大丈夫だとしても、あまりおすすめはできません。 とは言っても、CMSまたはプロジェクトとの関係で画像置換を使わざるを得ない場合もあります。そこで、この記事ではまだ有効な、長い歴史のあるCSSの画像置換の方法を紹介します。画像置換が完全に使えなくなる前まで、これから紹介する手法さえ知っていれば十分でしょう。 ネガティブtext-indentを使うPhark手法 Ph
(K)Androidブラウザの旧バージョンでheightに％指定すると画像がのびる場合がある | web(K)campus|WEBデザイナーのための技術系メモサイト
スマホ案件の構築中に、クライアントさんから画像が伸びているという指摘を受けました。 AndroidにはデフォルトのブラウザがChromeではなく「ブラウザ」ってアプリが存在します。コイツが中々クセ者でjQuery とかでもよくわからん挙動を起こします。 どんな状態かって言うとこんな感じ↓ 原因は画像につけてたheightの「100%指定」 画像がビヨ〜〜んと伸びていた時のCSSは以下 img{ width:100%; height: 100%; } んで、修正したCSSがコッチ img{ width:100%; height: auto; } おそらく大本の高さの取得の解釈の違いっぽいんですが、「auto」に変えることによって解消はされました。 Androidアプリの「ブラウザ」はメーカごとにバージョンが違うようで、今回の現象が起こったのも「3.☓☓☓☓☓☓」とか円周率か？と思わせる数字だ
CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transform: skewY(10
clip プロパティで画像をトリミング
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。 いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル 通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。 ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
