CSS3 : logical　error

Google

TOP / 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月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 %>

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

Seesaa ブログ

	階層を指定して Googleのドメイン内検索を実行
	空の zip ファイル / VBScript で作成可能
	Windows 機能の呼び出し
	Windows : shell:sendto は、sendto だけで開くようです。
	Shell コマンドで開くフォルダ : HTA でクリックすると実行可能
	URI スキーム : Windows Update 画面を表示するコマンド
	SQLServer の BCP で INT IDENTITY 列に csv からリストアする
	MySQL に PIPES_AS_CONCAT を設定して、CSV を出力する SQL
	Chrome ポリシー : レジストリ : ( ChatGPT 解説 )
	PL/SQL : 最も簡単な CSV 出力の記述
	VBScript を『管理者として実行する』には、Shell の runas ( 右クリックメニューの実行と同等 ) で実現します / Jscript も追加
	fake sendmail for windows を使って、PHP でごく普通に( mb_send_mail で )メール送信
	TCPDF をダウンロードして、Windows の任意のフォルダで TCPDF 同梱のサンプルを実行する為の設定
	JavaScript : window オブジェクトのプロパティとしてグローバル変数を定義する
	TCPDF をダウンロードして、フリーフォントを埋め込み型で使用する方法
	汎用型 : JSON データより履歴書のフォームを出力するサンプル
	ChatGPT でトップまでスクロールするブックマークレット
	Replit : cs-list
	Replit : js-web-speech
	Replit : js-csv-read-utf8

	一部のファイル形式がブロックされる(GMail)
	Creating Shortcut Menu Handlers
	Microsoft Word のキーボードショートカット
	Excel のショートカットキーとファンクションキー
	サイトへの不自然なリンクを否認する新しいツールの提供を開始しました

logical error