CSSで画像を上下左右に反転する方法 - Qiita
画像の切り抜きを行うのに使ったサンプル。 IE8でも動作した。結構昔からFlipってあるのね。知らなかった。 IEだとDXImageTransform.Microsoft.BasicImage()があるけど、これと同じことらしい。 <!DOCTYPE html> <html lang='ja'> <head> <meta charset='utf-8'> <title>画像の上下左右反転サンプル</title> <style> .refrect-lr{ -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); -moz-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .refrect-ud{ -webkit-tran
背景画像の拡大・縮小 → background-size ! - シンプルシンプルデザイン CSS
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されていますので、あらためてまとめてみます。 拡大・縮小による画像劣化が気になるところですが、許容できるかどうかの判断は個人差があると思います。近頃のブラウザは優秀で、いい感じでスムージングされるので「OK！」とぼくは判断しました。 さすがにIE6の拡大・縮小したときのジャキジャキ感は堪えられませんが、そもそも「background-size」は適用されず無視されるので、IE6では背景画像は拡大・縮小されません。 Safari、Google Chrome、Operaですでに実装されています。 Firefoxもプリフィックス「-moz-」で適用されます。 IE8では残念ながら未実装でした。。。この辺はプログレッシブエンハンスメントで乗り切り
IE 11のページ読込速度を11％改善するとピザを11枚もらえるキャンペーンをIEが実施中
By slworking2 Windows 8.1やWindows RT 8.1に標準搭載され、Windows 7用にはプレビュー版が公開されている「Internet Explorer 11」が、ページ読込速度の改善を推奨する「11％ for IE11」キャンペーンを実施中で、実際に自分のホームページの読込速度を11％高速化すると「ピザ11枚」などのちょっとうれしい景品がもらえます。 11% for IE11 - Let's help build a faster web | Testing made easier in Internet Explorer | modern.IE http://www.modern.ie/en-jp/11percent 読込速度を改善すると「ピザ 11枚」の他にも、Web上で仮想環境をエミュレートする「BrowserStackの11年間無料使用権」や……
おすすめIE6の透過PNG表示対策 - WEBる。
いまだにターゲットブラウザから外すことのできない鬱陶しいこのIE6ですが透過PNG対策をすっごい今更ですがお勧めのものだけあげていこうと思います。 DD_belatedPNGを使う DD_belatedPNGが一番おすすめです。これはimg画像でもcssで背景でもどちらでも対応しています。 まず下記リンク先のDownloadからファイルをダウンロードしてください。 Drew Diller’s blog ファイルを設置したら下記をhead内に記述。 <!--[if IE 6]> <script src="./DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('img, .png_bg'); </script> <![endif]--> これだけでpngを使っているimgタグ全てと背景でpngを指定しているボックス要素に対してpng_
IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。 IE7以下は非サポートで、IE8はエフェクトなしで機能します。 まずは、テキストを配置したモーダルウインドウから。 Modal Text モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。 ウインドウを閉じるには、右上のクローズをク
画像を使わずCSSだけで角丸を作るの巻 ｜ いつも忘れて思い出すのに時間がかかるCSSテクニック集
いつも忘れて思い出すのに時間がかかるCSSテクニック集 HOME > javascriptを使って、画像サイズに惑わされず上下中央揃えできちゃうの巻 画像を使わずCSSだけで角丸を作るの巻 角丸は画像を使ってやるのが今までの定番でしたが、どうも面倒で仕方ない。 それが、「border-radius」プロパティを使えば簡単に実現できるのです。
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
Microsoft Edge Features & Tips
Discover new features and helpful tips to get the best experience out of Edge.
Windows 10 Mobile (Preview) の入れ方 for build 10512 - 高橋 忍のブログ- MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
jQueryで画像のWidth,Heightを取得する。 - funxion
jQueryで画像のサイズを取得しようとしたらChrome,Safariで取得出来なかったからメモ。 Firefoxではこれで取得出来たのですが、(IE6以上、Operaもこれでオッケーみたいです。) $("img").width(); $("img").height(); ChromeやSafariではwidthもheightの値も0になります。 原因は画像を読み込む前に値を取得していることみたいです。 なので、 $("img").bind("load",function(){ $(this).width(); $(this).height(); }); 因みにbind()の使い方は $("hoge").bind("イベント名",function(){}); 詳しくはjQuery日本語リファレンスで。
ラジオボタンをCSS3で装飾して作った画像ギャラリー
ラジオボタンを使った画像ギャラリーを作りましたので紹介してみます。かなり変わった使い方ですが、CSSの勉強にもなると思いますのでぜひ。 今回は古いブラウザ（IE７，８）でもそれなりに対応できるようにしましたので、そこそこ実用的だと思います。 別サーバーにサンプルを用意していますので動作確認していただければと思います。 HTML ではまず外部ファイルの読み込みから。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="js/selectivizr.js"></script> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
