CSS で、画像に対して角を丸くしたり、影を付けたりしていると何故か Firefox だけ ストリートビューを表示している画像が区切られてこんな感じになってしまいます。他のブラウザでは起きないのですが、結局以下のように一括で指定して起きないようにしました。
.gm-style img {
border-radius: 0px;
box-shadow:none;
}
関連する記事 jQuery のプラグインとしてストリートビューを利用する(2)
2013年11月15日
Google ストリートビューを表示している class="gm-style"
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 |
旧設定(ブラウザ依存)
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>
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
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 をすこしづづ解除して動作を確認して再現しました。
この画像は、クリックすると拡大されます
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) : 「フェードイン、フェードアウト」制御
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
