Reactでlinear-gradientをやってみた

www.youtube.com

linear-gradientについて紹介されていた。やっすんのサイトでも使われているみたいなので真似てみた。ちなみにソースとか公開してくれないので自分で調べるしかなかった

テキストにlinear-gradientをつけるのは簡単だった。単純につけるだけだった。

    display: block;
    font-size: 48px;
    text-align: center;
    background-image: linear-gradient(270.97deg,#ffe580 -21.36%,#ff7571 -2.45%,#ea5dad 26.84%,#c2a0fd 64.15%,#3bf0e4 108.29%,#b2f4b6 159.03%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

ブロックが難しかった。

<a href="https://masalib.hatenablog.com/" target="_blank" rel="noopener noreferrer" class="ProductCategories-abox-6">
    <img src="https://firebasestorage.googleapis.com/v0/b/learn-firebase-masalib.appspot.com/o/images%2Fsite%2Fs-DSC00325.jpg?alt=media" 
        class="ProductCategories-aboxImage-7"
         alt="箱入り娘、にゃー">
    <div class="ProductCategories-aboxDiv-8">
        <div class="ProductCategories-aboxDivText-9">箱入り娘、にゃーちゃん（キリキリ！！）</div>
    </div>
</a>

.ProductCategories-abox-6 {
    width: 324px;
    height: 240px;
    margin: 10px;
    display: flex;
    padding: 2px 0 0;
    position: relative;
    background: linear-gradient(269.16deg,#ffe580 -15.83%,#ff7571 -4.97%,#ff7270 15.69%,#ea5dad 32.43%,#c2a0fd 50.09%,#9867f0 67.47%,#3bf0e4 84.13%,#33ce43 105.13%,#b2f4b6 123.24%);
    box-shadow: 0 0 3px 1px rgba(0,0,0,.2);
    align-items: center;
    border-radius: 5px;
    -ms-flex-align: center;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-direction: column;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
}
.ProductCategories-aboxImage-7 {
    width: 320px;
    height: 180px;
    border-radius: 10px 10px 0 0;
}

.ProductCategories-aboxDiv-8 {
    width: 320px;
    height: 56px;
    padding: 4px8px12px;
    background: #000;
    box-sizing: border-box;
    border-radius: 0010px10px;
}
.ProductCategories-aboxDivText-9 {
    color: #ffffff;
    display: -webkit-box;
    overflow: hidden;
    margin-left: 10px;
    text-decoration: underline;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-decoration-color: #fff;
    -webkit-text-decoration: underline;
    -webkit-text-decoration-color: #fff;
}

ProductCategories-abox-6のafterでlinear-gradientを設定してみたが認識せず・・・よくわからなかった。

そもそもlinear-gradientの説明が少なかったので調べてみると結構前からある技術なのね saruwakakun.com

ジェネレーターがあるというTwitterがあったが実際にはなかった

とっても便利なグラデーションCSSジェネレーター見つけた。
色、角度、形、大きさを変えられるのはもちろん、複数のグラデーションを重ねることもできる

Shapy | Gradient Generatorhttps://t.co/jY22TUNq9F pic.twitter.com/LT6L5eXfcr
— catnose (@catnose99) 2018年12月14日