[CSS]text-shadowをIEでもやってみる。Ver2.1.1オレだけ分かってればいいWebメモHOMEこのサイトについて連絡してみるサイトマップホームWEBcss[CSS]text-shadowをIEでもやってみる。cssお久しぶりの更新で申し訳ないなんて微塵も思いません。全国2人(2人もいるのか知らんけど)の下山ファンの皆様、お待たせしました。今回は「text-shadow」で遊んでみようってことです。忙しくなるとデザインを外注するんですが、ドロップシャドウをふんだんに使用したデザインを納品していただきました。いつもなら見出しに影が多いので画像でペタペタ切ったり貼ったりするんですが、ここはいっちょtext-shadowを散りばめてみようじゃないか!と言うことで、恥ずかしながら初めて真剣に調べてみました。例によって例の如くIEはバージョン10からしかサポートしてない始末。それでもめげないのが下山です。class="shadow-a">ABCDEFG</p>CSSを以下のように書きます。#ccc;}すると、まー不思議!文字に影が!みたいな感じです。色;X方向・・・+値で右、-値で左Y方向・・・+値で下、-値で上ぼかし・・・値が大きいほどボケが多い色・・・そのまんま色もちろん色はrgbaでの指定を可能。1px;}さてIEでは?IE9以前のブラウザはtext-shadowをサポートしていませんので、IEでは「filter」を使います。Defaultfilter:dropshadow(color=#cccccc,offX=5,offY=5);1filter:dropshadow(color=#cccccc,offX=5,offY=5);これでIEでもドロップシャドウを実現できますね。#ccc;filter:dropshadow(color=#cccccc,offX=5,offY=5);}上記CSSでIEまでサポートできますね。(※くどいようですけどIEだと不格好ですね!)こちらのデモはIEと、その他モダンブラウザでもドロップシャドってます。今年はちゃんと書こうと思ってましたけど・・・無理。Bootstrap最近マイブームのフレームワークのご紹介。マイブームって・・・死語。Font]Webフォントを使って洒落たメニューをおっさんが作ってみる。WebFontって使ったことないなー。アイコン的に使ってみた。洒落たメニュー作ってみたよ。今回使ったのは「Fo...記事を読む[CSS]:after擬似要素を使ってCSSだけで吹き出しを作る吹き出しといえば「笑う」みたいな変な固定観念を持ちあわせています下山です。今回は笑いながら記事を書きます。:after擬似要素を...記事を読む[Sass,Compass,CSS]Sassの醍醐味Compassを使ってもっと楽しちゃおう!やっぱりSass使い始めたらCompassじゃないっすかねー知らんけど。世の中そんな流れだし実際すばらしいので記事にしちゃうわけよw...記事を読む[CSS]transform-styleとかperspectiveに後ろ髪を引かれてたからやってみた天気悪いっすね下山です。寝ても覚めても納期に追われてます。CSS3から新登場のtransform-styleとかpers...記事を読む[CSS3]擬似クラスと擬似要素をまとめてみた。いい加減ググッてばかりいないでまとめます擬似クラスと擬似要素。マークアップすることができなかったり...記事を読む[CSS,rem,Sass]remとか言う単位とSassで思い通りのfont-sizeライフを送ればいいと思うの。remと聞くとレム睡眠しか思い浮かびません。体は眠っているのに脳は活発に稼働しているだなんてニンゲンの神秘を感じてしまいますが、今回...記事を読む[CSS3,animate.css,sass]sassを使ってanimate.cssでhoverアニメーション(きっと完全版)2回続けてアニメーションネタですよ。鹿児島からこんに千葉。背景画像を画面いっぱいに表示するよ!しかもjqueryでIE7、IE8も対応だよ!背景画像を画面いっぱいに広げるってーのはー男のマロン。栗は美味しいね下山です。Font]Webフォントを使って洒落たメニューをおっさんが作ってみる。