macaroni-works notes» CSS3 http://blog.macaroniworks.net Just another WordPress weblog Wed, 16 Feb 2011 07:27:11 +0000 ja hourly 1 http://wordpress.org/?v=3.0.4 CSS3 ドロップシャドウをIEでも http://blog.macaroniworks.net/2010/03/css3-%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%82%b7%e3%83%a3%e3%83%89%e3%82%a6%e3%82%92ie%e3%81%a7%e3%82%82/ http://blog.macaroniworks.net/2010/03/css3-%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%82%b7%e3%83%a3%e3%83%89%e3%82%a6%e3%82%92ie%e3%81%a7%e3%82%82/#comments Thu, 11 Mar 2010 11:35:26 +0000 admin http://blog.macaroniworks.net/?p=1237 .container {padding-left:10px;} .shadow {float:left;} .frame {position:relative; background:#fff; padding:10px; display:block; -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); } .clear {clear:left;} </style>]]> ネタ元
http://www.cssplay.co.uk/menu/css3-shadows.html

以下の記述で、IEとCSS3のブラウザでほぼ同じドロップシャドウができるそうなのですが・・・
記述がめんどくさいですね。
ただ、つかいどころがどこかであるかもなのでメモっておきました。

<style type="text/css">
.container {padding-left:10px;}
.shadow {float:left;}
.frame {position:relative; background:#fff; padding:10px; display:block;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.clear {clear:left;}
</style>
]]> http://blog.macaroniworks.net/2010/03/css3-%e3%83%89%e3%83%ad%e3%83%83%e3%83%97%e3%82%b7%e3%83%a3%e3%83%89%e3%82%a6%e3%82%92ie%e3%81%a7%e3%82%82/feed/ 0 CSS3 text-shadowでテキストにシャドウ http://blog.macaroniworks.net/2010/01/css3-text-shadow%e3%81%a7%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%ab%e3%82%b7%e3%83%a3%e3%83%89%e3%82%a6/ http://blog.macaroniworks.net/2010/01/css3-text-shadow%e3%81%a7%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%ab%e3%82%b7%e3%83%a3%e3%83%89%e3%82%a6/#comments Fri, 22 Jan 2010 12:02:36 +0000 admin http://blog.macaroniworks.net/?p=1113 調べました。
http://gihyo.jp/design/feature/01/css3-approach/0001

text-shadow：　ぼかし色　X方向への距離　Y方向への距離　ぼかしの距離
]]> http://blog.macaroniworks.net/2010/01/css3-text-shadow%e3%81%a7%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%ab%e3%82%b7%e3%83%a3%e3%83%89%e3%82%a6/feed/ 0 CSS3 CSSで角丸をつくる http://blog.macaroniworks.net/2010/01/css3-css%e3%81%a7%e8%a7%92%e4%b8%b8%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b/ http://blog.macaroniworks.net/2010/01/css3-css%e3%81%a7%e8%a7%92%e4%b8%b8%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b/#comments Fri, 22 Jan 2010 03:29:00 +0000 admin http://blog.macaroniworks.net/?p=1110 すごくいいサイトがありました。
こんなサイトあったんですね。
CSS3 角丸を表現する border-radius | CSS Lecture

引用させて頂きます。

    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
]]> http://blog.macaroniworks.net/2010/01/css3-css%e3%81%a7%e8%a7%92%e4%b8%b8%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b/feed/ 0