普通の写真表示

imgタグで表示しただけ


影付きの効果

.frame2{ /*影付きの効果*/
box-shadow:3px 3px 20px 2px rgba(0,0,0,0.4);
}


めくれた感じの効果

.frame3{ /*めくれた感じの効果*/
	position:relative;
	z-index:1;
}

.frame3:after{
	position:absolute;
	content:"";
	box-shadow:0 15px 10px rgba(0,0,0,0.5);
	transform:rotate(3deg);
	right:4px;
	left:auto;
	top:auto;
	bottom:12px;
	z-index:-1;
	width:95%;
	height:20%;
}


写真に傾きの効果

.frame4{ /*写真に傾きの効果*/
	transform:rotate(5deg);
}


写真に傾きを付け、影を付ける効果

.frame5{ /*写真に傾きを付け、影を付ける効果*/
	transform:rotate(5deg);
	box-shadow:5px 5px 20px 2px rgba(0,0,0,0.4);
}


写真を角丸にする効果

.frame7 img{ /*写真を角丸にする効果*/
	border-radius:10px;
}


角丸四角形の写真に影を付ける効果

.frame7 img{ /*角丸四角形の写真に影を付ける効果*/
	border-radius:10px;
	filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}


写真を楕円で切り抜く効果

.frame8 img{ /*写真を楕円で切り抜く効果*/
	border-radius:50%;
}


楕円の写真に影を付ける効果

.frame9 img{ /*楕円の写真に影を付ける効果*/
	border-radius:50%;
	filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}


写真を円で切り抜く効果

.frame10{
	width:200px;
}

.frame10 img{ /*写真を円で切り抜く効果*/
	border-radius:50%;
}


円の写真に影を付ける効果

.frame11{
	width:200px;
}

.frame11 img{ /*円の写真に影を付ける効果*/
	border-radius:50%;
	filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}


重ね置きの効果

.frame12{ /*重ね置きの効果*/
	display:inline-block;
	position:relative;
	z-index:1;
}

.frame12:after{
	position:absolute;
	display:block;
	content:"";
	box-shadow:0 4px 10px rgba(0,0,0,0.3);
	transform:rotate(3deg);
	left:0;
	top:0;
	z-index:-1;
	width:100%;
	height:100%;
	background:#ffffff;
}


ぼかしの効果

.frame13{ /*ぼかしの効果*/
	position:relative;
	width:200px;
	height:150px;
}

.frame13:after{
	position:absolute;
	display:block;
	content:"";
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	box-shadow:
		inset 0 0 40px 4px rgba(255,255,255,1),
		inset 0 0 40px 4px rgba(255,255,255,1),
		inset 0 0 40px 4px rgba(255,255,255,1),
		inset 0 0 40px 4px rgba(255,255,255,1);
}


Pretty!
FruitCake

文字を白くくり

.frame14{ /*文字を白くくり*/
	background-image:url(../img/cake_200.jpg);
	width:200px;
	height:150px;
	font-size:2em;
	font-family:"HG明朝E","ＭＳ 明朝","ＭＳ Ｐ明朝",serif;
	font-style:italic;
	text-shadow:
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff,
		0px 0px 10px #ffffff;
}

.box-text{
	width:500px;
}

.moji1{
	margin-top:15px;
	margin-left:20px;
}

.moji2{
	margin-top:10px;
	margin-left:30px;
}


Pretty!
FruitCake

文字の影

.frame15{ /*文字の影*/
	background-image:url(../img/happa.jpg);
	width:200px;
	height:150px;
	border:1px solid #000000;
	font-size:1.5em;
	font-family:"HG明朝E","ＭＳ 明朝","ＭＳ Ｐ明朝",serif;
	font-style:italic;
	text-shadow:
		1px 1px 4px #777777;
}

.box-text{
	width:500px;
}

.moji1{
	margin-top:15px;
	margin-left:20px;
}

.moji2{
	margin-top:10px;
	margin-left:30px;
}


Pretty!
FruitCake
Pretty!
FruitCake

文字の影

.frame16 .moji1,.moji2,.moji3,.moji4{ /*文字の影*/
	font-size:1.5em;
	font-family:"HG明朝E","ＭＳ 明朝","ＭＳ Ｐ明朝",serif;
	font-style:italic;
}

.frame16 .moji1,.moji2{
	text-shadow:
		1px 1px 4px #777777;
}


.box-text{
	width:500px;
}

.moji1{
	margin-top:15px;
	margin-left:20px;
}

.moji2{
	margin-top:10px;
	margin-left:30px;
}

.moji3{
	margin-top:15px;
	margin-left:20px;
}

.moji4{
	margin-top:10px;
	margin-left:30px;
}