2014/05/03
昨日はお疲れ様でした。
私自身も非常に勉強になりました。
勉強会中ではソースコードやプレビューなどお見せできませんでしたので、以下でフォローしておきます。
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
さらに４つ目の数値を入れることができます。
これは広がる幅の指定になります。
.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>
正円
長くなりましたので続きはまたあとでアップします。
