ブログのデザインをちょっとイジってみた

これだけの装飾がCSSだけでできるという、この記事に刺激を受けてちょっとブログの装飾をイジってみました。

CSS3 Dropdown Menu
The following demo used CSS gradient and IE gradient filter instead of the gradient image. It works for Webkit browsers, Firefox 3.6+, and IE.

イジったのは左右のメニューになっているところのヘッダ部分。
サファリとかFirefoxで見るとだいたいいい感じです。

旧版

イジった結果

ただIEは背景にグラデーションはかかったものの、下のほうが丸っこくならず。
文字に影をつける呪文も効いてないみたい。

IEが思い通りにならん＆もう少し角のマルさが欲しいところですが、根性つきたので今日のところはこれでよしとする方向で。

蛇足ながら変更したソースも付けときます。アメブロのデザインを『CSS編集用デザイン』で使っている人は『.skinMenuHeader』の部分を以下のように書き換えると同じようになります。
なるんじゃないかと思います。
が、ご利用は自己責任でお願いします。(_ _;)

/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
	padding:5px 10px;
	text-align: center;
	font-weight: bold;
	line-height:200%;

	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	background: #d1d1d1;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1');
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1));
	background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1);

	color: #444;
	border: none;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

以上、『このブログの装飾にはできるだけ画像を使わない』という、どうでもいいこだわりを持っている私でした。(記事に画像を貼りまくっておいて何を今更、と自分ですら思うくらいにどうでもいいこだわりですとも、ええ)

思ったことを思ったままに

日々思ったことを思いつくままに書いてみようと思います。

ブログのデザインをちょっとイジってみた