額装テスト

EnriqueImage.jpg Ujiki.oOさんのページで,画像や文章に枠を嵌める(注:あくまで装飾的な意味です)手法が紹介されていますので,試してみました。

先日のImage Zoomerの機能とも組み合わせて使う事が出来るそうですが,その合わせ技はまだ試していません。



ここでは,古典派最大ギタリストのFernando Sorの肖像画を切りとって使わせてもらいました。

img srcで表示するタイプです。こちらですと,枠を調整すると,絵の方が枠の上にかぶるようです。 Fernando Sor

divで表示するタイプです。こちらですと,枠を調整すると,枠の方が絵の上にかぶるようで,絵画の場合はこちらの方が合っているようです。わざと枠を狭くしています。
Fernando Sor (1778-1839)


nice!(11)  コメント(1)  トラックバック(1) 
共通テーマ:PLAYLOG

nice! 11

コメント 1

Ujiki.oO

 丁寧な実験検証ですね。 ありがとうございます。
 わたしは「上下関係が変化する仕様」を知りませんでした。 勉強になります。 「枠画像コピペ」の記事で、 z-index の利用を対話形式化したいと随分と考えたのですが、利用したくても、先ずはわたしの愚頭に「 z-index 」の仕様が素直に入ってきません。 業界CADの「レイヤー」なら理解できるのですが(笑) ・・・・・ 何度、解説ページを読んでも「あらゆるブラウザーで、きちんと機能する」自信が持てません。 それが<img タグと、<div タグの使い分けで深さが変わるなんて ・・・・・ 毎度のことですけど、Enrique さんの記事は為になります。 わたしにとっては「技術のボディーブロー」です。(笑) ありがとうございます。

 さて、新パラメーターを関数に追加しました。「 padding 」です。 対話形式でも問い合わせ項目を追加しました。 また「余白」について誤認される傾向を配慮しまして、「切り取り量を調整できます」項目内の解説文言を推敲し訂正しました。
http://create2014.blog.so-net.ne.jp/CSS3BorderImage#SomeNew

 尚、総ての最新 Google社の Chrome だけが機能しなくなる問題が発生しましたが、CSS3解説ページのフォーラムで発言したところ、(初めて 爆笑)技術的な返答がありました。 今現在、本記事でも利用下さった JavaScript 関数を改訂し、最新 Google社の Chrome でも正常に機能するようになっています。 本件は「謝辞」と「DISQUS」で報告しました。(微笑)
by Ujiki.oO (2016-06-14 12:01) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 1

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。