コード書き初め、そろそろネタが尽きてきたよ「始め」！？
2022.01.03
コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。
動作はこちらから確認くださいませ。
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>タグ
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
単純なコードで背景色にグラデーションつける。
このコード自体は単純なコードです、ですが・・・。
気に食わないので何度も初期の色コードを設定を変えてみたのですが
鮮やかさがでません。ちょっとドス黒いグラデーションのまま。
コードを貼り付けておきます。
一時間ぐらい色を変えて遊んでました:D
See the Pen 単純なコードで背景色にグラデーション。 by taoka (@taoka-toshiaki) on CodePen.0
タグ
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.05.02
日々淡々と生きてます。
この画像を作っている時に、小学生の時に切り絵をした事がふと蘇りました。
自分、小学生や中学生の時に何をしていたのかという記憶はほぼなし、出来事の記憶がちらほら有るぐらいで
あまり覚えていませんね。ちなみにこの画像は背景はグラデーションを使用し波のフリー画像を持ってきて加工をおこなってこんな感じに仕上げました。じぶんの画像は大体は苦労せずにお手軽に作成することが出来ると思います、制作にかける時間は大体、5分です。
凝ったものになると20分ぐらいの時もありますが、シンプルなものは大体、それぐらいです、飽きもせずこういうの
自前で作っていますが、こういうの好きですから続きます。
継続は力なりとは言いますが、アレは半分ウソだと思います。確かにある一定度は伸びますが、技は本を読んだり
誰かに教えてもらわないと身につかないと思います。自分は未だにイラレの参考書をちら見した程度です、本当は
ロゴとかそういうのが自分で作れたら良いなと思っています。
タグ
20, 5, アレ, イラレ, ウソ, グラデーション, こと, じぶん, シンプル, それ, フリー, もの, ロゴ, 一定, 中学生, 事, 何, 作成, 使用, 出来事, 切り絵, 制作, 力, 加工, 半分, 参考書, 大体, 小学生, 感じ, 技, 日々, 時, 時間, 未だ, 本, 本当, 波, 画像, 程度, 継続, 背景, 自分, 自前, 苦労, 記憶, 誰か, 身,