生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストールでCSS3を学ぼう#13〜#15

CSSを学んでブログもかっこよくしたい!

今日も、ドットインストールさんでCSS3を学んでいきましょう。

f:id:ponnkichi:20180228223547p:plain

 

 

 #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)

}

すると、このような形のグラデーションになります。

 

f:id:ponnkichi:20180228212121p:plain

グラデーションが円形になっていますね。

グラデーションの起点の位置を変える場合

この形だと、グラデーションの起点は中心にきていますが、

位置をずらしてみましょう。

div{

width: 200px;

height: 200px;

background-image:

radial-gradient(  at 30px 40px, skyblue, blue)

かっこの中に、at 30px 40px, と書くと

グラデーションの始まる場所が左から30px、上から40pxの場所になります。

f:id:ponnkichi:20180228212358p:plain

こんな感じになります。

単位はpxのほかに、%も使えます。使い勝手がよさそうですよね。

グラデーションのサイズを指定する場合

グラデーションのサイズそのものを指定したいときには、次のように記述します。

div{

width: 200px;

height: 200px;

background-image:

radial-gradient(  ellipse 20px 30px at 30px 40px, skyblue, blue)

 先ほどのatの前に、数値を書き入れます。

この場合は横が20px、縦が30pxの範囲でグラデーションになります。

この場合は楕円になるので、「ellipse」と記入していますが、特になくても構わないもののようです。覚えておくに越したことはないのかな。

f:id:ponnkichi:20180228212729p:plain

このようになりました。

とても小さなグラデーションですね。

正円のグラデーションのサイズを指定する場合

先ほどは楕円でしたが、正円の場合にはこのように記述します。

 

div{

width: 200px;

height: 200px;

background-image:

radial-gradient(  circle 20px  at 30px 40px, skyblue, blue)

 正円の場合は、当然ですがサイズの指定はひとつだけでOKです。

先ほどと同じように「circle」を書いていますが、特になくてもいいそうです。

また、サイズは20pxになっていますが、

正円に限っては単位「%」が使えないのでご注意ください。

f:id:ponnkichi:20180228212954p:plain

正円になりました。

遠い辺に向かってグラデーションを伸ばす場合

今回は、サイズ指定ではなく、グラデーションがはじまる地点から

遠い辺に向かってグラデーションを伸ばしたいときの指定です。

div{

width: 200px;

height: 200px;

background-image:

radial-gradient(  farthest-side  at 30px 40px, skyblue, blue)

 

 「farthest-side」をすると、グラデーションの起点から一番遠い辺

(この場合は右辺)に向かってグラデーションを伸ばしてくれます。

f:id:ponnkichi:20180228213322p:plain

こんな感じ。

ちょっとわかりにくいですが、さきほど行った、起点を指定しただけのものはこんな感じでした。

f:id:ponnkichi:20180228212358p:plain

うーん、上のほうが青の部分が多いなあ、ということしかわかりませんが^^;

きっと画像大きくなると意味を持つようになるのでしょう。

ちなみに、「最も遠い辺」だけではなく「最も遠い点」への指定もできるそうです。

そこは自分でしらべてくださいということでした^皿^

グラデーションを繰り返すとき

線形のときと同じように、円形の場合にもグラデーションを繰り返すことができます。

div{

width: 200px;

height: 200px;

background-image:

repeating-radial-gradient( skyblue, blue 20px)

 

20pxの幅で繰り返します。

今回は中心から始まります。

 

f:id:ponnkichi:20180228213728p:plain

繰り返しになりました!

軽く酔います(笑)

グラデーションを使いこなせるようになったらかっこいいですね。

#14 box-shadow、text-shadowを使おう

こんかいは、ボックスとテキストに影をつけてみます。

今回は文字とボックスが用意されています。

<body>

   <h1>Shadow</h1>

   <div></div>

</body> 

 cssは次のようになっています。

body{ background: #eee; }

 

div{

width: 200px;

height: 100px;

background: #fff;

}

このような感じですね。

f:id:ponnkichi:20180228214555p:plain

背景が薄いグレー、

divは横が200px、高さが100px、色は白になっています。

ボックスに影をつける

まずはボックスに影をつけてみましょう。

 

 

div{

width: 200px;

height: 100px;

background: #fff;

box-shadow: 10px 20px rgba(0,0,0,.4);

}

 ボックスに、横10px縦20px、色はちょっと透明度のある黒の影ができます。

f:id:ponnkichi:20180228214900p:plain

このようになります。

ボックスの影をぼかす

ボックスの影をぼかすこともできます。

その時には、3つ目の数値を入れます。ぼかす幅を指定してみましょう。

 

div{

width: 200px;

height: 100px;

background: #fff;

box-shadow: 10px 20px 4px rgba(0,0,0,.4);

}

 

3つ目の数値は、ぼかす幅です。

f:id:ponnkichi:20180228215056p:plain

はい、ぼけました。うーん、これいいですね。

 

ちなみに、こちらの記事の最後のほうに、

画像に影をつける方法も書いています。

ponnkichi.hatenablog.com

当時は全くわかっていませんでしたが(わかっていないのに書くなよ)

今になったら意味がわかります。

これ、CSS3だったんですね。

意味がわかると楽しい!

ボックスの影を大きくしたり小さくしたりする

4つ目の数値を入れることで、影の大きさを大きくしたり小さくしたりすることができます。

div{

width: 200px;

height: 100px;

background: #fff;

box-shadow: 10px 20px 4px 10px rgba(0,0,0,.4);

}

 このようにすると、影が10pxぶん大きくなります。

マイナスを指定すると、逆に小さくなります。

f:id:ponnkichi:20180228215518p:plain

大きくなりました!

これは、あとから修正したいときに便利な方法なのかな…?

ボックスの影を内側につける

ここまでは、ボックスの外に影をつけていましたが

ボックスの中に影をつけたい場合もあります。

その場合は「inset」と書き加えます。

div{

width: 200px;

height: 100px;

background: #fff;

box-shadow: 10px 20px 4px 10px rgba(0,0,0,.4) inset;

}

すると、このようになります。

f:id:ponnkichi:20180228215711p:plain

影が内側につきました。

ボックスの影を二つつける場合

影を複数つけたい場合には、並べて書けば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;

}

 コンマで区切って新しく書くと、

f:id:ponnkichi:20180228215921p:plain

新しくスカイブルーの影がつきました。

テキストに影をつける 

テキストに影をつける場合も基本的には同じです。

h1{

text-shadow: 2px 2px 0 rgba(0,0,0,.4)

}

 このようにすると、

f:id:ponnkichi:20180228220133p:plain

テキストにも影がつきました!

 

このブログでも、さんざん画像に影をつけることをお世話になっているので

ちゃんと覚えたいなと思いました。

#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で学習しました。

さらに、2つのボックスに対してこのように色をつけています。

#box1{

background: skyblue;

opacity: .5;

}

#box2{

background: orange;

opacity: .5;

}

opacityについては、CSS3の#04で学習しました。透明度ですね。 

水色とオレンジのボックスが1つずつ用意されています。

透明度も高いので、重なっても見やすいですね。

それでは、どのようになっているか見てみましょう。

f:id:ponnkichi:20180228221518p:plain

一瞬「なんぞ?」と思いましたが、

よく考えたら水色の上にオレンジが乗っているのでした。

透明度が高いから、混ざっているのですね。微妙な色です。

ボックスの位置を動かす

それでは、オレンジのほうのボックスの位置を動かしてみましょう。

比較のために、スカイブルーの方のボックスは固定したまま進みます。

#box2{

background: orange;

opacity: .5;

transform: translate(20px,40px);

}

位置をずらす指定は、x方向、y方向の順に指定することができます。

今回はx方向に20px、y方向に40px移動します。

f:id:ponnkichi:20180228221822p:plain

はい、オレンジのボックスが指定通り移動しました。

 

x方向にだけ動かしたいときには、translatex、translateyを使います。

#box2{

background: orange;

opacity: .5;

transform: translatex(20px);

}

 このようにすると、x方向にだけ動きます。

f:id:ponnkichi:20180228222021p:plain

座標で指示するのはわかりやすくて面白いですね。

ボックスの形を変える

ボックスの形の倍率を変える時には、scaleを使います。

#box2{

background: orange;

opacity: .5;

transform: scale(0.5, 1.5);

}

このようにすると、x方向に0.5倍、y方向に1.5倍になります。 

f:id:ponnkichi:20180228222303p:plain

オレンジのボックスの形がこんなことになりました。

ボックスに傾斜をかける

角度を指定するのには、skewを使います。

#box2{

background: orange;

opacity: .5;

transform: skew(10deg,  20deg);

}

x方向に10度、y方向に20度ということになります。

f:id:ponnkichi:20180228222600p:plain

見事に傾斜がつきました。

(何か不安定な気持ちになるのはなぜだろう…)

 

ちなみに、translateと同じように、x方向だけかけたい時にはskewx、y方向だけかけたいときには skewyを使います。

ボックスを回転する

回転をさせるときにはrotateを使います。

#box2{

background: orange;

opacity: .5;

transform: rotate(30deg);

}

 

このようにすると、時計回りに30度回転します。

f:id:ponnkichi:20180228222805p:plain

ふむ、わかりやすい。

移動、拡大縮小、回転などの起点を変える

上の回転の例で考えると、起点はボックスの中心になっていますね。

デフォルト状態だと中心が起点になります。

この、起点の場所を変えてみましょう。

起点の場所を指定するのには、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;

}

 

このようにすると、

f:id:ponnkichi:20180228223256p:plain

ボックスの左上を起点にして回転していることがわかります。

 

難しいなあと感じますが、お役立ち情報ですね!

何度か復習して思い出そうと思います。