WEB、始めました

半年間WEB制作の学校に通います。その記録。

22日目　ｃｓｓ3でShadow　ｐｓでShadow　　

text-shadow

f:id:chawannmusi:20160229112558p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3の練習 - テキストの装飾</title>

</head>

<body>
<ul class="shadow">
<li class="ts01">Drop Shadow</li>
<li class="ts02">Grow</li>
<li class="ts03">Bevel</li>
<li class="ts04">Embos</li>
<li class="ts05">Stroke</li>
<li class="ts06">Neon</li>
</ul>

</body>
</html>


<style>
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}

body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
san-serif;
}

ul {
list-style: none;
}

.shadow {
width: 600px;
margin: 50px auto;
}
.shadow li {
margin: 5px 0;
padding: 10px;
border: #CCC 1px solid;
background: #EEE;
font-family:Arial, sans-serif;
font-size: 200%; /*2.0rem*/
font-weight: bold;
text-align: center;
}

.ts01 {
text-shadow: 2px 2px 6px #000; /* x y ぼかし 色*/
color:#FFF;
}

.ts02 {
text-shadow: 0 0 10px #FF6;
color: #FFF;
}

.ts03 {
text-shadow: -1px -1px 0 #FFF, 1px 1px 0 #AAA;
color: #CCC;
}
.ts04 {
text-shadow: -1px -1px 0 #AAA, 1px 1px 0 #FFF;
color:#CCC;
}

.ts05 {
text-shadow:
1px 1px 0 #999,
-1px 1px 0 #999,
1px -1px 0 #999,
-1px -1px 0 #999;
color: #FFF;
}

.ts06 {
text-shadow:
0 0 5px #FFF,
0 0 13px #F03,
0 0 13px #F03,
0 0 13px #F03,
0 0 13px #F03;
color: #FFF;
background: #000 !important;
}

</style>

rgba

f:id:chawannmusi:20160229112510p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RGBA COLOR</title>

</head>

<body>
<div class="box">
<div class="txt">
<p class="rgba"><span>RGBA COLOR</span></p>
</div>
</div>
</body>
</html>

||>

 

>|css|

<style>
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}

body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
san-serif;
}

.box {
width: 960px;
height: 660px;
margin: 0 auto;
background: url(../bg.jpg) no-repeat; 
}

.txt {
text-align:center;
padding-top: 300px;
}

.rgba span {
border: #FFF 1px solid;
padding: 10px;
background: rgba(255,255,255,0.3); /*a:0=透明 1=不透明*/
font-size:200%;
font-weight: bold;
color: #FF0;
}
</style>

Hsla

f:id:chawannmusi:20160229112830p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hslaの練習</title>

</head>

<body>
<div class="box">
<ul class="hsla">
<li class="hsla01">赤</li>
<li class="hsla02">橙</li>
<li class="hsla03">黄</li>
<li class="hsla04">緑</li>
<li class="hsla05">青</li>
<li class="hsla06">紫</li>
<li class="hsla07">桃</li>
</ul>
</div>
</body>
</html>


<style>
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}

body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
san-serif;
background: #666;
}

.box {
width: 700px;
margin: 50px auto;
}

ul {
list-style: none;
overflow: hidden;
}


.hsla li {
margin: 0 5px;
padding: 30px;
border: #FFF 1px solid;
float:left;
font-size: 16px;
color: #FFF;

}


.hsla01 {background:hsla(0,100%,30%,0.3);}
.hsla02 {background:hsla(30,100%,30%,0.5);}
.hsla03 {background:hsla(60,100%,30%,0.1);}
.hsla04 {background:hsla(120,100%,30%,0.7);}
.hsla05 {background:hsla(240,100%,30%,0.7);}
.hsla06 {background:hsla(270,100%,30%,0.7);}
.hsla07 {background:hsla(300,100%,30%,0.7);}

</style>

border-radius

f:id:chawannmusi:20160229113022p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>border-radiusの練習</title>

</head>

<body>
<ul class="sample_bdr">
<li class="bdr01">全て同じ</li>
<li class="bdr02">左上｜右上｜右下｜左下</li>
<li class="bdr03">左上｜右上と左下｜右下</li>
<li class="bdr04">左上と右下｜右上と左下</li>
<li class="bdr05">正円</li>
</ul> 
</body> 

</html>


<style>
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}

ul { list-style: none; }

.sample_bdr {
width: 600px;
margin: 50px auto;

}

li {
margin: 10px 0;
padding: 20px;
font-size: 16px;
border: 1px solid #666;
background: #d3d3d3;
}

.bdr01{ border-radius: 10px;}
.bdr02{ border-radius: 5px 10px 15px 20px;}
.bdr03{ border-radius: 10px 0 20px;}
.bdr04{ border-radius: 10px 0;}
.bdr05{ 
width: 50px;
height: 50px;
border-radius: 50px;
text-align: center;
line-height: 50px;
}

</style>

box-shadow

f:id:chawannmusi:20160229113250p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3の練習 - boxの装飾</title>

</head>

<body>
<ul class="shadow">
<li class="bs01">Drop Shadow</li>
<li class="bs02">Grow</li>
<li class="bs03">Inset Drop Shadow</li>
<li class="bs04">Inset Grow</li>
<li class="bs05">Spread Shadow</li>
<li class="bs06">Multi Shadow</li>
</ul>

</body>
</html>


 

<style>
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}

body {
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
san-serif;
}

ul {
list-style: none;
}

.shadow {
width: 600px;
margin: 50px auto;
}
.shadow li {
margin: 20px 0;
padding: 10px;
border: #CCC 1px solid;
background: #EEE;
font-family:Arial, sans-serif;
font-size: 200%; /*2.0rem*/
font-weight: bold;
text-align: center;
}


.bs01 { box-shadow: 2px 2px 5px #999; }
.bs02 { box-shadow: 0 0 10px #999; }
.bs03 { box-shadow: 2px 2px 5px #999 inset; }
.bs04 { box-shadow: 0 0 15px #ccc inset; }
.bs05 { box-shadow: 0 0 0 3px #000; }
.bs06 { 
box-shadow:
0 0 0 1px #000 inset,
0 0 0 2px #000,
2px 2px 10px #000; 
}


</style>



photoshopでdrop-shadow

シャドウの付け方

重厚感のあるものは光彩でるけ

軽く見せたいものはドロップシャドウでつける（ガラスの上にのっているように見せるとか）

ガラスの上にあるような瓶

f:id:chawannmusi:20160229120452p:plain

背景色の下を伸ばす

もとの画像から瓶のみペンツールで切り抜き

パスをコピーして保存

パスのサムネイルをctrl＋クリックし、ctrl+Shift+I　で選択範囲反転

Deleteで瓶以外を削除する

瓶のみのレイヤーをコピーしサムネイルをCtrl+クリックし

ツールバーの編集

変形の垂直方向に反転

移動ツールでShift+ドラッグで瓶の底が重なるように移動

レイヤーマスクをかけグラデーションツールで反転させた瓶の先端が消えるようにする

反転していない瓶レイヤーの下に反転している瓶レイヤーをレイヤー内で移動