ドットインストールでCSS3を学ぼう#13〜#15
CSSを学んでブログもかっこよくしたい！
今日も、ドットインストールさんでCSS3を学んでいきましょう。
#13 radial-gradient()を使ってみよう
前回、#12では線形のグラデーションについて学びました。
今回は、グラデーションを円形にする方法です。
前回と同じく、htmlのbodyにはdivのみがあります。
<body>
<div></div>
</body>
前回のcssはこのとおり。
div{
width: 200px;
height: 200px;
background-image:
liner-gradient( skyblue, blue)
}
今回は、円形のグラデーションなので、
liner-gradientの部分がradial-gradientになります。
div{
width: 200px;
height: 200px;
background-image:
radial-gradient( skyblue, blue)
}
すると、このような形のグラデーションになります。
グラデーションが円形になっていますね。
グラデーションの起点の位置を変える場合
この形だと、グラデーションの起点は中心にきていますが、
位置をずらしてみましょう。
div{
width: 200px;
height: 200px;
background-image:
radial-gradient( at 30px 40px, skyblue, blue)
}
かっこの中に、at 30px 40px, と書くと
グラデーションの始まる場所が左から30px、上から40pxの場所になります。
こんな感じになります。
単位はpxのほかに、%も使えます。使い勝手がよさそうですよね。
グラデーションのサイズを指定する場合
グラデーションのサイズそのものを指定したいときには、次のように記述します。
div{
width: 200px;
height: 200px;
background-image:
radial-gradient( ellipse 20px 30px at 30px 40px, skyblue, blue)
}
先ほどのatの前に、数値を書き入れます。
この場合は横が20px、縦が30pxの範囲でグラデーションになります。
この場合は楕円になるので、「ellipse」と記入していますが、特になくても構わないもののようです。覚えておくに越したことはないのかな。
このようになりました。
とても小さなグラデーションですね。
正円のグラデーションのサイズを指定する場合
先ほどは楕円でしたが、正円の場合にはこのように記述します。
div{
width: 200px;
height: 200px;
background-image:
radial-gradient( circle 20px at 30px 40px, skyblue, blue)
}
正円の場合は、当然ですがサイズの指定はひとつだけでOKです。
先ほどと同じように「circle」を書いていますが、特になくてもいいそうです。
また、サイズは20pxになっていますが、
正円に限っては単位「%」が使えないのでご注意ください。
正円になりました。
遠い辺に向かってグラデーションを伸ばす場合
今回は、サイズ指定ではなく、グラデーションがはじまる地点から
遠い辺に向かってグラデーションを伸ばしたいときの指定です。
div{
width: 200px;
height: 200px;
background-image:
radial-gradient( farthest-side at 30px 40px, skyblue, blue)
}
「farthest-side」をすると、グラデーションの起点から一番遠い辺
（この場合は右辺）に向かってグラデーションを伸ばしてくれます。
こんな感じ。
ちょっとわかりにくいですが、さきほど行った、起点を指定しただけのものはこんな感じでした。
うーん、上のほうが青の部分が多いなあ、ということしかわかりませんが＾＾；
きっと画像大きくなると意味を持つようになるのでしょう。
ちなみに、「最も遠い辺」だけではなく「最も遠い点」への指定もできるそうです。
そこは自分でしらべてくださいということでした＾皿＾
グラデーションを繰り返すとき
線形のときと同じように、円形の場合にもグラデーションを繰り返すことができます。
div{
width: 200px;
height: 200px;
background-image:
repeating-radial-gradient( skyblue, blue 20px)
}
20pxの幅で繰り返します。
今回は中心から始まります。
繰り返しになりました！
軽く酔います（笑）
グラデーションを使いこなせるようになったらかっこいいですね。
#14 box-shadow、text-shadowを使おう
こんかいは、ボックスとテキストに影をつけてみます。
今回は文字とボックスが用意されています。
<body>
<h1>Shadow</h1>
<div></div>
</body>
cssは次のようになっています。
body{ background: #eee; }
div{
width: 200px;
height: 100px;
background: #fff;
}
このような感じですね。
背景が薄いグレー、
divは横が200px、高さが100px、色は白になっています。
ボックスに影をつける
まずはボックスに影をつけてみましょう。
div{
width: 200px;
height: 100px;
background: #fff;
box-shadow: 10px 20px rgba(0,0,0,.4);
}
ボックスに、横10px縦20px、色はちょっと透明度のある黒の影ができます。
このようになります。
ボックスの影をぼかす
ボックスの影をぼかすこともできます。
その時には、3つ目の数値を入れます。ぼかす幅を指定してみましょう。
div{
width: 200px;
height: 100px;
background: #fff;
box-shadow: 10px 20px 4px rgba(0,0,0,.4);
}
3つ目の数値は、ぼかす幅です。
はい、ぼけました。うーん、これいいですね。
ちなみに、こちらの記事の最後のほうに、
画像に影をつける方法も書いています。
当時は全くわかっていませんでしたが（わかっていないのに書くなよ）
今になったら意味がわかります。
これ、CSS3だったんですね。
意味がわかると楽しい！
ボックスの影を大きくしたり小さくしたりする
4つ目の数値を入れることで、影の大きさを大きくしたり小さくしたりすることができます。
div{
width: 200px;
height: 100px;
background: #fff;
box-shadow: 10px 20px 4px 10px rgba(0,0,0,.4);
}
このようにすると、影が10pxぶん大きくなります。
マイナスを指定すると、逆に小さくなります。
大きくなりました！
これは、あとから修正したいときに便利な方法なのかな…？
ボックスの影を内側につける
ここまでは、ボックスの外に影をつけていましたが
ボックスの中に影をつけたい場合もあります。
その場合は「inset」と書き加えます。
div{
width: 200px;
height: 100px;
background: #fff;
box-shadow: 10px 20px 4px 10px rgba(0,0,0,.4) inset;
}
すると、このようになります。
影が内側につきました。
ボックスの影を二つつける場合
影を複数つけたい場合には、並べて書けばokです。
div{
width: 200px;
height: 100px;
background: #fff;
box-shadow: 10px 20px 4px 10px rgba(0,0,0,.4) inset,
10px 20px 4px 10px skyblue;
}
コンマで区切って新しく書くと、
新しくスカイブルーの影がつきました。
テキストに影をつける
テキストに影をつける場合も基本的には同じです。
h1{
text-shadow: 2px 2px 0 rgba(0,0,0,.4)
}
このようにすると、
テキストにも影がつきました！
このブログでも、さんざん画像に影をつけることをお世話になっているので
ちゃんと覚えたいなと思いました。
#15 transformで要素を変形させてみよう
要素を変形させるために使うのが、「transform」です。
今回は、見やすくするためにボックスが2個用意されています。
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
2つのdivにはこのような指定がされています。
div{
width: 100px;
height: 100px;
margin-bottom: 20px;
position: absolute;
top: 100px;
left: 100px;
}
positionプロパティに関しては、CSS入門編の#20で学習しました。
さらに、２つのボックスに対してこのように色をつけています。
#box1{
background: skyblue;
opacity: .5;
}
#box2{
background: orange;
opacity: .5;
}
opacityについては、CSS3の#04で学習しました。透明度ですね。
水色とオレンジのボックスが1つずつ用意されています。
透明度も高いので、重なっても見やすいですね。
それでは、どのようになっているか見てみましょう。
一瞬「なんぞ？」と思いましたが、
よく考えたら水色の上にオレンジが乗っているのでした。
透明度が高いから、混ざっているのですね。微妙な色です。
ボックスの位置を動かす
それでは、オレンジのほうのボックスの位置を動かしてみましょう。
比較のために、スカイブルーの方のボックスは固定したまま進みます。
#box2{
background: orange;
opacity: .5;
transform: translate(20px,40px);
}
位置をずらす指定は、x方向、y方向の順に指定することができます。
今回はx方向に20px、y方向に40px移動します。
はい、オレンジのボックスが指定通り移動しました。
x方向にだけ動かしたいときには、translatex、translateyを使います。
#box2{
background: orange;
opacity: .5;
transform: translatex(20px);
}
このようにすると、x方向にだけ動きます。
座標で指示するのはわかりやすくて面白いですね。
ボックスの形を変える
ボックスの形の倍率を変える時には、scaleを使います。
#box2{
background: orange;
opacity: .5;
transform: scale(0.5, 1.5);
}
このようにすると、x方向に0.5倍、y方向に1.5倍になります。
オレンジのボックスの形がこんなことになりました。
ボックスに傾斜をかける
角度を指定するのには、skewを使います。
#box2{
background: orange;
opacity: .5;
transform: skew(10deg, 20deg);
}
x方向に10度、y方向に20度ということになります。
見事に傾斜がつきました。
（何か不安定な気持ちになるのはなぜだろう…）
ちなみに、translateと同じように、x方向だけかけたい時にはskewx、y方向だけかけたいときには skewyを使います。
ボックスを回転する
回転をさせるときにはrotateを使います。
#box2{
background: orange;
opacity: .5;
transform: rotate(30deg);
}
このようにすると、時計回りに30度回転します。
ふむ、わかりやすい。
移動、拡大縮小、回転などの起点を変える
上の回転の例で考えると、起点はボックスの中心になっていますね。
デフォルト状態だと中心が起点になります。
この、起点の場所を変えてみましょう。
起点の場所を指定するのには、transform-originを使います。
#box2{
background: orange;
opacity: .5;
transform: rotate(30deg);
transform-origin: 50% 50%;
}
デフォルト状態だと、中心なのでこのようになっています。
ここを変えてみましょう。
50% 50%のところを、
例えば左上にするときには
top left
もしくは
0 0
と、記述します。
#box2{
background: orange;
opacity: .5;
transform: rotate(30deg);
transform-origin: 0 0;
}
このようにすると、
ボックスの左上を起点にして回転していることがわかります。
難しいなあと感じますが、お役立ち情報ですね！
何度か復習して思い出そうと思います。
