昨日はお疲れ様でした。
私自身も非常に勉強になりました。
勉強会中ではソースコードやプレビューなどお見せできませんでしたので、以下でフォローしておきます。
webフォント
- グーグルフォントにアクセスします。
- 使用したいフォントが決まったら、Quick-useのボタンをクリック。
- 3番のフォントを読み込む設定を選びます。
- 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
さらに4つ目の数値を入れることができます。
これは広がる幅の指定になります。
.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
3色4色のグラデーションにするには、カンマで区切って色と%を指定します。
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>
正円
長くなりましたので続きはまたあとでアップします。