省エネ

Flutter、vue3修行中。

【CSS】ポートフォリオサイトを作りました

こんにちは。
ポートフォリオサイトを作ってみました。

QKURONEKOP.COM フリーランス エンジニア ポートフォリオ

全画面に表示している画像はこちらのサイトで配布されていたものを使用しました。

www.pakutaso.com

全画面表示するには、

html,body,div {
  width: 100%;
  height: 100%;
}

みたいに、一番外側から100%にしていく。

  <div>
     <img src="imag.jpg">
  </div>

これで、全画面表示できるが、画像はブラウザのサイズに合わせて伸び縮みしちゃう。
それだと、比率が変わってかっこ悪いので、こうする。

  img {
     object-fit: cover;
  }

こうすると比率を維持した状態で親に合わせて画像をトリミングしてくれます。

使用前 使用後
f:id:qkuroneko:20180207122601p:plain f:id:qkuroneko:20180207122550p:plain

画像の上には半透明のグラデーションを乗せています。

f:id:qkuroneko:20180207123024p:plain:w300

グラデーションのやり方はこう。

 div {
      background: linear-gradient(-135deg, #F57F17, #FFFDE7);
      opacity: 0.4;
   }

linear-gradientで直線方向にグラデーションをつけてます。
一番最初の数値は傾きです。
opacitydiv全体を半透明にしています。

フォントにはGoogleのWebFontを使用しています。

fonts.google.com

この画面に白い文字やボーダーを乗せたところ、ぼんやりしていたので、 文字とボーダーに影をつけました。

影の付け方はこちら。

ボーダー

  box-shadow: 0 2px 5px #BDBDBD;

文字

  text-shadow: 1px 1px 5px #BDBDBD;

どちらも、水平方向 垂直方向 ぼかし 色 の順です。

リンクをクリックした時のに真ん中に白い画面を出すところはjQueryを使っているのですが、 onClickもcssでできるようになるといいですね。

:activeを使う方法もあるみたいですが、隣接した要素じゃないとうまくいかないのかな? 色々試してみたのですが、うまく行きませんでした。

やり方がわかったら直すかもです。