info
main
memo
clap
join
rank
rank
site name
12345
素材は
謳姫
様よりお借りしました。(CAT TIME!)
対応機種から見るとこんな感じです。
説明
<div class="frame">で画像を囲むと紙に差し込んだ風に表示されます。
カラーコード
■
■
■
背景色、文字色、リンク色はHEAD内に指定してあるので変更される場合はHEADを書き換えてください。
背景色#ffffff 文字色#6f4b3e リンク色#B29B73
HEAD
<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'> <style type="text/css"><!-- /*デフォルトの余白をリセット*/ * { margin: 0; padding: 0;} /*ページ全体の設定*/ body{ font-size:83%; font-family: 'Architects Daughter',arial unicode ms ,cursive; /*背景色*/ background-color:#fff; /*文字色*/ color: #6f4b3e;} /*リンクの設定*/ a{ color: #B29B73; /*リンク色*/ border-bottom: double 1px #F7EAD5; /*リンクをゆっくり表示するエフェクト*/ text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s;} /*アクティブリンク色*/ a:active { color: #f4b3c2; } /*オンマウス時のリンク色*/ a:hover{ color: #f4a460; border-bottom: double 1px #fff; position: relative; bottom: 1px;} /*余白、行間の設定*/ .all { text-align:center; line-height:160%; letter-spacing:3px; padding-top:5px; background-color:#fff;} /*サイトタイトルの装飾*/ .midashi { position:relative; padding:5px; text-align:center; font-size:18px; font-family:Comic Sans MS; color:#fff; border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1); box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;} /*画像の装飾*/ .frame { display: inline-block; position: relative; overflow: hidden; /* 不要部分を消す */ padding: 6px; /* 6px だけは写真からはみ出す */ } .frame img { box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); } .frame:before, .frame:after { content: ""; position: absolute; z-index: 1; width: 97px; height: 50px; background: #fff; /* 背景色 */ transform: rotate(-30deg);} /* 左上 */ .frame:before { box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8); top: -24px; bottom: auto; right: auto; left: -26px;} /* 右下 */ .frame:after { box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7); top: auto; bottom: -22px; right: -25px; left: auto;} --></style>
全体レイアウト
<div class="all"><div class="frame"><img src="猫素材url" /></div> <a href="">info</a> <a href="">main</a> <a href="">memo</a> <a href="">clap</a> join<a href="">rank</a> <a href="">rank</a> <div class="midashi">site name</div> カウンター</div>
by
kusaka
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -