カテゴリー: css

IE8以前でもテキストエリアを角丸内側シャドウにしてと言われた日のためのコード

そんな日がいつ来るんだろう？とは思いますが。
css3を補助する系のjsは、別の不都合を引き起こしたりするので敬遠しています。
なので背景画像を使ってみました。
リセットcssは効かせた状態で作っています。

マークアップはこんな感じ

<span class="bg">
	<input type="text" class="textTest" />
</span>

cssはこんな感じです。

span.bg{
	background: url(../img/bg_test01.png) center top no-repeat;
	width:212px;
	height:31px;
	display:block;
	padding:8px;
}

span.bg input{
	width:212px;
	height:31px;
	line-height:31px;
	border:0;
	background:#fffcd2;
}

【SP限定】border-imageでいろんなワクをつくろう。

PCでは対応状況が悪いので使い物にならないが、
スマホでのコーディングでは有力かもしれない。
アンドロイドでの、特殊枠画像で、画像がずれたりしないのだ！！

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

div{
	border-style: solid;
	border-width: 30px 25px 20px 25px;
	-moz-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-webkit-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-o-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	border-image: url(../img/bg_form.png) 30 25 20 25 fill stretch round;
}

下記の解説とジェネレータが秀逸。

http://www.htmq.com/css3/border-image.shtml
http://border-image.com/

ユーザーエージェントによって読み込むcssとスクリプトを変更する。

iOSとそれ以外で分岐さす例。
納期直前にバグが出ても、ある程度はリカバリできるかも（厭だけど。）

<script type="text/javascript">
	useragentcheck();
	function useragentcheck(){
		var agent = navigator.userAgent;
		if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1){
			require('js/custom.js');
		}else{
			loadingcss('css/noios.css');
			require('js/customnoios.js');
		}
	}

	function require(src){
		var element=document.createElement('script');
		element.type='text/javascript';
		element.src=src;
		document.getElementsByTagName('head')[0].appendChild(element);
	}

	function loadingcss(href){
		var element=document.createElement('link');
		element.rel='stylesheet';
		element.href=href;
		document.getElementsByTagName('head')[0].appendChild(element);
	}
</script>

フォームに装飾を加えたい時のいろいろ

フォームの装飾はブラウザに依存するので、
フォームの見た目に装飾を加えたい時は、一旦リセットする必要がある場合がある。

-webkit-appearance:none;
-moz-appearance:none;
appearance: none;

タップした時の挙動も変更できる。ハイライトカラーを非表示！

a {
	-webkit-tap-highlight-color: rgba(0,0,0,0); 
}

参考サイト
http://blog.webcreativepark.net/2011/06/09-201210.html

ヘッダーがfixされてるページのページ内アンカー

例えばちょうどいい位置が画面上端から100pxだったらこうする。
多分、パディングの上端がアンカーの位置として計算されているんだろうな。
それだと見た目が正しくならないから、マージントップで調整する、と。

.sample{
padding-top:100px;
margin-top:-100px;
}

参考
http://depthcode.com/2011/02/header-fixed.html

ロールオーバーで半透明

cssの場合

a:hover{
	opacity:0.6;
	-moz-opacity:0.6;
	zoom:1; /* ie 6 7 8 */
	filter: alpha(opacity=60);        /* ie 6 7 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
}

jQueryの場合

$(function(){
	//セレクタで指定。使わないものは.not("#hoge")
	$("#momoHeaderBack a img,.hover").not("#h1logo").hover(function(){
		$(this).fadeTo("normal", 0.6); // マウスオーバーで透明度を60%にする
	},function(){
		$(this).fadeTo("normal", 1.0); // マウスアウトで透明度を100%に戻す
	});
});

jQueryとCSS

.opacity{
	opacity:0.6;
	-moz-opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}

$(function(){
	$('a img').on({
		'mouseenter':function(){
		$(this).addClass("opacity");
	},
		'mouseleave':function(){
		$(this).removeClass("opacity");
	}
	});
});