articles

2013 年 6 月 18 日

CSS3 ボックスモデル

CATEGORYCSSCSS3   TAG 1:51 AM

このブログはCSS3に対応していないブラウザでは見れない形にしてあります。
というのも、boxモデルを使っているからです。
floatでの実装は高さを揃えるためにクリアしたりと古臭くて陳腐なのでやめました。

一番簡単な実装

#content{
	display: -webkit-box;
	display: -moz-box;
	margin: 0 0 50px 0;
	border-bottom:1px solid #333;
}
#articles{
	-webkit-box-flex: 1; 
	-moz-box-flex: 1;
	position: relative;
}

2010 年 3 月 11 日

CSS3 ドロップシャドウをIEでも

CATEGORYCSS   TAG 8:35 PM

ネタ元
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>



2010 年 1 月 22 日

CSS3 CSSで角丸をつくる

CATEGORYCSS   TAG 12:29 PM

すごくいいサイトがありました。
こんなサイトあったんですね。
CSS3 角丸を表現する border-radius | CSS Lecture

引用させて頂きます。

    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */