草鹿

site name

12345

素材は謳姫様よりお借りしました。（CAT TIME！）

対応機種から見るとこんな感じです。

説明
＜div class="frame"＞で画像を囲むと紙に差し込んだ風に表示されます。

カラーコード■■■
背景色、文字色、リンク色はHEAD内に指定してあるので変更される場合はHEADを書き換えてください。

HEAD

/*ページ全体の設定*/
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>

全体レイアウト

bykusaka