SQLの窓

2018年01月08日


CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました






影の位置(x)
box-shadow: 99px 99px 99px 99px;
影の位置(y)
box-shadow: 99px 99px 99px 99px;
ぼかし距離
box-shadow: 99px 99px 99px 99px;
広がり
box-shadow: 99px 99px 99px 99px;
inset



実際やってみないと、文章では解りにくいので jQuery の スライダーを使ってリアルタイムでとんなビジュアルになるか解るようにしてみました。( inset はとても良く意味が解りました。なんというかデザイン的に格が上がる感じですね )

rgba は指定していません。これは、色と透過度だけの設定なので、形状は変わりません。( 但し、inset を使う場合は透過度は必須でしょうし、色もデザインに合わせて重要なファクターになると思います )

値の幅は、0〜50 です( 負が許される場合は -50 まで )。実際説明を読んでもいまいちピンと来ないので作ってみました。幸い、box-shadow はブラウザで全部ふつうに対応されている事が解っていたので、CSS の記述をそのまま使える( つまり文字列で動的に CSS を変更できる ) jQuery で作成しました。
( Windows の Safari だけ動かないみたいです / Mac は解らないです )

ライブラリの実装は

スライダーも jQuery UI を使っていますが、Google のライブラリを直リンクしています(そういうライブラリなので)。

( こちらの『サンプル』ボタンから jQuery タブで jQyery UIの『ドロップシャドウをスライダーで変化させる』でコードを変更しながらテストできます )

▼ jQuery を使ったソースコード
<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/black-tie/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<style type="text/css">
#target {
	width: 400px!important;
	height: 100px;
	border: solid 1px #000000; /* 罫線 */
	margin: 50px 0 0 50px; /* 上と左の余白 */
}
#slider1x,#slider1y,#slider2, #slider3 {
	width: 200px;
	margin: 0 0 0 20px;
}
#tbl td{
	padding: 5px;
}
#result {
	width: 400px;
}
</style>
<table id="tbl">
<tr><td>影の位置(x)</td><td><div id="slider1x"></div></td><td>box-shadow: <b style='color:#F00'>99px</b> 99px 99px 99px;</td></tr>
<tr><td>影の位置(y)</td><td><div id="slider1y"></div></td><td>box-shadow: 99px <b style='color:#F00'>99px</b> 99px 99px;</td></tr>
<tr><td>ぼかし距離</td><td><div id="slider2"></div></td><td>box-shadow: 99px 99px <b style='color:#F00'>99px</b> 99px;</td></tr>
<tr><td>広がり</td><td><div id="slider3"></div></td><td>box-shadow: 99px 99px 99px <b style='color:#F00'>99px</b>;</td></tr>
<tr><td>inset <input type="checkbox" id="inset"/></td><td></td><td></td></tr>
<tr><td colspan="3"><input id="result"></td></tr>
</table>

<div id="target"></div>


<script type="text/javascript">
var p1x = "0px";
var p1y = "0px";
var p2 = "0px";
var p3 = "0px";
var pw = "";
$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )

$("#inset").change(function() {
	if ( $("#inset").prop('checked') ) {
		pw = " inset";
	}
	else {
		pw = "";
	}
	$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
	$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
});

$(function () {
	$("#slider1x").slider({
		range: "min",
		step: 1,
		min: -50,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p1x = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

$(function () {
	$("#slider1y").slider({
		range: "min",
		step: 1,
		min: -50,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p1y = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

$(function () {
	$("#slider2").slider({
		range: "min",
		step: 1,
		min: 0,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p2 = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

$(function () {
	$("#slider3").slider({
		range: "min",
		step: 1,
		min: -50,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p3 = ui.value+"px";
			$("#target").css("box-shadow", p1x+" "+p1y+" "+p2+" "+p3+pw);
			$("#result").val( "box-shadow: "+p1x+" "+p1y+" "+p2+" "+p3+pw )
		}
	});
});

</script>


posted by lightbox at 2018-01-08 17:51 | CSS3 | このブログの読者になる | 更新情報をチェックする

2016年06月04日


CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味





▲ ハンバーガーアイコンは、メニューに使われるアイコンで3本の横線の形状から『ハンバーガー』と呼ぶようですが、このアイコンをクリックすると真ん中の棒が左へ消えて、上下の棒が回転して『閉じる』アイコンへとアニメーションします
<div id="test_box">
ハンバーガアイコン 
<a id="hamburger">
	<span class="top-bar"></span>
	<span class="middle-bar"></span>
	<span class="bottom-bar"></span>
</a>
</div>

アニメーションの発動

これに関してのみ jQuery のイベント処理を使っていますが、アニメーションに関しては全て CSS で定義されています。jQuery(JavaScript) で行う処理は、『h-opened』というクラスを #hamburger の親に設定するだけです。また、既に 『h-opened』が設定済みの場合はクラスを削除します。このスイッチのみの作成に jQuery(JavaScript) を使用しています

アニメーションの開始

アニメーションの最終状態は CSS で定義されています。以下の定義がアニメーションした結果、どうなるかという部分です。
#test_box.h-opened #hamburger span.top-bar {
	transform: rotate( 45deg );
	top: 8px;
}
#test_box.h-opened #hamburger span.middle-bar {
	opacity: 0;
	left: -40px;
}
#test_box.h-opened #hamburger span.bottom-bar {
	transform: rotate( -45deg );
	top: -8px;
}
#test_boxh-opened が追加された事をブラウザが検知するとアニメーションが開始され、h-opened が無くなった事を検知すると元へ戻ろうとします。元の状態はアニメーションに関する設定を行う以下の中に定義されています。
#hamburger span {
	/* span の基本属性 */
	background: #999;
	/* div は他で使うかもしれないので、span を利用して block 化 */
	display: block;
	/* 棒の太さ */
	height: 3px;
	/* 3本の棒の位置関係 */
	margin: 5px 0 5px 0;
	/* 位置指定可能 */
	position: relative;

	/* 変化するプロパティの初期値 */
	transform: rotate( 0 );
	top: 0;
	left: 0;
	opacity: 1;

	/* 変化するプロパティ */
	transition-property: transform, top, left, opacity;
	/* 変化に要する時間 */
	transition-duration: 0.5s;
}
  • 1) 最初にアニメーションする span 要素の形状を定義しています。
  • 2) 次に、アニメーションする前の初期状態を決定しています。この状態からアニメーション後の状態へと少しづつ変化させて動くわけです
  • 3) 最後に、アニメーションする対象となる transition-property を列挙して、変化に要する時間を定義しています
#hamburger は a 要素ですが、アイコンにする為に display:inline-block となっています。また、真ん中の棒を枠内で消すために overflow:hidden; が定義されています。 a 要素を使う必要は無いのですが、元々 mmenu で解説されていたアイコンなので a 要素を使うと簡単にメニューと連動ができています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
	$("#hamburger").on( "click", function(){
		if ( $("#test_box").hasClass("h-opened") ) {
			$("#test_box").removeClass("h-opened");
		}
		else {
			$("#test_box").addClass("h-opened");
		}
	} );
});
</script>
<style>
/* 枠 */
#hamburger {
	/* アニメーションで真ん中の棒を隠す為 */
	overflow: hidden;
	border: 1px solid #999;
	/* 行中で使用する為 */
	display: inline-block;
	/* 行中内の幅は必要 */
	width: 30px;
	/* ハンバーガアイコンの内部余白 */
	padding: 4px 8px 4px 8px;
	/* クリック可能カーソル */
	cursor: pointer;
}
#hamburger span {
	/* span の基本属性 */
	background: #999;
	/* div は他で使うかもしれないので、span を利用して block 化 */
	display: block;
	/* 棒の太さ */
	height: 3px;
	/* 3本の棒の位置関係 */
	margin: 5px 0 5px 0;
	/* 位置指定可能 */
	position: relative;

	/* 変化するプロパティの初期値 */
	transform: rotate( 0 );
	top: 0;
	left: 0;
	opacity: 1;

	/* 変化するプロパティ */
	transition-property: transform, top, left, opacity;
	/* 変化に要する時間 */
	transition-duration: 0.5s;
}

#test_box.h-opened #hamburger span.top-bar {
	transform: rotate( 45deg );
	top: 8px;
}
#test_box.h-opened #hamburger span.middle-bar {
	opacity: 0;
	left: -40px;
}
#test_box.h-opened #hamburger span.bottom-bar {
	transform: rotate( -45deg );
	top: -8px;
}


</style>
<div id="test_box">
ハンバーガアイコン 
<a id="hamburger">
	<span class="top-bar"></span>
	<span class="middle-bar"></span>
	<span class="bottom-bar"></span>
</a>
</div>


タグ:CSS jquery
posted by lightbox at 2016-06-04 16:11 | CSS3 | このブログの読者になる | 更新情報をチェックする

2015年11月16日


CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説

snowstorm.js という、雪を降らせるだけの スクリプトがあるのですが、少しカスタマイズして雪のキャラクタに ❄ を使って、一つ一つ廻すデモを作ってみました。

snowstorm の一つ一つを廻すデモ


▼ 以下本編

重要なのは、3つの部品に注目する事です。

@keyframes

これは、どのようなアニメーションをするかの定義で、根本的なものです。簡単な記述では、最初と最後を記述して( from to または 0% 100% ) としてその間を CSS に補完させます。

定義は、一つあればどこからでも参照できます。その際、コンテンツの animation で、@keyframes で指定した名前を指定します。

複数に変化を分割可能で、回転ですと 0% 100% でいいですが、複雑な変化を行う場合は、0% 20% 50% 100% のように変化の段階を指定できます。

animation

アニメーションする為の時間と、その時間をいくつに分割するかを指定します。また、名前を指定して、どのようなアニメーションをするかを決定します。ですから、@keyframes とはペアで記述する必要があります。

box-shadow

box-shadow を使って、回転している残像を一括で作成しています。丸く表示されているのは本体が border-radius: 50% で丸くなっているからで、本体は中心に描画されてその周りを複数の不透明度の違う円が並んでいます。それを回転する事によって、このようなアニメーションが実演されます。


<style type="text/css">
/*
  アニメーションの実体
  ※ フレームの最初と最後でどういう状態にするか
  ※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes ajax-loader-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes ajax-loader-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* アイコン */
.ajax-loader-icon {

  /* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
  /* background-color: #e0e0e0; */

  /* テスト表示位置の調整 */
  margin: 20px;

  opacity: .8;		/* 単独では特に必要無い */
  display: block;	/* div はもともとブロック。他の要素用 */
  border-radius: 50%;	/* 元の形状を丸くする為 */

  font-size: 18px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 5px;		/* サイズ変更 */
  height: 5px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

/*
  アニメーションのフレームの秒数といくつに分解するか
  たまたま、8つに分解していい感じになっている様子
  0.85s も適当。一周するのに必要な時間
*/
  -webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
  -moz-animation: .85s ajax-loader-rotate steps(8) infinite;
  -o-animation: .85s ajax-loader-rotate steps(8) infinite;
  animation: .85s ajax-loader-rotate steps(8) infinite;

}

/* テスト用の大きな DIV */
.ajax-loader {

  /* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
  /* background-color: #e0e0e0; */

  /* テスト表示位置の調整 */
  margin: 100px;

  opacity: .8;		/* 単独では特に必要無い */
  display: block;	/* div はもともとブロック。他の要素用 */
  border-radius: 50%;	/* 元の形状を丸くする為 */

  font-size: 150px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 40px;		/* サイズ変更 */
  height: 40px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

/*
  アニメーションのフレームの秒数といくつに分解するか
  たまたま、8つに分解していい感じになっている様子
  0.85s も適当。一周するのに必要な時間
  @keyframes と名前でリンク
*/
  -webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
  -moz-animation: .85s ajax-loader-rotate steps(8) infinite;
  -o-animation: .85s ajax-loader-rotate steps(8) infinite;
  animation: .85s ajax-loader-rotate steps(8) infinite;

}
</style>

<div class="ajax-loader-icon"></div>
<div class="ajax-loader"></div>
box-shadow については、以下を参照

 CSS3 : box-shadow の影分身の解説

 jQuery のスライダーで box-shadow の影分身の効果をリアルタイムに確認する


IE10 の @keyframes

@keyframes rule (Internet Explorer)



タグ:CSS3
posted by lightbox at 2015-11-16 02:29 | CSS3 | このブログの読者になる | 更新情報をチェックする

2014年08月08日


CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

display:table-cell は、IE は IE8 以降で使用できます。そもそも、ブロック要素を簡単に横並びにできるので便利ですが、内部の要素を『vertical-align: middle』で上下で中央に配置する事もでき、とてもこのような表示にうってつけです。

さらに、内部で浮島のように浮いた状態のブロック要素を 『margin:30px auto 0』と設定しなおして画像のデザインに合わせて微調整しています。

また、浮島内のテキストの振る舞いは、『text-align』で決定します。
吹き出し内の中央に文章を配置しています
吹き出し内
の中央に文章を配置
しています
<style>
.box {
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	width: 323px;
	height: 278px;
	border: solid 1px #000;
	display: table-cell;
	vertical-align: middle;
}
.inbox {
	width: 200px;
	border: dashed 1px #B8561D;
	margin: auto;
	font-weight: bold;
	font-size: 18px;
}

.center {
	text-align: center;
	margin: 30px auto 0;
}
</style>
<div class="box">
	<div class="inbox">
	吹き出し内の中央に文章を配置しています
	</div>
</div>
<div class="box">
<pre class="inbox center">吹き出し内
の中央に文章を配置
しています</pre>
</div>

以下は、その様子を左側の BOX について、順番に jQuery で実装していったものです。( 順次実行していくと、Firefox の挙動が少し変です / 最終的には同じですが・・・ )



jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
.inbox_base {
	width: 200px;
	border: dashed 1px #B8561D;
	font-weight: bold;
	font-size: 18px;
}
</style>

<script type="text/javascript">

$(function(){

	// ボタン1
	$("#add_attr1")
		.attr("type", "button")
		.val("エリア定義")
		.click(function(){
			$(".div_add_attr1,.div_add_attr2")
				.css({
					"background" : "url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat",
					"width": "323px",
					"height": "278px",
					"border": "solid 1px #000"
				});
		});

	// ボタン2
	$("#add_attr2")
		.attr("type", "button")
		.val("table-cellで横並び")
		.click(function(){
			$(".div_add_attr1,.div_add_attr2")
				.css({
					"display" : "table-cell"
				});
		});

	// ボタン3
	$("#add_attr3")
		.attr("type", "button")
		.val("内部DIV追加")
		.click(function(){
			$("<div id='inbox_001'></div>").appendTo( $(".div_add_attr1") )
				.text("吹き出し内の中央に文章を配置しています")
				.addClass("inbox_base");
		});

	// ボタン4
	$("#add_attr4")
		.attr("type", "button")
		.val("内部DIVに margin:auto で左右均等")
		.click(function(){
			$("#inbox_001")
				.css({
					"margin" : "auto"
				});
		});

	// ボタン5
	$("#add_attr5")
		.attr("type", "button")
		.val("外側DIVに vertical-align: middle で上下均等")
		.click(function(){
			$(".div_add_attr1")
				.css({
					"vertical-align" : "middle"
				});
		});

	// ボタン6
	$("#add_attr6")
		.attr("type", "button")
		.val("内部DIV内のテキストを中央揃え")
		.click(function(){
			$("#inbox_001")
				.css({
					"text-align" : "center"
				});
		});
});

</script>
<input id="add_attr1">
<input id="add_attr2">
<input id="add_attr3">
<br>
<input id="add_attr4">
<input id="add_attr5">
<br>
<input id="add_attr6">
<div class="div_add_attr1"></div>
<div class="div_add_attr2"></div>



タグ:jquery CSS
posted by lightbox at 2014-08-08 17:33 | CSS3 | このブログの読者になる | 更新情報をチェックする

2014年01月24日


『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する

3D Bouncing Ball with CSS3 と言う、アニメーションでバウンドしつづけるデモがあるんですが、そのボール部分のデータを取り出すと以下のようになります。






<style type="text/css">
#ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	position: absolute;
	top: 0;	
	z-index: 11;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),inset -2px -1px 40px rgba(0,0,0,0.7),0 0 1px #000;	
}
#ball::after {
	content: "";
	width: 80px; 
	height: 40px;
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10; 
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	border-radius: 40px / 20px;	
}
</style>

このデータの background 部分は、svg で書かれており、BASE64 でデコードすると、以下のようなデータになります。
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#bbbbbb" stop-opacity="1"/>
    <stop offset="99%" stop-color="#777777" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>

これを変更して色を変えて、いろいろサイズ変更すると以下のようなボタンを作成する事ができます。
( BASE64 エンコード / BASE64 デコード )
ボタン



<style type="text/css">
#btn {
	overflow:hidden;
	cursor: pointer;
	width: 140px;
	height: 50px;
	border-radius: 10px;
	position: absolute;
	top: 0;	
	left: 0;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1NTU1NSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMyMjIyMjIiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICA8L2xpbmVhckdyYWRpZW50Pg0KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPg0KPC9zdmc+
);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),inset -2px -1px 40px rgba(0,0,0,0.7),0 0 1px #000;	
}
#btn::after {
	content: "";
	width: 160px; 
	height: 40px;
	position: absolute;
	left: -10px;
	top: -10px;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	border-radius: 40px / 20px;	
}
#btn div {
	margin-left: 20px;
	margin-top: 17px;
	font-weight: bold;
	color: #ffffff;
}
</style>
<div id="btn"><div>ボタン</div></div>

要素が position:absolute なので、コンテンツとして配置するには、position:relative 内に置く必要があります。

BASE64 部分の確認は、url() の内容を Google Chrome のアドレスバーにセットすると確認できます。

関連する記事

IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol


posted by lightbox at 2014-01-24 00:37 | CSS3 | このブログの読者になる | 更新情報をチェックする

2014年01月23日


フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。

以下の画像は、『自由の翼フォント』を使って背景を透過にして、CSS で枠線を付加しています。画像はフリーフォントで簡単ロゴ作成(横書きページ)で簡単に作成できます



この画像に CSS を適用して、以下のようにごく自然に影付きグラデーションボタンを調整する事ができます。

<style>
#img1 {
	cursor: pointer;
	background: linear-gradient(to top, #808080, #f7f7f7);
	border: solid 1px #000000;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
</style>
<img id="img1" src="https://lh3.googleusercontent.com/-MCf4SV3B_EQ/UuDrJMBuhdI/AAAAAAAASOg/5hwM7wY3Tt4/s150/_img.png">
これだけでもいろいろ他にも試したくなりますが、使い勝手を増やすためにここからさらにこれを吹き出しに変更したいと思います。

その為には、さすがに画像だけでは無理なので、画像を DIV で挟んで :after と :before を使用して三角形の吹き出し口を作成します。

DIV をベースとして位置指定する為、DIV には position:relative を指定し、内部では position:absolute を指定して、上からの位置で位置調整をします。

:after 三角形は、画像の上にのって、色をグラデーションの開始色にする事によってつなぎ目を無くしています。
:before 三角形はその後ろに隠れて少し下にずれて枠線を作成しています。
<style>
#box {
	position: relative;
	height: 80px;
}

/* 下向き三角用(手前側) */
#box:after {
	content: '';
	position: absolute;
	/* border の端の特性を生かして三角を作成 */
	border-top: 16px solid #808080;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	top: 29px;	/* 増やして下へ移動 */
	left: 15px;	/* 下向き三角の左からの位置 */
}
/* 下向き三角ボーダー用(後ろ側) */
#box:before {
	content: '';
	position: absolute;
	border-top: 16px solid #000000;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	top: 31px;	/* 増やして下へ移動させて、ボーダーとして使用 */
	left: 15px;	/* :after と一致させる */
}

#img2 {
	margin: 0!important;
	cursor: pointer;
	background: linear-gradient(to top, #808080, #f7f7f7);
	border: solid 1px #000000;
	border-radius: 10px;
	box-shadow: 0 15px 10px -10px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3), 0 0 40px rgba(0,0,0,0.1) inset;
}
</style>
<div id="box">
<img id="img2" src="https://lh3.googleusercontent.com/-MCf4SV3B_EQ/UuDrJMBuhdI/AAAAAAAASOg/5hwM7wY3Tt4/s150/_img.png">
</div>
フリーフォントで簡単ロゴ作成(横書きページ)から、リアルタイムにCSSを調整テストする事が可能です。

三角形の原理は以下のような感じです。





<style type="text/css">
#test1 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px #ff0000;
	border-left:solid 25px #00ffff;
}
#test2 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px #ff0000;
	border-left:solid 25px transparent;
}
#test3 {
	float: left;
	width: 0px;
	height: 0px;
	border-top:solid 100px #000000;
	border-right:solid 25px transparent;
	border-left:solid 25px transparent;
}
</style>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>



posted by lightbox at 2014-01-23 22:38 | CSS3 | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり