iOS 8.4.1の:hover問題 - to-R

2015/08/29 79 users to-R hover iOS 8.4.1 Safari CSS

ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://b... 続きを読む

[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ | コリス

2014/11/17 323 users Mixin Sass コリス box-sizing CSS

15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） ... 続きを読む

Safariでopacityの操作をすると描画がチラつくのはなぜ？原因と対策 | 株式会社LIG

2013/12/19 13 users Ｔｒａｎｓｉｔｉｏｎ 描画 Safari チラ 株式会社LIG

お疲れ様です。小林です。 「Safari + transition + opacity」 今回はこちらの組み合 [...]The post Safariでopacityの操作をすると描画がチラつくのはなぜ？原因と対策 appeared first on 株式会社LIG. 続きを読む

オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ｜Webpark

2013/06/24 470 users Webpark rotate Ｔｒａｎｓｉｔｉｏｎ CSS3

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下... 続きを読む

JavaScript アニメーションのデザインパターン

2012/05/13 955 users アニメーション JavaScript デザインパターン 変色

JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() ... 続きを読む

jQuery.fx.offですべてのアニメーションをカット - Takazudo hamalog

2012/03/23 27 users Takazudo hamalog アニメーション カット

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / jQueryのopacityアニメとIE6,7,8 - Takazudo hamalog でも昔書いたのだけども、IE8以下ではopacityに対応していないので、jQueryでアニメーションしようと... 続きを読む

透明度を表す「opacity」 と 「RGBa」の違いと使い分け｜Webpark

2011/08/17 100 users Webpark RGBa Opera Safari CSS

ともに透明度を表す「opacity」 と 「RGBa」ですが、違いをちゃんと理解して正しい使い分けをしましょう。 対応しているブラウザ ともにCSS3ですのでブラウザによってサポートしているもの、サポートしていないものがあります。 と言ってもIE以外は問題なく対応できています。IEについてはIE9から対応するようになりました。Firefox、Chrome、Safari、Operaなどはかなり前のバ... 続きを読む

Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER - かちびと.net

2011/06/27 93 users YouTube フェーズ ライブラリ オート インター

あまり見かけないタイプのライブラリだった のでメモ。Youtubeの動画を透過させる事 が出来るjQueryプラグインです。インター フェースもクールにされて全画面に配置した りオート再生させたりも可能でIE6や7でも 一応は動作してくれます。 僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね？普通に出来るならちょっと恥ずかしい記事ですけどｗ 透過だけでなく、... 続きを読む

CSS3のよく使いそうな１０個のテクニックのまとめ:phpspot開発日誌

2011/04/20 162 users phpspot開発日誌 まとめ テクニック CSS3 RGBa

The top 10 CSS3 techniques | Feature | .net magazine CSS3のよく使いそうな１０個のテクニックのまとめエントリのご紹介。 font-face によってマシンに入ってないフォントを使うCSS例 opacity による要素の透明度指定 rgbaでRGBと透明度を併せて指定 border-radiusによる角丸 box-shadowによるブロックに影... 続きを読む

CSS3 要素を透明に出来る Opacity と RGBa の使い方 | CSS Lecture

2011/04/01 98 users RGBa CSS Lecture 使い方

CSS3、HTML5、Movable Type その他Webサイト制作に関する役立つ情報を掲載します！…ここからが続きOpacity プロパティ対応ブラウザ（2011 4/1 現在）Firefox 2以上，Safari 2以上，Opera 9以上，IE8以上，Chrome指定方法・適用できるCSSプロパティ値には，コンマ（.）を使って指定します。「0.1」「0.8」「0.555」と小数点以下を指定... 続きを読む

[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル | コリス

2011/03/29 162 users コリス チュートリアル エフェクト CSS hover

下記は各ポイントを意訳したものです。エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。div {opacity: 1.0;}div:hover {opacity: 0.5;}これで、ホバー時に不透明度が0.5になるようになりました。ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、ど... 続きを読む

IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog

2011/02/17 153 users Mach3.laBlog メモ display height

透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。サンプルコード例えば、こんなコード。.test {display:block;width:128px;height:128px;backgrou... 続きを読む

覚えておきたい31のCSSスニペット - IDEA*IDEA ～ 百式管理人のライフハックブログ

2011/02/08 480 users IDEA CSSスニペット alpha filter たくさん

完全に自分メモ用にエントリー・・・。使えるCSSスニペットいろいろです。よく見るモノもたくさんありますがよくまとまっているのではないでしょうかね。個人的によく使いそうだと思ったモノだけざざっと紹介しておきましょう。selector {filter: alpha(opacity=50); /* internet explorer */-khtml-opacity: 0.5; /* khtml, ol... 続きを読む

Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos

2007/06/27 379 users youmos Apple InternetExplorer

Apple.comのようにパンくずも少し手を加えるだけで、使いやすいものになります、Appleのパンくずの区切りには半透明の透過PNGが使われている為、InternetExplorerへの対応はAlphaImageLoaderをCSSで指定しています。 半透明のアルファチャンネルを持つPNGイメージを使う方法と、CSSでopacityを指定する方法のどちらでも同じようにデザインできます。IEはペー... 続きを読む

[を] CSSで半透明

2005/03/30 66 users 半透明 CSS moz padding absolute

CSSで半透明 2005-03-27-3 [Tips] CSSで指定した箇所を半透明にするには、 IE なら alpha フィルター、FF なら -moz-opacity。 <style> #sukesuke1 { position:absolute; padding:5px; background-color:red; filter:alpha(opacity=75); /*IE*/ -moz-... 続きを読む