…されていないものの「きんきらきんのきーん」シリーズというものがあります。 CSSで「黄金の輝き」をイメージしたグラデーションを目指したもので、 little-strange.hatenablog.com 枠だったり文字だったり、を白・黄色・茶色・黒などの色のグラデーションで表現しようという試みです。 今回、conic-gradientを色々いじっているとたまたま出来上がったので、久しぶりの「きんきらきんのきーん」最新作を公開しますｗ クセが強すぎる黄金背景 コード コード中、…

…degごとに繰り返すきんきらきんのきーんなconicグラデーション*/ background-size:6000px 4000px;/*幅6000px 高さ4000px という、バカでかい仮想の画像サイズ*/ animation:cncglda 10s linear infinite alternate;/*cncgldaというキーフレームを10秒かけてlinear再生。繰り返し回数inginite（無限）、一回再生後はalternate（逆再生）*/ } conic-gra…

…として使用していた「きんきらきんのきーん」ですが、背景がグレーの枠に入れた状態でお披露目していました。 それには理由があって、「グラデーションに白を使っているため、そのまま白背景の記事に配置するとどうにもしまらない」からでした。 かといって、text-shadowで影をつける、という方法はグラデーション文字に関しては使用できず、背景色つきの枠で出していたんですね。 ですが今回、「グラデーション文字に影をつける」方法を見つけました！ きんきらきんのきーん filter:drop…

…字のアニメーション きんきらきんのきーん コード <style><!--@keyframes goldanm{0%{background-position:0px 0px;}100%{background-position:2000px 0px;}}.golda{font-size: 50px; font-weight: bold; color: gold;background-image:linear-gradient(90deg, brown,yellow,white,y…

…ablog.com きんきらきんのきーん♪ これを、角丸のフチに使用し、ridgeで盛り上がっているようにしたかったのです。 ところが、CSSは「border-image」を使用するとまず角丸の「border-radius」が無効になり、「ridge」も利かなくなる、との事^^; ググってみると、強引に角丸として表示する方法までは出てきましたが、ridge効果はやっぱり乗らないそうで。 それでも、黒に金のフチや金文字はそれなりに映えるかな？と思い、ネタにしてみました。 ってな…

… あと、 ここに、 きんきらきんのきーん♪第一号 がありましたｗｗｗ 2020年6月 ６月最初の記事は「妄想」から始まりますｗ さらにこの妄想には続きがあり、 こんな記事も書いていました。 後から追記していますが、このアイデア、まさかの実現化されていましたねｗｗｗ もしかしてもしかすると、前述のフラスコカーもどこかで実現していたりして！？ｗ このブログのコメント欄デザインに手をつけたのは、この６月でした。 後からもう少し手を加えていますが、おおむねこの時のままですねｗ 自分の…

…指定します コード きんきらきんのきーん♪ コード 怪しげな水玉も！ コード あとがき font-size 文字の大きさを指定します 例えばこーんなに大きな文字にもできます^^ コード 例えば<span style="font-size:50px;">こーんなに大きな文字</span>にもできます^^ 書式 font-size:文字のサイズ; color 文字の色を指定します このように、文字の色を赤くしたりできます！ コード このように、文字の色を<span style="…

…; その他アレンジ きんきらきんのきーん♪ <div style="padding: 1em; border: 15px solid; border-image: linear-gradient(150deg, black,brown,yellow,white,yellow,brown,black); border-image-slice: 1;">きんきらきんのきーん♪</div> 参考→【CSS】border（枠線）のグラデーション こんな組み合わせも <div styl…

…なる応用編です^^ きんきらきんのきーん 戦慄！ コード解説 きんきらきんのきーん 戦慄！ 昨日の記事のコメント欄で きんきらきんのきーん Little Strange Software コード <p style="background-color: gray; border-radius: 15px; border: 15px inset #dddddd; text-align: center;"><span style="font-size: 50px; font-wei…

… 作成例 サンプル きんきらきんのきーん♪ コード <div style="width: 300px; height: 300px; padding: 1em; border: 15px solid; border-image: linear-gradient(150deg, black,brown,yellow,white,yellow,brown,black); border-image-slice: 1;">きんきらきんのきーん♪</div> やってみて気づいたんですが…