見出しの背景を画像とし、上から色のついたグラデーションをかける方法についての検討

見出しを以下のような感じにする方法についての覚書です。

asdfasdfadfda

CSS スタイルシートエディターに追加した CSS は以下のとおりです。

/** 見出しにグラデーションを入れる **/
/* グラデーションの生成:http://www.colorzilla.com/gradient-editor/ */
aside[id="tag_cloud-4"] h3.widget-title {
	background-color: #CCC;
	text-align: left;
	font-size: 14px;
	background-image: url("http://shaancomemo.files.wordpress.com/2011/03/a0960_000126_thumb.jpg");
	background-position: right center;
	color: #fff;
	border: none;
	line-height: 4em;
	padding: 0 0 0 18%;
	overflow: hidden;
	position: relative;
	margin: -5px;
	border-radius: 4px 4px 0 0;
	font-weight: bold;
	z-index: 1;
}

aside[id="tag_cloud-4"] h3.widget-title:before {
	content: "";
	color: #ffffff;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNlYzRmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzNlYzRmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzNlYzRmOSIgc3RvcC1vcGFjaXR5PSIwLjgzIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iIzNlYzRmOSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZWM0ZjkiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(left,rgba(62,196,249,1) 0%,rgba(62,196,249,1) 47%,rgba(62,196,249,0.83) 50%,rgba(62,196,249,0) 65%,rgba(62,196,249,0) 100%);
/* FF3.6+ */
	background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(62,196,249,1)),color-stop(47%,rgba(62,196,249,1)),color-stop(50%,rgba(62,196,249,0.83)),color-stop(65%,rgba(62,196,249,0)),color-stop(100%,rgba(62,196,249,0)));
/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,rgba(62,196,249,1) 0%,rgba(62,196,249,1) 47%,rgba(62,196,249,0.83) 50%,rgba(62,196,249,0) 65%,rgba(62,196,249,0) 100%);
/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,rgba(62,196,249,1) 0%,rgba(62,196,249,1) 47%,rgba(62,196,249,0.83) 50%,rgba(62,196,249,0) 65%,rgba(62,196,249,0) 100%);
/* Opera 11.10+ */
	background: -ms-linear-gradient(left,rgba(62,196,249,1) 0%,rgba(62,196,249,1) 47%,rgba(62,196,249,0.83) 50%,rgba(62,196,249,0) 65%,rgba(62,196,249,0) 100%);
/* IE10+ */
	background: linear-gradient(to right,rgba(62,196,249,1) 0%,rgba(62,196,249,1) 47%,rgba(62,196,249,0.83) 50%,rgba(62,196,249,0) 65%,rgba(62,196,249,0) 100%);
/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3ec4f9',endColorstr='#003ec4f9',GradientType=1);
/* IE6-8 */
	padding: 8px 0 0 15%;
	margin: 0;
	display: block;
	position: absolute;
	width: 100%;
	height: 100px;
	top: 0;
	left: 0;
	z-index: -1;
}

#ie8 aside[id="tag_cloud-4"] h3.widget-title:before {
	background-color: #cccccc;
}

ie8 では、以下のように表示されるようにしました。

IETester

なんとなく、ie8 でもグラデーションをかけられるようにできそうな気がするのですが、今回はうまくいきませんでした。なお、「before」の要素ではなくて、普通の要素だと以下のツールで生成した CSS を貼り付ければ、ie8 等でもグラデーションがかかりました。


グラデーションの方は、記事「Photoshop風インターフェイスで使いやすいCSSグラデーションのジェネレーター | コリス」で紹介されていた Web 上のツール「Ultimate CSS Gradient Generator」を使用しました。

上の方のマークで透明度を調整したり、

image

下の方のマークで色を調整したり、

image

グラデーションの方向を調整したりした後、

asdfasdfasdf

コピーして、

asgasdgads

グラデーションをかけたい要素のところに貼り付ければ OK です。

asdasfads

「Permalink」 のところでグラデーションの設定を再利用することもできます。

sadfafasd

投稿者: comemo

mac & iPad で情報をインテグレートする

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。