SQLの窓

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 | Comment(0) | 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 | このブログの読者になる | 更新情報をチェックする

2013年11月15日


Google ストリートビューを表示している class="gm-style"

CSS で、画像に対して角を丸くしたり、影を付けたりしていると何故か Firefox だけ ストリートビューを表示している画像が区切られてこんな感じになってしまいます。



他のブラウザでは起きないのですが、結局以下のように一括で指定して起きないようにしました。
.gm-style img {
	border-radius: 0px;
	box-shadow:none;
}

関連する記事

jQuery のプラグインとしてストリートビューを利用する(2)



タグ:トラブル CSS
posted by lightbox at 2013-11-15 16:59 | CSS3 | このブログの読者になる | 更新情報をチェックする

2013年08月16日


linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)


<style type="text/css">
#linear-gradient {
	width: 400px;
	height: 200px;
	border: solid 1px #000000;
	border-radius: 20px;
	background: linear-gradient(to bottom, #000, #d00);
}

#linear-gradient-old {
	width: 400px;
	height: 200px;
	border: solid 1px #000000;
	border-radius: 20px;
	background: -moz-linear-gradient(top, #000, #d00);
	background: -webkit-linear-gradient(top, #000, #d00);
	background: -o-linear-gradient(top, #000, #d00);
	background: -ms-linear-gradient(top, #000, #d00);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#dd0000)";
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#000000, endColorstr=#dd0000);
}
</style>

IE9 以外の環境は一通りあるので、全て試してみましたが、#linear-gradient-old である必要(▲)があるのは IE(や他) の古いバージョン対応をしようとした時だけです。しかも、IEは バージョンによって filter でさえ書き方が複数あるようで・・・・。一応、IE10 の開発者ツールで『ドキュメントモード』を変更して確認できます。
IE10 の ドキュメントモード変更

ですが、IE10 より前の事(と Safari)を忘れるのであれば、シンプルな記述で表現を楽しめるように(やっと)なったようです。
linear-gradient のみ
to left bottom
to right bottom
to left top
to right top
旧設定(ブラウザ依存)



posted by lightbox at 2013-08-16 19:56 | CSS3 | このブログの読者になる | 更新情報をチェックする

2013年03月06日


現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述

Windows7 に IE10 をインストールしたので全てテストしてみると、ベンダープレフィックスが必要なのは、webkit だけになっていました。『
@keyframes のみ CSS で記述して、後の処理を全て jQuery で行う『実行中アニメーションアイコン』のサンプル』でもそうでしたが、webkit だけにそういう傾向があるようです。

※ ベンダープレフィックスが無い場合は、to right というような記法でないと動作しませんでした。

IE は、IE10 の開発者ツールで標準時に linear-gradient で処理されている事を確かめ、開発者ツールで、モードを IE9 に変更して filter が使われている事を確認しています
<style type="text/css">
.bar {
	padding: 15px;

	background: -webkit-linear-gradient(left, #00008b, #f7f7f7);
	background: linear-gradient(to right, #00008b, #f7f7f7);
	filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr="#00008b", endColorStr="#f7f7f7", gradientType="1");
}

</style>

<div class="bar"></div>


タグ:CSS3 ブラウザ
posted by lightbox at 2013-03-06 15:40 | CSS3 | このブログの読者になる | 更新情報をチェックする

2013年02月16日


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

box-shadow を使って、本体の DIV の影をいくつも複製して、それぞれにサイズや色や透過の処理を施す事ができます。

ここでは、本来の影としての『ぼかし処理』は使用せずに、影分身がどういうふうに行われるかが良く解るようにコードを作成しました。
最初の一つ目だけが、border で枠線を引いていますが、影は二つを重ねてボーダーと同じ表現をしています。

影は追加すると、後ろへ重なり隠れます。ですから、ボーダーを作る場合は順序は重要です。

数はいくらでも作成できるので、模様やアイコンを作成するのに有効ですし、複数の DIV や文字そのものも組み合わせて行く事ができます。
CSS でアイコンを作るサイト http://one-div.com/
<style type="text/css">
#target1 {
	/* 最初の DIV にボーダー指定 */
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px; /* 形状が影にも反映される */
	border: solid 5px #909090;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}

#target2 {
	/* 最初の DIV */
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			/* グレーの同じサイズの影 */
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	/* DIV に対する特殊形状効果( 当然影にも反映される ) */
	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
#target3 {
	/* 最初の DIV */
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			/* 白の少し小さい影 */
			110px 0px 0px -5px rgba(255,255,255,1),
			/* その後ろにグレーでボーダーを再現 */
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	/* DIV に対する特殊形状効果( 当然影にも反映される ) */
	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
#target4 {
	/* 最初の DIV */
	margin: 0 0 170px 50px; /* 170px は、影のぶんマージンを取って表示場所を確保 */
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			/* 影なので、後ろへ後ろへと重なる */
			110px 0px 0px -5px rgba(240,240,240,1),
			160px 50px 0px 0px  rgba(255,0,0,1),
			210px 100px 0px 0px  rgba(0,255,0,1),
			260px 150px 0px 0px  rgba(0,0,255,1)
			;

	/* DIV に対する特殊形状効果( 当然影にも反映される ) */
	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
コードのテスト

http://jsdo.it/sworc/ecgp


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

2013年02月10日


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






影の位置
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 のライブラリを直リンクしています(そういうライブラリなので)。

ただ、Google のライブラリを使っても jQuery UI 用の CSS は Google には無いようなので、自分のサイトから引っ張って来ています。でも、こないだ Google ドライブが WEB 公開可能になったので、そこへ jQuery を全て入れても動作すると思います。 CSS だけで試しましたが、相当レスポンスは悪いですけれど動きました。
( こちらの『サンプル』ボタンから『ドロップシャドウをスライダーで変化させる』でコードを変更しながらテストできます )

▼ jQuery を使ったソースコード
<link rel="stylesheet" href="https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/jquery/jqcss/black-tie/jquery-ui-1.8.20.custom.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<style type="text/css">
#target {
	width: 400px;
	height: 100px;
	border: solid 1px #000000; /* 罫線 */
	margin: 50px 0 0 50px; /* 上と左の余白 */
}
#slider1, #slider2, #slider3 {
	width: 200px;
	margin: 0 0 0 20px;
}
#tbl td{
	padding: 5px;
	white-space: nowrap;
}
</style>
<table id="tbl">
<tr><td>影の位置</td><td><div id="slider1"></div></td><td>box-shadow: <b style='color:#F00'>99px 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>
</table>
<div id="target">
</div>


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

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

$(function () {
	$("#slider1").slider({
		range: "min",
		step: 1,
		min: -50,
		max: 50,
		value: 0,
		slide: function (event, ui) {
			p1 = ui.value+"px "+ui.value+"px";
			$("#target").css("box-shadow", p1+" "+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", p1+" "+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", p1+" "+p2+" "+p3+pw);
		}
	});
});

</script>
CSS は、Google ドライブを使って、ライブラリは Google のホスティングなんでそのままどうぞ。

※ 今試したら、Windows の Safari だけ動きませんでした。jQuery のイベントは動作しているのに、css メソッドでの設定で適用されないみたいです。

posted by lightbox at 2013-02-10 23:27 | CSS3 | このブログの読者になる | 更新情報をチェックする

2013年02月09日


CSS で画像が立ってるような影を付けて、画像の角は丸くしておく




プエルト アルカディア (トリップアドバイザー提供)
一般的なテストとして、外部の画像を使用しています。

影用の DIV を定義する

本体の DIV は見えていませんが、好きな形状で位置決めする為に、position:absolute で、z-index:-2 を指定して作成しています。これによって、幅や位置が自由に設定可能になります。

また、プレースホルダとして position:relative の DIV の中に定義する必要があります。

画像は通常の画像

position:absolute の DIV は、画像のスペースを無視して描画されるので、画像側は特に気にせず角を丸くする CSS と、影を表示する為のスペースとして margin-left:80px を指定しています。

角を丸くする border-radius は、代表的な5つのブラウザで動作しています。
transform のみ各ブラウザ用の指定 box-shadow は そのままで全て適用されましたが、transform はまだこのような指定が必要なようです。
<style type="text/css">
#shadow001 {
	left:28px;
	top:225px;
	width:556px;
	height: 90px;
	z-index: -2;

	box-shadow: -70px 100px 8px rgba(0, 0, 0, 0.4);

	-webkit-transform:skew(40deg);
	-ms-transform:skew(40deg);
	-o-transform:skew(40deg);
	transform:skew(40deg);
}

#img001 {
	margin-left:80px;
	border-radius: 10px;
}

</style>
<div style='position:relative;'>
<img id="img001" alt="" src="http://media-cdn.tripadvisor.com/media/photo-s/01/45/9b/57/puerto-alcudia.jpg" />
<div id="shadow001" style='position:absolute;'></div>
</div>
<br />
<a href="http://www.tripadvisor.jp/Tourism-g580312-Port_d_Alcudia_Majorca_Balearic_Islands-Vacations.html">プエルト アルカディア</a> (トリップアドバイザー提供)

確実に動作確認する為に、画像に対する自動的な描画になっいませんが、JavaScript を使えばある程度自動的にはできると思います。

参考にしたのは、CSS drop-shadows without images – Nicolas Gallagherデモページです。

説明読んでも解りづらいです。それほどデモは複雑に感じたので、開発者ツールで適用されている CSS をすこしづづ解除して動作を確認して再現しました。
この画像は、クリックすると拡大されます
posted by lightbox at 2013-02-09 17:55 | CSS3 | このブログの読者になる | 更新情報をチェックする

2012年06月23日


IE 兼用背景 Fade transition の実装


本来 CSS3 で簡単にできるところを、IE だけみっともないので、何とか頑張ってみました。
、が、実際問題こんな事している時代でも無いのですが・・・

現実にはまだ問題があるのが、IE で見てもらうと良く解りますが、現状の再確認と言うことです。
<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
   filter:progid:DXImageTransform.Microsoft.Fade(duration=2);
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>
<script type="text/javascript">
(function() {
if(window.navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
	str="";
	str+="<style type=\"text/css\"> \n";
	str+=".set_image:hover {   \n";
	str+="	background-color: #000; \n";
	str+="} \n";
	str+="</style> \n";
	document.write(str);
}
})();
</script>
<div class="box_transition set_image"
onmouseover='try{this.filters[0].Apply();this.style.backgroundColor="#000";this.filters[0].Play();}catch(e){}'
onmouseout='try{this.filters[0].Apply();this.style.backgroundColor="#fff";this.filters[0].Play();}catch(e){}'
></div>
えっと、IE のアンチエイリアスのバグに対応しました。
( あまり意味無いとは思いますが )
<style type="text/css">
.box_transition {
  -webkit-transition: all 1.3s ease-out;
     -moz-transition: all 1.3s ease-out;
       -o-transition: all 1.3s ease-out;
          transition: all 1.3s ease-out;
   filter:progid:DXImageTransform.Microsoft.Fade(duration=0);
}
.set_image {
	width: 526px;
	height: 640px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
}
</style>

<script type="text/javascript">
</script>
<div id="target" class="box_transition set_image"
onmouseover='try{this.filters[0].Apply();this.style.backgroundColor="#000";this.filters[0].Play();}catch(e){}'
onmouseout='try{this.filters[0].Apply();this.style.backgroundColor="#fff";this.filters[0].Play();}catch(e){}'
></div>

<script type="text/javascript">
(function() {
if(window.navigator.userAgent.toLowerCase().indexOf("msie") == -1) {
	str="";
	str+="<style type=\"text/css\"> \n";
	str+=".set_image:hover {   \n";
	str+="	background-color: #000; \n";
	str+="} \n";
	str+="</style> \n";
	document.write(str);
}
else {
	target.filters[0].Apply();
	target.style.backgroundColor="#fff";
	target.filters[0].Play();
	target.filters[0].duration = 2;
}
})();

</script>
関連する記事

CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御


タグ:IE トラブル
posted by lightbox at 2012-06-23 14:01 | CSS3 | このブログの読者になる | 更新情報をチェックする

2012年05月18日


CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

Google Chrome で背景を合わせたら、他のブラウザでは拡大率が同じでもかなり結果が違いました。透過の適用具合も実際は違う結果になっています。
div

<style>
#css3_target2 {
	background: no-repeat url(https://lh5.googleusercontent.com/-r1QTJQeGzSo/T6jFAQ-P7LI/AAAAAAAAGEE/-L2qcPOCkbw/s470/win8_three.png);
}
#css3_target2 * {
	zoom: 0.97;

	background: rgba(180, 180, 144, 0.1);

	border:1px solid #000;
	color: #000;
	border-radius: 6px;
	-webkit-box-shadow: 0px 2px 2px 0px #000000;
	box-shadow: 0px 2px 2px 0px #000000;
            
</style>
<div id="css3_target2">
<table><tr><td>
<select>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td>
<div style='width:100px;height:100px;'>div</div>
</td>
<td>
<button>ボタン</button>
</td>
<td>
<textarea style="height:80px;">テキストエリア</textarea>
</td>
<td>
<input type="text" value="入力" style='width:100px;' />
</td>
</tr>
<tr>
<td>
<select size=5>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td style='padding:10px;'>
<input type="range" style='width:80px;'/>
</td>
<td colspan="2">
<input type="file" />
</td>
<td>
<input type="date" style='width:100px;' />
</td>
</tr>
</table>
</div>
Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Opera 11.64



Safari(Windows) 5.1.5



関連する記事

ブラウザ別の角丸とグラデーションの適用状態の比較画像
CSS3 と HTML5 で実装具合の表示テスト

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator



posted by lightbox at 2012-05-18 10:46 | CSS3 | このブログの読者になる | 更新情報をチェックする

CSS3 と HTML5 で実装具合の表示テスト


div

<style>
#css3_target * {
	border:1px solid #000;
	color: #000;
	border-radius: 6px;
	background: -moz-linear-gradient(top, #888, #aaa);
	background: -webkit-linear-gradient(top, #888, #aaa);
	background: -o-linear-gradient(top, #888, #aaa);
	background: -ms-linear-gradient:(top, #888, #aaa);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#888888, endColorstr=#aaaaaa)";
	-webkit-box-shadow: 0px 2px 2px 0px #000000;
	box-shadow: 0px 2px 2px 0px #000000;

}
</style>
<div id="css3_target">
<table><tr><td>
<select>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td>
<div style='width:100px;height:100px;'>div</div>
</td>
<td>
<button>ボタン</button>
</td>
<td>
<textarea style="height:80px;">テキストエリア</textarea>
</td>
<td>
<input type="text" value="入力" style='width:100px;' />
</td>
</tr>
<tr>
<td>
<select size=5>
<option value="40">大阪</option><option value="42">兵庫</option><option value="53">徳島</option><option value="51">愛媛</option><option value="54">高知</option><option value="52">香川</option><option value="47">岡山</option><option value="46">広島</option><option value="49">鳥取</option><option value="48">島根</option><option value="50">山口</option><option value="55">福岡</option><option value="61">佐賀</option><option value="56">熊本</option><option value="57">長崎</option><option value="60">大分</option><option value="59">宮崎</option><option value="58">鹿児島</option><option value="62">沖縄</option></select>
</td>
<td style='padding:10px;'>
<input type="range" style='width:80px;'/>
</td>
<td colspan="2">
<input type="file" />
</td>
<td>
<input type="date" style='width:100px;' />
</td>
</tr>
</table>
</div>

入力コントロールへの CSS の適用の程度と、HTML5 の要素を幾つか並べてみました。type=range と type=date はとても使いたいコントロールですが、まだまだ実装の程度は低いようです。

※ Firefox のリストボックスは少し異様です
※ IE だけ TD を無視するように見えますが、filter のせいでうまくいってないようです。
※ ここでは、box-shadow を追加しています。
Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Opera 11.64



Safari(Windows) 5.1.5



iPhone



関連する記事

ブラウザ別の角丸とグラデーションの適用状態の比較画像
CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator


posted by lightbox at 2012-05-18 03:10 | CSS3 | このブログの読者になる | 更新情報をチェックする

2012年05月17日


ブラウザ別の角丸とグラデーションの適用状態の比較画像


IFRAME 内に実装したツールですが、どうせなら CSS3 を使って見栄えを簡単に良くしようと思って設定したのですが、検証できるブラウザの見栄えをとりあえず全部チェックしてみました。

角丸 に対しては、ブラウザ依存では無く border-radius: 10px; とだけ指定していますが、一応どのブラウザでも認識しています。ただ、Opera は 入力コントロールは対象では無いようです。Opera Next でも同じです。

当然ですが、IE8 は適用されません。グラデーションは IE4 の時からあるフィルタの IE8 用の記法を使っています。IE9 もその記法が適用されていますが、IE10 は他のブラウザと同様の記法ができるはずです。

※ グラデーションは、ブラウザ依存の記法でないと適用されませんでした。
※ テキストエリアには、resize:none; を指定しています
※ IE のフィルタの色指定は、6ケタで書かないと正しく色が設定されません
※ IE のテキストエリアのスクロールバーの非表示は overflow: auto;
Google Chrome 19.0.1084.46 m



Firefox 12.0



IE9



Safari(Windows) 5.1.5



Opera 11.64



IE8



iPhone



localStorage は、iPhone でも動作しています。
input,textarea {  
	border-radius: 6px;
}
.btn {  
	background: -moz-linear-gradient(top, #aaa, #eee);
	background: -webkit-linear-gradient(top, #aaa, #eee);
	background: -o-linear-gradient(top, #aaa, #eee);
	background: -ms-linear-gradient:(top, #aaa, #eee );
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#aaaaaa, endColorstr=#eeeeee)";
}

関連する記事

CSS3 と HTML5 で実装具合の表示テスト
CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

参考ページ

CSS3 Please! The Cross-Browser CSS3 Rule Generator


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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり