articles

2013 年 6 月 20 日

CSS3 filter:blurでぼかし

CATEGORYCSSCSS3  1:28 AM

ドロップシャドウを用いてテキストにボケ表現をするパターンは見ますが、画像そのものをぼかす表現は見たことがなかったのでサンプル作ってみます。

header h1{
 -webkit-filter: blur(0px);
 -webkit-transition: all 0.2s linear;
 /*filter: blur(0px);*/
 /*transition: all 0.6s linear;*/
}

header h1:hover{
 filter: blur(0px);
 -webkit-filter: blur(10px);
}

このブログのことでした。

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;
}