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