CSS3のプロパティ

CSS3のプロパティ

• テキストP.276
• まず、CSS3で表現してみる

CSS3で角丸を設定する

<section>
<h3>border-radius</h3>
<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>
</section>

/* border-radius
--------------------------------------------------*/
.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: 50%;
  text-align: center;
  line-height: 50px;
}

ボックスシャドウ

<section>
<h3>box-shadow</h3>
<ul class="sample bs">
<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>
</section>

/* box-shadow
--------------------------------------------------*/
.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;
}

テキストシャドウ

<section>
<h3>text-shadow</h3>
<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>
</section>

/* text-shadow
--------------------------------------------------*/
.ts01 {text-shadow: 2px 2px 3px #999;}
.ts02 {color: #fff; text-shadow:0 0 5px #999;}
.ts03 {color: #ccc; text-shadow:-1px -1px 0 #fff, 1px 1px 0 #aaa;}
.ts04 {color: #ccc; text-shadow:-1px -1px 0 #aaa, 1px 1px 0 #fff;}
.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;
}

ベンダープレフィックス

• ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです
• 将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています
• ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子（vendor identifier）でブラウザの種類を特定します

主要ブラウザのベンダープレフィックス

-webkit-	Google Chrome、Safari
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer

• 2016年時点（勧告後）では、IE9・10とAndroid4.3以下を対象にしない場合は、ベンダープレフィックスの記述は不要です