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