【授業メモ】CSS3 サイト制作にも使えそうな小技集
サイト制作に使えるCSS3
Googleの検索で上位にしたいなら、テキストが大事。Googleが読んでくれるのはテキストだから、ヘッダー画像に文字も画像で入れてしまうと、いくらおしゃれにしてもGoogleにとっては意味がない。そこでcss3でテキストを装飾して画像に載せる技を使う！
いろいろできるらしい！！！
テキストの装飾ができるtext-shadow
★text-shadowの記述の仕方
text-shadow: X方向の距離 Y方向の距離 ぼかし幅 影の色;
記述の仕方によって、影をつける以外に、へこんでいる感じや浮き出ている感じなど、色々できる！
★影を付ける
li.ts01 {
text-shadow: 2px 2px 3px #999;/*x方向の距離 y方向の距離 ぼかし幅 色の順で影を指定*/
}
★光彩を付ける
li.ts02 {
color: #FFF;
text-shadow: 0 0 5px #999;/*光彩をつける*/
}
★押し出し感じを出す
li.ts03 {
color:#CCC;
text-shadow: -1px -1px 0 #FFF, 1px 1px 0 #aaa;/*押し出し感を出す*/
}
★へこんでいる感を出す
li.ts04 {
color:#CCC;
text-shadow: -1px -1px 0 #aaa, 1px 1px 0 #FFF;/*へこんでいる感を出す*/
}
★ふちどりする
li.ts05 {
color: #FFF;
text-shadow: 1px 1px 0 #999,-1px 1px 0 #999,1px -1px 0 #999,-1px -1px 0 #999;/*ふちどり 画像の上に文字を載せる場合に使う*/
}
★ネオン
li.ts06 {
text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;/*ネオン あまり使わない*/
animation: text-color 1s infinite;
}
まとめ
<title>cssでのテキストの装飾</title>
<style>
html,body,ul,li,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
ul {
width: 800px;
margin: 50px auto 0;
background:#D1FAEC;
}
li {
padding: 20px 0;
text-align: center;
font-size: 24px;
color: #222;
}
li.ts01 {
text-shadow: 2px 2px 3px #999;/*x方向の距離 y方向の距離 ぼかし幅 色の順で影を指定 影をつける*/
}
li.ts02 {
color: #FFF;
text-shadow: 0 0 5px #999;/*光彩をつける*/
}
li.ts03 {
color:#CCC;
text-shadow: -1px -1px 0 #FFF, 1px 1px 0 #aaa;/*押し出し感を出す*/
}
li.ts04 {
color:#CCC;
text-shadow: -1px -1px 0 #aaa, 1px 1px 0 #FFF;/*へこんでいる感を出す*/
}
li.ts05 {
color: #FFF;
text-shadow: 1px 1px 0 #999,-1px 1px 0 #999,1px -1px 0 #999,-1px -1px 0 #999;/*ふちどり 画像の上に文字を載せる場合に使う*/
}
li.ts06 {
text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;/*ネオン あまり使わない*/
}
</style>
</head>
<body>
<ul class="sample ts">
<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>
★ネオンにさらにアニメーションをつけてみることもできる
li.ts06 {
text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;/*ネオン あまり使わない*/
animation: text-color 1s infinite;
}
@keyframes text-color {
0% {text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;}
50%{text-shadow: 0 0 5px #FFF,0 0 40px #F03,0 0 40px #F03,0 0 40px #F03;}
100% {text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;}
}
背景画像を重ねる
★複数の画像を背景画像に指定して重ねることができる
重ね順に記述すること！ 上に表示させたい方を先に書く！！
もちろんPhotoshopでも同じことはできるが、他とのバランスを見ながら配置を決めたい場合などはこっちでやればいいよね
#box {
width: 960px;
height: 400px;
background: url(img/bg1.png) no-repeat, url(img/bg2.jpg) no-repeat;
}/*上に表示させる画像を先に書く*/
グラデーション
★線のグラデーション
#box2 {
width: 960px;
height: 300px;
margin: 50px auto 0;
background-color: #F36;/*グラデーションが効かないブラウザの場合の保険の色*/
background: -webkit-linear-gradient(top,#F36,#FFF);/*上から下へのグラデーション 古い書き方 webkitはchromeとサファリとオペラのためのベンダープレフィックスの書き方*/
background: linear-gradient(to bottom,#F36,#FFF);/*上から下へのグラデーション 今の書き方 上の記述は実はいらない*/
}
将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子（vendor identifier）でブラウザの種類を特定します。
主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari 、 Opera
-ms- …… Internet Explorer
★便利なグラデーションジェネレーター
必要な色、形にしてcssをコピーして貼るだけ！
その際、mozとfilterはいらないので消してよい。
#box3{
width: 960px;
height: 300px;
margin: 50px auto 0;
background: rgb(255,255,255); /* Old browsers */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
