Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

きんきらきんのきーん の検索結果:

【CSS】conic-gradientのアニメーション【実験】

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

【CSS】filter:drop-shadowなら、グラデーション文字にも影をつけられました^^

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

【CSS】グラデーション文字をアニメーションしてみました

…字のアニメーション きんきらきんのきーん コード <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…

【CSS】黒地に金文字【小ネタ】

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

2020年ふりかえり記事

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

【CSS】テキスト装飾によく使うプロパティ おさらいとサンプル集

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

【CSS】ボックス装飾によく使うプロパティ おさらいとサンプル集

…; その他アレンジ きんきらきんのきーん♪ <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…

【CSS】グラデーション文字 応用編

…なる応用編です^^ きんきらきんのきーん 戦慄! コード解説 きんきらきんのきーん 戦慄! 昨日の記事のコメント欄で きんきらきんのきーん 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…

【CSS】border(枠線)のグラデーション

… 作成例 サンプル きんきらきんのきーん♪ コード <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> やってみて気づいたんですが…