chocobit

html5テスト運用中

Search

サイトリニューアル（css3編）

サイトリニューアル（css3編）

前回のサイトリニューアル（html5編）につづき、今回はCSS3編を。まあそれほど多用してはいないんですが。当然と言ってはなんですが、IEは未対応で...。

テキストにドロップシャドウ

最近ちょくちょく使ってるサイトを見かけるようになりました。うちでもテキストにシャドウをかけている場所が何ヶ所かありますが、例えば上のエントリータイトルの部分がそうですね。

ドロップシャドウ

.text-shadow {
	text-shadow: 1px 1px 1px #79f;
}

x方向に1px、y方向に1px、ぼけ1px、色#79f のドロップシャドウを指定しています。

ボックスにドロップシャドウ

Aboutページでちょこっと使ってます。

.box-shadow {
	-webkit-box-shadow: 3px 3px 6px #555;
	-moz-box-shadow: 3px 3px 6px #555;
}

x方向、y方向、ぼけ具合、色 の指定の仕方は、テキストの場合と同じ。webkitというのはChromeやSafari用で、mozの方がFirefox用になります。

ボックスに角丸

同じくAboutにて使用。

.box-radius {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

8px は角丸の半径ですね。

ウィンドウサイズに応じてCSSを変える

CSS3のMedia Queriesというやつらしいですが、ブラウザのウィンドウサイズに応じてCSSを変更できるというもの。

/* 横幅1677px以上 */
@media screen and (min-width: 1677px) {
	.mediaqueries {
		max-width: 1360px;
	}
}

/* 横幅1337px～1676px */
@media screen and (min-width: 1337px) and (max-width: 1676px) {
	.mediaqueries {
		max-width: 1020px;
	}
}

/* 横幅997px～1336px */
@media screen and (min-width: 997px) and (max-width: 1336px) {
	.mediaqueries {
		max-width: 680px;
	}
}

/* 996px以下 */
@media screen and (max-width: 996px) {
	.mediaqueries {
		width: 340px;
	}
}

このサイトは上の4段階で変化します。とは言え横幅1337px以上になると、あまり見られることはなさそうですが...。IEでは機能しないので、固定幅にしてます。

アニメーション

アニメーションプロパティtransitionというのを使うと、JavaScriptを使わずに動きを付けることができます。ただし現状ではwebkit系（Chrome、Safari）のみで、Firefoxでも対応してません。まああくまで実験ということで。サイト右部の「TOP」「ABOUT」のナビゲーション辺りで使いました。

.transition {
	opacity: 0.5;
	-webkit-transition: 1s ease-in-out;
}

.transition:hover {
	opacity: 1;
}

上の場合だとマウスオーバーした時に、1秒かけてopacity（透明度）が0.5→1 になる、みたいなかんじですね。

今のところは、こんなかんじでCSS3を使ってます。何度か述べたように現状ではIEが対応してないので、企業サイトではまだ使いづらいですが、個人サイトレベルなら積極的に使っていけそうかな。

Tag

Message

Message

Trackbacks (0)

TrackBack URL

Page Top