CSS3勉強会のフォローアップ其の1

昨日はお疲れ様でした。
私自身も非常に勉強になりました。
勉強会中ではソースコードやプレビューなどお見せできませんでしたので、以下でフォローしておきます。

webフォント

1. グーグルフォントにアクセスします。
2. 使用したいフォントが決まったら、Quick-useのボタンをクリック。
3. 3番のフォントを読み込む設定を選びます。
4. 4番のサンプルのようにフォントを適用したいセレクタにfont-familyを指定します。

.sample{
     font-family: 'Peralta', cursive;
}

<p class="sample">webfont</p>

結果は以下のようになります。
webfont

ドロップシャドウ

box-shadow　ボックスシャドウ

ボックスに影をつけます。
値は順番に横移動距離・縦移動距離・ぼかす幅・影の色になります。

.shadow01{
     box-shadow:5px 10px 3px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}

<p class="shadow01">box-shadow</p>

box-shadow

さらに４つ目の数値を入れることができます。
これは広がる幅の指定になります。

.shadow02{
     box-shadow:5px 10px 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}

<p class="shadow02">box-shadow</p>

box-shadow

わかりにくいので縦横は移動しないようにします。

.shadow03{
     box-shadow:0 0 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}

<p class="shadow03">box-shadow</p>

box-shadow

値の先頭にinsetを指定すると内側に影がつきます。

.shadow04{
     box-shadow:inset 0 0 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}

<p class="shadow04">box-shadow</p>

box-shadow

text-shadow　テキストシャドウ

ボックスシャドウとほぼ指定の仕方は同じですが、insetの指定はてきません。
カンマで区切って複数の影をつけられます。

.shadow05{
     text-shadow:0 -1px 1px #000,0 1px 1px #fff;
     font-size:2em;
     color:#666;
     background-color:#eee;
     padding:#eee;
}

<p class="shadow05">テキストシャドウ</p>

テキストシャドウ

透明度

opacity　オパシティ

ボックス内のものすべての透明度をコントロールします。

.alpha01{
     width:300px;
     background-color:#ccc;
     opacity:0.5;
}

<p class="alpha01">
opacity
<img src="photo.jpg" alt="" />
</p>

opacity
テキストも画像も透明度が50%になりました。

rgba　RGBA

colorやbackground-colorプロパティで使用できます。

.alpha02{
     width:300px;
     height:100px;
     background-color:rgba(255,0,0,0.5);
     padding:10px;
}

<p class="alpha02">rgba</p>

rgba
テキストの透明度は変わらず背景だけが透明度50%になりました。

グラデーション

linear-gradient　水平垂直グラデーション

水平や垂直方向のまっすぐなグラデーションです。

.gra01{
     width:300px;
     height:100px;
     background: #87e0fd; /* Old browsers */
     background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%); /* FF3.6+ */
     background: -webkit-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* IE10+ */
     background: linear-gradient(to bottom, #87e0fd 0%,#05abe0 100%); /* W3C */
}

<p class="gra01">linear-gradient</p>

linear-gradient

３色４色のグラデーションにするには、カンマで区切って色と％を指定します。

radial-gradient　放射状グラデーション

放射状に広がる円形グラデーションです。

.gra02{
     width:300px;
     height:100px;
     background: #87e0fd; /* Old browsers */
     background: -moz-radial-gradient(center, ellipse cover, #87e0fd 0%, #05abe0 100%); /* FF3.6+ */
     background: -webkit-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
     background: -o-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* Opera 12+ */
     background: -ms-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* IE10+ */
     background: radial-gradient(ellipse at center, #87e0fd 0%,#05abe0 100%); /* W3C */
}

<p class="gra01">radial-gradient</p>

radial-gradient

カッコの中に左から、グラデーションの中心位置・形状・大きさ・開始色位置・終了色位置になります。
形状はcircle（正円）かellipse（楕円）を選択します。
大きさはcontain（全体がおさまるサイズ）やcover（全体をおさめる大きさ）など指定できます。

グラデーションは難しいので個人的にはジェネレーターを使って作ってしまいます。
http://www.colorzilla.com/gradient-editor/

角丸

border-radius　角丸

ボックスの角を丸くできます。

.radius01{
     width:200px;
     height:100px;
     padding:10px;
     background-color:#ccc;
     border-radius:5px 0px 30px 15px;
}

<p class="alpha01">border-radius</p>

border-radius
ボックスの角が丸くなりました。

値は順番に、左上・右上・右下・左下と時計回りに指定します。

.radius02{
     width:200px;
     height:200px;
     background-color:#ccc;
     text-align:center;
     line-height:200px;
     border-radius:50%;
}

<p class="alpha01">正円</p>

正円

長くなりましたので続きはまたあとでアップします。