グラデーション | On the ghost Internet

コード書き初め、そろそろネタが尽きてきたよ「始め」！？

2022.01.03

コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。

Rewind 2021 – Love of the Code

動作はこちらから確認くださいませ。

https://zip358.com/tool/demo51/

尚、このコードは２０２１年の１２月２８日に書いたものになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Happy New Year 2022</title>
<style>
    body{
        background-color: black;
    }
    #HNY{
        font-weight: bold;
        font-size: 222px;
    }
</style>
</head>
<body>
    <h1 id='HNY'>Happy New Year 2022</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
    let color1 =["40","E0","D0"];
    let color2 =["FF","8C","00"];
    let color3 =["FF","00","80"];
    let postion =[2,0,1];
    setInterval(() => {
        if((parseInt(color1[postion[0]],16) + 1)<255){
            color1[postion[0]] = (parseInt(color1[postion[0]],16) + 1).toString(16);
        }else{
            color1[postion[0]] = (100).toString(16);
            postion[0]--;
        }
        if((parseInt(color2[postion[1]],16) + 1)<255){
            color2[postion[1]] = (parseInt(color2[postion[1]],16) + 1).toString(16);
        }else{
            color2[postion[1]] = (50).toString(16);
            postion[1]--;
        }
        if((parseInt(color3[postion[2]],16) + 1)<255){
            color3[postion[2]] = (parseInt(color3[postion[2]],16) + 1).toString(16);
        }else{
            color3[postion[2]] = (80).toString(16);
            postion[2]--;
        }
        
        for(key in postion){
            if(postion[key]<=-1){
                postion[key] = 2;
            }
        }
        //console.log(`#${color1.join("")}, #${color2.join("")}, #${color3.join("")}`);
        document.getElementById('HNY').style = `
        color: #FF8C00;
  background: -webkit-linear-gradient(0deg, #${color1.join("")}, #${color2.join("")}, #${color3.join("")});
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
        `;    
    }, 70);
</script>
</body>
</html>

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

投稿日時 2022年01月03 06:00日

タグ

12, 2021, 28, 8, cGLonkCQ, charset, Chrome, com, D-, DOCTYPE, Firefox, gt, head, html, https, IE, ja, lang, lt, meta, name, quot, UTF-, viewport, watch, www, youtube, いろいろ, エッジ, グラデーション, コード, こちら, これ, ソース, ネタ, もの, 事, 何, 写, 動作, 変更, 文字, 景, 書き初め, 最新, 確認,

単純なコードで背景色にグラデーション。

2019.06.15

Logging

単純なコードで背景色にグラデーションつける。
このコード自体は単純なコードです、ですが・・・。
気に食わないので何度も初期の色コードを設定を変えてみたのですが
鮮やかさがでません。ちょっとドス黒いグラデーションのまま。
コードを貼り付けておきます。
一時間ぐらい色を変えて遊んでました:D

See the Pen 単純なコードで背景色にグラデーション。 by taoka (@taoka-toshiaki) on CodePen.

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

投稿日時 2019年06月15 07:00日

タグ

0, 265, BY, codepen, default, embed, gt, hash, Height, href, ID, io, JQGLoO, JS, lt, Pen, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, グラデーション, コード, ドス, まま, 一, 何度, 初期, 単純, 背景色, 自体, 色, 設定,

イラストレーターの新機能使ってみた。

2018.10.26

Logging

イラストレーターのグラデーションに新たに新機能が追加されてみたので
使ってみました。これは凄く良い感じです。
かなり便利なんじゃないかなと思いますし、出来ることの幅が広がる。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

投稿日時 2018年10月26 04:43日

タグ

イラストレーター, かなり, グラデーション, 幅, 新機能, 良い感じ,

日々淡々と生きてます。
この画像を作っている時に、小学生の時に切り絵をした事がふと蘇りました。
自分、小学生や中学生の時に何をしていたのかという記憶はほぼなし、出来事の記憶がちらほら有るぐらいで
あまり覚えていませんね。ちなみにこの画像は背景はグラデーションを使用し波のフリー画像を持ってきて加工をおこなってこんな感じに仕上げました。じぶんの画像は大体は苦労せずにお手軽に作成することが出来ると思います、制作にかける時間は大体、5分です。
凝ったものになると20分ぐらいの時もありますが、シンプルなものは大体、それぐらいです、飽きもせずこういうの
自前で作っていますが、こういうの好きですから続きます。
継続は力なりとは言いますが、アレは半分ウソだと思います。確かにある一定度は伸びますが、技は本を読んだり
誰かに教えてもらわないと身につかないと思います。自分は未だにイラレの参考書をちら見した程度です、本当は
ロゴとかそういうのが自分で作れたら良いなと思っています。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

投稿日時 2018年05月02 03:54日

タグ

20, 5, アレ, イラレ, ウソ, グラデーション, こと, じぶん, シンプル, それ, フリー, もの, ロゴ, 一定, 中学生, 事, 何, 作成, 使用, 出来事, 切り絵, 制作, 力, 加工, 半分, 参考書, 大体, 小学生, 感じ, 技, 日々, 時, 時間, 未だ, 本, 本当, 波, 画像, 程度, 継続, 背景, 自分, 自前, 苦労, 記憶, 誰か, 身,

@Blog

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

コード書き初め、そろそろネタが尽きてきたよ「始め」！？

単純なコードで背景色にグラデーション。

イラストレーターの新機能使ってみた。

日々淡々と