ＳＱＬの窓
TOP / CSS3
<< 1 2 3 >>

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

























<< 1 2 3 >>




















Seesaa の各ページの表示について




Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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


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

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

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>


この記述は、以下の場所で使用します



















































Powered by Seesaa

 
























container 終わり































✅ フリーフォントで簡単ロゴ作成

✅ フリーフォントでボタン素材作成

✅ フリーフォントで吹き出し画像作成

✅ フリーフォントではんこ画像作成

✅ ほぼ自由に利用できるフリーフォント

✅ フリーフォントの書体見本とサンプル

✅ 画像を大きく見る為のウインドウを開くボタンの作成





































✅ CSS ドロップシャドウの参考デモ

✅ イラストAC

✅ ぱくたそ

✅ 写真素材 足成

✅ フリーフォント一覧

✅ utf8 文字ツール












右サイド 終わり



base 終わり