はてなブックマーク

背景 「Internet Explorer（IE）6は2010年3月1日に亡くなった」という設定で葬式を挙げようという企画が米国で盛り上がっている。 IE6よ、安らかに眠れ――“葬式”を米企業が企画 – ITmedia Newsより なにやら3月1日からGoogleさんがIE6のサポートを取りやめるので、米国でIE6の葬式をしちゃおうって話らしいです。 なので便乗してIE6を葬る（？）CSSTipsを5つほど紹介します。 5つというのは特に意味は無く、キリがよいため無理やり5つ用意しました。 ※ネタですのでネタ嫌いな方はスルーしてください。 続きは詳細から。 キャプチャとCSS さくっとキャプチャとcssのサンプルを乗せてみます。 ぼかしが入ってちょっと見づらく html{ _filter: blur(add=1,direction=135); } 色を反転させてショッキングに

edit area html:4t>div#wrapper>div#header+div#contents+div#footer script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

css3のみアニメーション概要など 上の動画の様な1行で、縦にロールしながら表示する手法をcss3で表現したサンプルを書きたいと思います。 いつもの様に、Webkit系（Chrome、Safari）のブラウザでご覧下さい。 詳細は続きから 実働デモ（CSS3アニメーション対応ブラウザのみ） 表示させたい内容その1 その2！ 何らかの内容その3 内容その4 ソース サンプルはこちら<style type="text/css"><!-- /* リセット（自ページにあわせて調整して下さい） */ #kzms2scroll, #kzms2scroll *{ margin:0!important; padding:0!important; line-height:1!important; } /* リストを1行に見せるための調整 */ #kzms2scroll{ overflo

早速ですが作ったものの動画 というわけでこんな感じの物を作ってみました。 実際のサンプルはこちら 概要と対応ブラウザ 概要みたいなもの タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。 このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべてCSS3です。 JavascriptOFFでも同じ挙動になりますよ。 動作環境 Chrome4とSafari4での動作確認はしてあります。 Firefox3.5以上でもそれなりに動きますがアニメーションは動きません。 Firefox3.6↑だとグラデーションも有効になるように記述してあります。 詳細と実物は続きから。 ソースの説明 HTML(HTML5） 一応HTML5で書いてありますが、お好きにDivなどに変えても動きますのでそこら辺は厳密には書いていません。 使いたい状況で

下のようなボタン画像を hover時（マウスカーソルが合った時）に画像をこれ以上用意せずに変化させるTipsです。 上のボタンにカーソルを合わせたら色が少し薄くなると思います。 対応ブラウザなど CSS３は使用していません。対応ブラウザはIE5.5-IE8,Firefox3,Safari3,opera9などです。 ソースは続きに記載しておきます。 ソースコード（CSS) a.alpha:hover img{ /*モダンブラウザ用*/ opacity:0.8; /*IE7以下用*/ filter:alpha(opacity=80); /*IE8用*/ -ms-filter:"alpha(opacity=80)"; } ※a.alpha imgの部分は、実際に適用する要素のidやclassを割り振ってください。 ※a要素にhoverを割り当てているのは、IE6以下だとa要素

css3を触ってみて思った利点の2個目 今回の記事は、前回の記事（レイアウトについて(1/4) – css3を触ってみて思った4個の利点）の続きです。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 というわけでセレクタについてですね。 css2だと、HTML側で細かな指定をしないと、見た目に差をつけにくかったのですが、css3のおかげでHTMLをよりシンプルにして、細かな指定をすることが可能になります。 詳細は続きから。 そもそもセレクタって？ セレクタっていうのは一言で言えば、「cssを効かせたい場所の指定」のことです。 /*hogeというidの部分を*/ #hoge{ /*カラーを赤色にする*/ color:#f00; } /*hogeというidの中にある、classのafe全ての部分を*/ #hoge .afe{ /*カラ