概要
タイトルが…解り辛さマックスですね…
「折りたたまれる」というより「収束される」という表現が適切かも
つまり… 当サイトの… こんな感じの…
ポップアップする画像で使用している枠線です…
マウスホバーすると…四隅に出現する正方形に…
「0.3」秒で…「収束される」感じ…で動きます…
枠線と言っても「擬似的」な枠線で「border」プロパティは未使用です…
仕組みは…4個の「div」要素に背景色を指定して…
上下の「擬似的」な枠線は…幅「100%」高さ「1px」…
左右の「擬似的」な枠線は…幅「1px」高さ「100%」…で…
「span」要素で…4個の「div」要素をラップして…
更に…別の「div」要素で全体の「領域サイズ」を指定してラップし…
「margin」「padding」と「position」プロパティで「位置」を指定して…
「transition」プロパティで「時間的変化」を指定して…
「0.3」秒で「5px」の正方形に「収束される」感じに見せています…
更には…「opacity」プロパティで…
マウスホバー時の「擬似的」な枠線に囲まれた「HTML 要素」…つまり…
「擬似的」な枠線の「中身」…の「透明度」を「0.7」に指定しています…
画像以外でも…様々な「HTML 要素」を「擬似的」な枠線でラップ出来ます…
「CSS3」を使用しますので…未対応のブラウザでは動的変化はしません…
「a」「blockquote」「img」要素を「擬似的」な枠線でラップしてみましょう…
先ずは…共通部分の「CSS」です…
「擬似的」な枠線の「CSS」共通部分
領域の「左寄せ」に配置するか「右寄せ」に配置するかで設定が違います…
両方設定する場合は「
.border」を…「左寄せ」用は…「
.border-l」「右寄せ」用は…「
.border-r」…などに置き換えて下さい…設置領域の「左寄せ」に配置して文字列を回り込ませる場合
「擬似的」な枠線の「CSS」共通部分 / 「左寄せ」用
設置領域の「右寄せ」に配置して文字列を回り込ませる場合
「擬似的」な枠線の「CSS」共通部分 / 「右寄せ」用
「擬似的」な枠線の色は「
background:#58a;」部分…「擬似的」な枠線の太さは「
height:1px;」「width:1px;」部分…「収束される」正方形の大きさは「
width:5px;height:5px」部分です…お好みで弄って下さい…
個別のケースの「概要」
続いて…個別のケースでの…「CSS」と「HTML マークアップ」です…
個別の「CSS」は…「HTML マークアップ」に…
「
style="……"」…の形式で記述しています…サンプルは…領域の「左寄せ」に配置する場合で設定しています…
尚…ツールチップを表示するために…
「HTML マークアップ」では…「title」属性を記述していますが…
ツールチップは別途カスタマイズしています…不要な場合は削除して下さい…
「jQuery」「jQuery UI」第８回「Tooltip」マウスホバーでカーソルに追随して情報を表示
「擬似的」な枠線で「リンク : a」要素を表現する
「擬似的」な枠線の「リンク : a」要素の「HTML マークアップ」
リンク先はページトップに指定してあります…
リンク設定は…ご自身のサイトの設定に依存します…
「擬似的」な枠線のサイズは…適宜…
「
width:200px;height:20px」部分を変更して下さい…「擬似的」な枠線で「引用 : blockquote」要素を表現する
あくまでも…引用的な感じで表現する…という事ですので…
「blockquote」要素に「擬似的」な枠線を付与する…という事ではありません…
Lorem ipsum dolor sit amet, idque nullam adipisci ad ius, eum pertinacia cotidieque accommodare eu, est in numquam assentior.
ねぢゅび ペ稧 ヴ㩟饦ま䦎 滣ふ来䩵䥚, え壌馩榜きゃ 润秵じ竤囨 ぶ䧦 襪ニャ磪, え壌馩榜きゃ 障ゔ埥む䤦 ッすひょ餯テ そ饥谨 み䤣 しょジャぺごちゃ ビェ栣チにょ䨩 谣穞ひゅみ䤣 樊鏨黧 谨䩦, ひゃ祦 䩣りゅミ礨ほ 楜勣ジェ窨觊 滣ふ来䩵
ねぢゅび ペ稧 ヴ㩟饦ま䦎 滣ふ来䩵䥚, え壌馩榜きゃ 润秵じ竤囨 ぶ䧦 襪ニャ磪, え壌馩榜きゃ 障ゔ埥む䤦 ッすひょ餯テ そ饥谨 み䤣 しょジャぺごちゃ ビェ栣チにょ䨩 谣穞ひゅみ䤣 樊鏨黧 谨䩦, ひゃ祦 䩣りゅミ礨ほ 楜勣ジェ窨觊 滣ふ来䩵
「擬似的」な枠線の「引用 : blockquote」要素の「HTML マークアップ」
引用はダミーテキストで…斜体「
font-style:italic」を設定してあります…「擬似的」な枠線と引用部分の間隔は「
padding:5px 10px;」部分で…上下「5px」左右「10px」に設定しています…
「擬似的」な枠線に…インデントも「
margin-left:1em」設定しています…記述量によって適宜…「擬似的」な枠線の…
高さ「
height:100px;」も変更して下さい…「擬似的」な枠線で「画像 : img」要素を表現する
「概要」に置いてある「擬似的」な枠線の「画像 : img」要素の「HTML マークアップ」
そのまま…ご自身のサイトの画像と置き変えてしまうと…
「margin」や「padding」を設定していますので…
改行などの関係で…デザインに影響しますので…
「概要」の画像は…画像のオリジナルサイズが「250x100」で…
サムネイルのサイズが「200x80」の場合を想定して置き換えてあります…
画像と「擬似的」な枠線の間隔は「収束される」正方形と同じ「5px」ですが…
左右の間隔は画像を「
text-align:center;」で中央配置にして実装していますので…サムネイル画像の横幅は「190px」になります…
上下の間隔は上に「
padding-top:5px;」しか設定していませんので…サムネイル画像の高さは「75px」になります……という訳で…
画像のオリジナルサイズ「250x100」…サムネイル画像のサイズ「190x75」…
「擬似的」な枠線のサイズ「200x80」…という事になります…
回り込ませる「margin」は共通部分で…右が「1em」下が「1.5em」ですので…
ご自身のサイトの設定と違う場合は…更に調整が必要です…
Blogger のデフォルトのポップアップ機能とは違いますので…
2行目を…ご自身の画像ポップアップの「HTML」と…
サイズ調整してから置き換えて下さい…
勿論…有用とは思えませんが…ポップアップしない画像でも無問題です…
おわりに…
サイトでの実装では…ボタンによるリンク系や開閉系は…
光源がカーソルに追従するエフェクト…で実装していますので…
jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト
画像でしか使用していませんが
例えば… マウスホバー時の「透明度」設定を逆にして…
サイドバー全体やガジェットをラップする…などという使い方も出来ます…
アイデア次第で…特にハウツー系の記事ではクールに演出が出来ると思います…
以上です…最後までお読みいただきましてありがとうございます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿