[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（不透明度） ... 続きを読む

オンマウスでふんわり現れる！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() ... 続きを読む

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

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

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

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によるブロックに影... 続きを読む

[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はペー... 続きを読む