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

Microsoft Office
container 終わり

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

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