個人のホームページにいのちの輝きを実装した

why

みなさんのいのちは輝いていますか？

大阪万博ではいのちは輝いています

www3.nhk.or.jp

https://kaede0902.github.io/profile/

f:id:kei_s_lifehack:20200828024929p:plain

私も流行りに乗って自分のサイトにいのちの輝きを一人実装しました！

この記事を参考にして css で実装しました。

qiita.com

import React from 'react'
import '../css/Inochi.css'

const divStyle = {
  width: '1000px',
  height: '300px',
}

export default function Inochi() {
  return (
    <>
    <div class="inochi" 
      style={divStyle}>ｺﾛｼﾃ</div>
    </>
  )
}

Inochi コンポーネントを作って Inochi.css を適用する

.inochi {
  background: radial-gradient(
    circle at 10.0% 10.0%,
    red 10%,
    transparent 0%
  );
}

x 10%, y 10%,
red で半径10%

f:id:kei_s_lifehack:20200828023108p:plain

元からmargin 当ててるのでずれてるけど、

10% 10% のところにまるができてる！！css だけで作れるんだ！！

.inochi {
  background: 
    radial-gradient(
      circle at 10.0% 10.0%,
      dodgerblue 2.3%,
      transparent 0%
    ),
    radial-gradient(
      circle at 11.3% 16.8%,
      white 5%,
      transparent 0%
    ),
    radial-gradient(
      circle at 10.3% 16.5%,
      red 13%,
      transparent 0%
    );
}

これを上から順番に青、白、黒で調整して書いた。

まずひとりめ

f:id:kei_s_lifehack:20200828024929p:plain

仲間をたくさん増やして行こうね♡

まとめ

css で

.inochi {
  background: 
    radial-gradient(
      circle at 10.0% 10.0%,
      dodgerblue 2.3%,
      transparent 0%
    ),
    radial-gradient(
      circle at 11.3% 16.8%,
      white 5%,
      transparent 0%
    );