読者です 読者をやめる 読者になる 読者になる

2月22日 授業内容(前半  rgba,hsla,border-radius,etc...)

今日のgoogle top画面
 
 
 
.....................................................
 
こんにちわjapan    http://konnichiwajapan.tokyo/
 
 
 
 
・CSS3の概要(P257~)
 
・特殊記号 読み方:http://www1.odn.ne.jp/haru/data-list/mark.htm
 
*htmlファイルの中のスタイルのコメントアウトするときは/**/で挟まないときちんと表示できないので注意が必要。
 
・ドロップシャドウ(ちょっと浮き上がっているデザイン)・・・質量の軽い物に使うと良い
・光彩・・・質量が重いものにつかうと良い
 
 

f:id:paris1204:20160223000613p:plain

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3の練習ーテキストの装飾(P276~P293)</title>
<style>

/*reset*/

html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}

ul{list-style:none;}

 

/*body*/
body{font-size:16px;
background:#333333;}


.shadow{width:600px;
margin:50px auto;}


.shadow li{text-align:center;
margin:5px 0;
padding:10px;
border:#ccc 1px solid;
background:#eee;
font-family:arial,sans-serif;
font-size:200%;
font-weight:bold;
}

/*liのindividual*/

.ts01{text-shadow:2px 2px 6px #333;
color:#0ff;}

.ts02{color:#ff6600;
text-shadow:0 0 10px #093;}

.ts03{color:#ccc;
text-shadow:-1px -1px 0 #0ff, 1px 1px 0 red;}

.ts04{color:#ccc;
text-shadow:-1px -1px 0 #0FF, 1px 1px 0 red;}

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

.ts06{text-shadow:
0 0 5px #fff,
0 0 13px #F03,
0 0 13px #f03,
0 0 13px #f03,
0 0 13px #f03;}

</style>

 

 

</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>

 

 

 

 

f:id:paris1204:20160223000655p:plain

f:id:paris1204:20160223093312p:plain

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景色だけを半透明に設定</title>
</head>
<style>
/*reset*/

html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;}

ul{list-style:none;}

 

/*body*/
body{font-size:16px;
background:url(%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A-1.gif);}


/*rgba(P276~)*/
p.rgba{width:300px;
margin:300px auto 20px auto;
font-size:200%;
color:yellow;
text-align:center;
overflow:hidden;}

p.rgba span{
border:#fff 1px solid;
padding:10px;
background:rgba(255,255,255,0.5);}


/*hsla*/
.hsla01{background:hsla(0,100%,30%,0.7);}
.hsla02{background:hsla(30,100%,30%,0.7);}
.hsla03{background:hsla(60,100%,30%,0.7);}
.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);}

 

ul.hsla{width:600px;
text-align:center;
margin:20px auto;
overflow:hidden;}

ul.hsla li{width:50px;
line-height:50px;
margin:0 10px;
float:left;
}

/*ul.bdr*//*角丸の半径*/
ul.bdr{width:400px;
margin:20px auto;
}

ul.bdr li{width:400px;
line-height:100px;
background:#DA5557;
text-align:center;
margin-top:10px;
}

.bdr01{border-radius:10px;}
.bdr02{border-radius:5px 10px 15px 20px;}
.bdr03{border-radius:10px 0 20px;}
.bdr04{border-radius:10px 0;}

ul.bdr>li.bdr05{width:400px;
text-align:center;
border-radius:400px;
line-height:400px;}

</style>
<body>

<p class="rgba"><span>RGBA color</span></p><!--(P278、279)-->

<ul class="hsla">(<!--P279)-->
<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>

<ul class="bdr"><!--(P280)-->
<li class="bdr01">全て同じ10px</li>
<li class="bdr02">左上5px|右上10px|右下15px|左下20px</li>
<li class="bdr03">左上10px|右上と左下0px|右下20px</li>
<li class="bdr04">左上と右下10px|右上と左下0px</li>
<li class="bdr05">正円(幅、高さ、border-radiusを全て同じ値)</li>
</ul>

</body>

</html>