タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
CSS Gradient Generator
A front-end web development newsletter that sparks joyMy main focus right now is teaching front-end developers how to do cool stuff. My personal newsletter is sent once every few weeks, and includes bonus subscriber-only content. No spam, no nonsense. Unsubscribe at any time.
CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。 Use conic gradients to create a cool border まずは、実際のデモをご覧ください。 conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。 See the Pen Conic Gradient Border by Adam Argyle (@argyleink
ゼロから始めるPaperspace Gradient【Google Colab代替サービス】 - Qiita
はじめに こんにちは、kunishouです。先月2022年9月の末にGoogle Colabがサービス内容の大幅な変更を実施し、従来は無制限でGPUを使用できていたものが、クレジット制に移行しました。この変更を受けてこれまでGoogle Colabを利用してKaggleに取り組んできたり、Stable Diffusionなどでイラスト自動生成の実験をしてきた多くの方々から悲痛な声が聞こえてきました。そこで、本記事では 『Paperspace Gradient』というGoogle Colabに類似したクラウドGPU開発環境を定額で利用できるサービス を見つけたので、このサービスの詳細や使い方、使ってみた感想を紹介したいと思います。また、Paperspace Gradientはストレージ容量が少ない（Growthプランで50GB）という欠点がありますが、これをカバーする手段として インスタンス
Machine Learning Trends You Need to Know - Gradient Flow
Insights and trends that will help you navigate the AI landscape. By Assaf Araki and Ben Lorica. Automation and democratization are on the rise AutoML tools are designed to automate the process of training and deploying machine learning. Such tools have progressed to the point where they can produce adequate models for many use cases. Moreover, in domains where model hubs and foundation models (e.
【注目論文】Sinusoidal Frequency Estimation by Gradient Descent - Qiita
QMULのBen Hayes氏らが、勾配降下法で周波数推定を行う手法を論文で発表しました。ICASSP2023に投稿したそうです。 きわめてシンプルな手法なのですが、機械学習系音声合成にとってはたいへん重要な成果だと思うので、紹介します。 論文リンク：Sinusoidal Frequency Estimation by Gradient Descent ソースコード：https://github.com/ben-hayes/sinusoidal-gradient-descent 背景：DDSPの限界 DDSP(Differentiable Digital Signal Processing)とは、微分可能な計算式を持つDSPモジュールをDNNに組み込んで機械学習をやる手法で、Google Magentaプロジェクトが最初に打ち出したアイデアです。 今ではもうDDSPシリーズと呼べるほど多様
鮮やかなグラデーションを作成したいのに、なぜか色の移り変わる部分がくすんで灰色っぽくなってしまう……という経験をした人もいるはず。このような事態を避けて色鮮やかなグラデーションを作成可能にするツール「CSS Gradient Generator」が公開されています。CSS Gradient Generatorで作成したグラデーションはCSSのlinear-gradient関数としてコピー＆ペースト可能なので、そのままウェブデザインとしても利用可能です。 CSS Gradient Generator https://www.joshwcomeau.com/gradient-generator/ Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient. https://w
Gradient Generator Tool
Why this gradient generator is better than others When you try to create gradients across a wide range of hues, you often will see a gray dead zone ☠️™ in the middle of your gradient. Why is this worth a ridiculously ominous emoji? Because it means your gradients look like this: Color geeks: this is a slight approximation, since we’re squishing a cross-section of a cube into a circle. Put simply:
Hello world. I've missed you all. I hope you all are happy, healthy, and well ❤️ After some major life changes and enormous projects, it's great to be back! I'm conjuring up on a new animation video involving the Nintendo Switch 😊 I wanted to improve my use of box-shadows, so I challenged myself to make a realistic looking Switch. My fiancé then had the splendid idea of showing gameplay on the sc
【ツール】repeating-conic-gradientによる背景模様生成ツール - Little Strange Software
どうも！LSSです！！ CSSで、３種類あるgradientを用いて「模様が繰り返すタイルパターン」のような背景を描画できます。 中でも、repeating-conic-gradientがfromの角度指定を変更する事で、思いがけないような模様の変化をもたらすのが面白いです^^ 【CSS】謎の背景模様『山』【小ネタ】 - Little Strange Software 今回はその「repeating-conic-gradientの模様変化」を手軽に体験できるツールを作ってみました。 repeating-conic-gradientによる背景模様生成ツール 使い方 repeating-conic-gradientによる背景模様生成ツール 開始角度： 中心位置（横）： 中心位置（縦）： 繰り返し： 色1： 色2： 幅： 高さ： ランダム設定 コード 使い方 最初は、白と黒の格子模様、オレンジ色
Gradient Magic
A Free Gallery of Fantastic and Unique CSS Gradients.
【CSS小ネタ】水玉模様（radial-gradientは複数書けます） - Little Strange Software
どうも！LSSです！！ 今回は小ネタです。 たまたま、水玉 コード <div style="width: 300px; height: 200px; padding: 1em; border-radius: 25px; background-size: 30px 30px; background-color: #ddffdd; background-image: radial-gradient(circle 20px at 25% 25%,white 25%,transparent 30%),radial-gradient(circle 20px at 75% 75%,white 25%,transparent 30%);">たまたま、水玉</div> 水玉模様を作っている部分 background-size: 30px 30px; background-color: #ddffdd; b
大きなミニバッチの効力と、Tensorflowを使って大きなミニバッチを学習させる方法(Gradient Accumulation)
この記事についてこの記事では、大きなミニバッチで学習さえることの効力と、Tensorflow2.0を用いてメモリに乗り切らない大きなミニバッチを学習させる方法を紹介します。この記事に書いてあることは以下の通りです。 Tensorflow2.0を用いた標準的なモデル学習の方法大きなミニバッチで学習させることが効果的な場面各ミニバッチのGradientを積算していき、仮想的な大きなバッチのGradientでモデルを更新する方法今回使った実験のコードはGithubにアップロードしてます。 Tensorflow2.0の標準的なモデル学習の方法tensorflow2.0では、kerasのfitを用いた学習のほかに、gradient tapeを用いた学習方法がチュートリアルで提案されています。以下のコードはチュートリアル[1]からの引用です。 大きなミニバッチで学習させることが効果的な場面当然ですが、
【CSS小ネタ】conic-gradientで矢印を描いてみた - Little Strange Software
どうも！LSSです！！ conic-gradientを使って、矢印を描いてみました。 2021/12/1 コードちょっと修正 左矢印 上矢印 あとがき 左矢印 ここ見て！ コード <style> .arrowl{ display:inline-block; background-image: conic-gradient(from 45deg at 0% 50%,#ff0000ff 0deg 90deg,#ff000000 90deg), conic-gradient(from 75deg at 0% 50%,#ff0000ff 30deg,#ff000000 30deg); background-size:50% 100%,100% 100%; background-repeat:no-repeat; width:1em;height:1em; } </style> <p>ここ見て！<s
【CSS】linear-gradientで描く「斜め市松模様」 - Little Strange Software
どうも！LSSです！！ 以前の記事、【CSS】CSSオンリーでレンガ模様・改善版の中で、conic-gradientを用いる事でレンガ模様・格子柄・市松模様を描ける、という事を書いていました。 conic-gradient や radial-gradient は、繰り返しパターンの模様を描く上で、background-sizeやbackground-positionと組み合わせるとなかなか自由度が高い模様を生み出せますが、その点では linear-gradient は「直線的」であるがゆえに作れる模様が限られていると感じています。 が、今回ふと、「 linear-gradient でも、斜め市松模様なら描けるのでは？」と思いつき、試してみました。 斜め市松模様 コード 斜め市松模様 応用 あとがき 斜め市松模様 斜め市松模様です。 コード <style> .chkptn{ height:3
【CSS】border-imageとgradientで作る枠線３種 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。 特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃったりしますね^^ 今回は、そんなborder-imageならではの枠線を考えてみました。 枠線３種 コード とりあえず３種、ですが 枠線３種 ぼやけた角丸枠 トリプル角丸枠線 縦に虹色 コード <div s
【CSS】conic-gradientで描くドット絵風背景 - Little Strange Software
どうも！LSSです！！ ブログを始めてから1000日たちました - Little Strange Software に使用した、「背景にうっすら『１０００』の数字が並んでいる」コードを解説してみます。 こんなコードでした 下から見ていきましょう その上に白で上書き あとは同じ要領で… atとpositionとsize こんなコードでした コード <style> article{ background: conic-gradient(at 150px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 15px 0/160px 80px, conic-gradient(at 140px 10px,#f8f8f8 89.9deg,#f8f8f800 90deg) 25px 30px/160px 80px, conic-gradient(at 150px 10px,#f8
【CSS】radial-gradientのサイズをアニメ変化させてみます【実験】 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com に続く、gradient＋keyframes実験、radial-gradient版です。 linear-gradient の時は傾きを指定する箇所に「to left top」を指定する事で、「画像サイズの変化に応じて角度変化」という手法を実験しました。 では、radial-gradientの場合は？？ 実験 コード 解説 組み合わせでこんな事も！ linear、radialときたら… 実験 コード <style> @keyframes rtesta{ 0%,100%{background-size:10px 10px;} 40%,60%,80%{background-size:75px 75px;} 30%,50%,70%,90%{background-size:100px 100px;} } .rtest
【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】 - Little Strange Software
どうも！LSSです！！ CSSをいじっているうちに、「なんだかよく分からないもの」ができてしまいました。 …なんだか、やろうと思っていた事が期待通りの動きにならず、「なんだこりゃ？？」となっていたところで方向性を変えて、「なにか」らしいものに仕上げた…けれどやはり「なんだかよく分からないもの」になっておりますｗ なんだかよく分からないもの コード 当初やろうとしていた事 あっ！ なんだかよく分からないもの なんだかよく分からないものができました^^; コード <style> @keyframes cbig{ 0%{background-size:0% 0%;background-position:50% 50%;} 50%{background-size:100% 100%;background-position:0% 0%;} 100%{background-size:200% 200%
【ツール】conic-gradient生成ツール - Little Strange Software
どうも！LSSです！！ 今回は「コード生成ツール」として「conic-gradient生成ツール」を作ってみました。 conic-gradient生成ツール 使い方 あとがき conic-gradient生成ツール 繰り返し回数 コード 使い方 上から順に、 「繰り返し回数」のスライダー 「色追加」ボタン 「カラーパレット（最初は２つ）」 「表示サンプル」 「コード」 が並んでいます。 ２つあるカラーパレットから色を選択すると、表示サンプルがその色によるグラデーションに変化し、同時にコードもそれに合わせたものに変更されます。 ２色だけでは物足りない、という場合は、「色追加」ボタンを押すたびに無制限に色が増えていきます。 また、「繰り返し回数」のスライダーで繰り返し回数を調整できます。 お好みのグラデーションができあがったら、「コード」のグレーの枠に表示されているコードをコピーして、あなたの
【CSS】しつこく花火３【linear-gradientとrotateZ版】 - Little Strange Software
どうも！LSSです！！ と２回、borderとborder-radiusを使用しての花火に挑戦してきましたが、３度目となる今回は「全く別の方法」で花火に挑戦してみます！ 花火その３ コード 解説その１：linear-gradient 解説その２：rotateZ 解説その３：keyframeアニメーション あとがき 追記 花火その３ . . . . . . . . . . . . コード <style><!-- @keyframes hnb{ 0%{top:300px;width:5px;height:2px;} 60%{top:0px;width:5px;height:2px;} 80%{top:0px;width:150px;height:10px;} 100%{top:0px;width:150px;height:0px;} } .c1{ position:absolute; disp
【ツール】linear-gradientで遊ぼう！ - Little Strange Software
どうも！LSSです！！ これまで何度か「CSSでお絵描き」をやってきましたが、今回はその中でも特にシンプルな「linear-gradientで風景を描く」ものをツール化してみました。 linear-gradientで遊ぼう！ 使い方 linear-gradientで遊ぼう！ コード 使い方 色選択ボックスとスライダーのセットが９つ、並んでいます。 ここで指定された色がそのまま、「上から下に向かうlinear-gradient」に設定されたグラデーションが、下の枠に反映されます。 スライダーはそれぞれの位置指定（%）に該当します。 色選択やスライダーをいじると、リアルタイムに枠のグラデーションが変化し、またその状態のlinear-gradientのコードが表示されます。 CSSとしてこの生成されたコードを使用する場合は、 background-image:linear-gradient(なん
【CSS】border-imageとconic-gradient【実験】 - Little Strange Software
どうも！LSSです！！ ちょっとまた、border-imageを試してみました。 border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！ …のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。 ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。 border-imageとconic-gradient コード outsetの場合 四辺別々に色設定した場合 ただし、今回のconic-gradient版には欠点が… border-imageとconic-gradient こんな風になります。 よく見ると４つの辺の中でも明るさがグラデーション変化していますね。 コード <style> @keyframe
Gradientify SVG Icons - The definitive pack for gradient lovers
An interactive free SVG icons pack specially made for gradient lovers! See icons Made with a lot of in Iconshock
Beautiful gradient app to generate gradient color and css.
強引にlinear-gradientでラインアートしてみたところ… - Little Strange Software
どうも！LSSです！！ 三が日最終日！ 姪っ子（赤さん）もすっかり馴染んだところで、帰ってしまいました^^; また当人が忘れる前に来るように、と妹（ママ）には言っておきましたｗ さて、かなり以前に little-strange.hatenablog.com JavaScriptでcanvas要素を使って、はるか昔にやった「ラインアート」を試みた事がありました。 何本もの直線を、始点のY座標・終点のX座標を一定量づつずらしながら描くと、全て直線なのに曲線のように見える、というものでした。 それを実現するには「斜めの線を明確に指定した座標で何本も引く」必要があり、canvas要素を用いたのですが、「CSSのみでもなんとかできるんじゃないか？」と思い立ち、強引に試みてみた記録です。 強引にlinear-gradientでラインアートしてみた 無駄に長くなったコード 線を半分 間引いてみました あ
【JavaScript】conic-gradient生成ツールのコード - Little Strange Software
どうも！LSSです！！ 先日公開した little-strange.hatenablog.com の、ツール自体のコードです。 ざっくりした解説もつけてみました。 【JavaScript】コード作成ツールの作り方【さわり】 - Little Strange Software 【JavaScript】コード作成ツールの作り方【コード出力篇】 - Little Strange Software を基本とした、ちょっとややこしくなった（カラーパレットを増やせる部分）感じですね。 コード ツールを構成するHTML 初期設定 fctradd関数 「色追加」ボタンが押された時の処理 fctr関数「カラーパレット」の色が変更された時の処理 ctrw関数 「カラーパレット」を書き出す処理 gw関数 「サンプル」と「コード」を書き出す処理 以上がこのツールの全貌です コード <p>繰り返し回数<br /><
【CSS】conic-gradientのアニメーション【実験】 - Little Strange Software
conic-gradient background-positionアニメーション どうも！LSSです！！ とりあえず試しに、conic-gradientをアニメーション化してみました。 コード <style> @keyframes cncglda{ 0%,20%{background-position:0px 0px;}/*経過時間0～20%までの位置*/ 80%,100%{background-position:-5700px -3800px;}/*経過時間80～100%までの位置*/ } .cncgld{ width:300px; height:200px; background-image:repeating-conic-gradient(from 0deg at 50% 50%,black,brown,yellow,white,yellow,brown,black 36deg);
【CSS】今さら！？知らなかった第三のグラデーション、conic-gradient - Little Strange Software
どうも！LSSです！！ これまで、CSSのグラデーション（linear-gradient radial-gradient）で遊んできましたが…今日初めて知ってびっくり！ CSSのグラデーションは「もう１種類」あったようです！！ conic-gradientのテスト repeating-conic-gradient という事は、こんな事もCSSで出来ちゃいますね！ あとがき conic-gradientのテスト conic-gradient コード <style> .conictest{ background-image:conic-gradient(#ff8888,#ffff88,#8888ff,#ff8888); width:300px; height:200px; } </style> <div class="conictest">conic-gradient</div> backgr
【CSS】linear-gradientの角度をアニメ変化させてみます【実験】 - Little Strange Software
どうも！LSSです！！ CSSのbackground-imageにlinear-gradientを指定し、それをkeyframesアニメーションの対象にした場合。 例えば、 @keyframes キーフレーム名{ 0%{background-image:linear-gradient(0deg , 色１ , 色２);} 100%{background-image:linear-gradient(90deg , 色１ , 色２); } のように指定したとしても、角度が「0degから90degに徐々に変化」…とはなりません。 他のgradientもそうですが、 ( ) の内容はkeyframesの「徐々に変化」の途中経過の補完対象外のようです。 ですが、background-position や background-size の指定はアニメ変化してくれる事から、「角度がアニメ変化している」よ
Are Neural Rankers still Outperformed by Gradient Boosted Decision Trees?
Philosophy We strive to create an environment conducive to many different types of research across many different time scales and levels of risk. Learn more about our Philosophy Learn more
Stein Variational Gradient Descentの理論と実装 - Sansan Tech Blog
今年の4月に新卒入社した、DSOC R&D Groupの橋本です。前回はこちらの記事で登場しました。 buildersbox.corp-sansan.com 今回は、通常の変分推論よりも高精度に事後分布を近似するアルゴリズムの1つである、Stein Variational Gradient Descentについて説明します。まず一般的な変分推論について説明します。 変分推論 (Variational Inference) 変分推論は、真の事後分布に対しパラメトリックな確率分布を仮定して事後分布を近似する手法です。Jensenの不等式を用いることで、対数周辺尤度の下限である変分下限が導出できます。入力を、確率モデルのパラメータを とすると、 として変分下限 が得られます。ここで は確率モデルの同時分布、は変分パラメータ を有する近似事後分布を表します。さらに、対数周辺尤度 と変分下限 の差を
【CSS】gradientで描く線画囲み枠３種！【雲／キャンディ／リボン】 - Little Strange Software
どうも！LSSです！！ radial-gradientとlinear-gradientを駆使して、囲み枠を作ってみました。 本来お絵描き用途ではないCSSを強引にお絵描き風に使ってみると、こんな感じになります。 もこもこの雲 キャンディ リボン あとがき もこもこの雲 もこもこの雲 コード <style> .crd{ width:300px; height:200px; padding:40px; background: radial-gradient(farthest-side at 50% 100%,transparent 94%,black 97%,transparent 100%) 30px 0/calc(33.3% - 20px) 30px no-repeat, radial-gradient(farthest-side at 50% 100%,transparent 94%,b
【CSS】conic-gradientでCSSお絵描き - Little Strange Software
どうも！LSSです！！ conic-gradient を使って絵を描いてみました。 絵のほとんどは「conic-gradient」で完結しますが、最後の仕上げには「linear-gradient」と「radial-gradient」も参加してもらいます^^ 先に完成したものをお見せすると、こんな感じのものが出来上がりました！ 今回の記事内容は、この完成絵に至るまでの制作過程です。 はじめに、天と地があった そして山が生まれた 俺の後ろに道はできる 構図を意識してみる 東の空しらむ頃 月が綺麗ですね。 あとがき はじめに、天と地があった コード <style> #gz{ width:300px; height:485px; background-image:conic-gradient(#4444aa 89deg,#558855 90deg 270deg,#4444aa 271deg); }
gradientお絵描きについて【ぼんやり構想中】 - Little Strange Software
どうも！LSSです！！ 最近の記事、 little-strange.hatenablog.com little-strange.hatenablog.com では、多数のgradientを組み合わせて線を引き、それで囲んで枠を作ってみました。 当初思っていた以上に、（繰り返しを考えなければ）結構自由に線が引けるもので色々作ってみましたが、アレンジを加えてくださる方もおられる今、この「線の引き方」について手順をなぞって記事を書いてみるのもいいかな、と思ったりしています。 …またの機械にｗ ってなとこで、今回はこのへんで！ 次回もまた、よろしくお願いします^^
We propose a categorical semantics of gradient-based machine learning algorithms in terms of lenses, parametrised maps, and reverse derivative categories. This foundation provides a powerful explanatory and unifying framework: it encompasses a variety of gradient descent algorithms such as ADAM, AdaGrad, and Nesterov momentum, as well as a variety of loss functions such as as MSE and Softmax cross
COLRv1 Color Gradient Vector Fonts in Chrome 98 | Blog | Chrome for Developers
Compact, compression-friendly, color vector fonts with all your favorite gradient flavors. In Chrome 98, the Chrome and Fonts teams have added support for COLRv1, an evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and compact font files that compress well. Color now On the web, te
This SVG gradient background generator makes it easy to generate fluid and organic-feeling mesh gradients. You can use the resulting graphics as backgrounds to elements on a page to give a colorful fluid look to page elements. Behind the scenes, this generator makes use of SVG filters like feTurbulence, feGaussianBlur and feBlend to create the smooth and fluid effect on a SVG gradient. 🎨 If you'd
【CSS】repeating-radial-gradientを何気に初めて使ってみる - Little Strange Software
どうも！LSSです！！ CSSの background-image プロパティに、画像ファイルの代わりに linear-gradient や radial-gradient を使用する事で、綺麗なグラデーションが描ける！ ので、結構多用してきました。 で。 その他に、 repeating-linear-gradient repeating-radial-gradient というのもある、と知ってはいたのですが、 「リピート？背景画像はデフォルトで繰り返し表示で、repeatプロパティで制御できるのに、なぜ別に用意されているんだろう？」 って思っていたんですね。ずっとｗ これが、実は大きな誤解で、思っていたものと全く違うものだった、という話です。 普通のradial-gradientとrepeating-radial-gradient つまり、繰り返されるのは画像じゃなくて ついでに、失敗例
SVG Wave is a minimal svg wave generator with lot of customization. It lets you abiltiy to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
中央に汚い灰色が混ざらずきれいなグラデーションを作成できる「CSS Gradient Generator」レビュー
🎮 CSS Nintendo Switch (Box Shadow & Gradient Practice)
CSS Gradient Animator | Fuze
Gradihunt: Automated Gradient Generator
Categorical Foundations of Gradient-Based Learning
ffflux: Online SVG Fluid Gradient Background Generator | fffuel
Svg Wave - A free & beautiul gradient SVG wave Generator.
icrowdnewswire.com
icrowdnewswire.com
icrowdnewswire.com
icrowdnewswire.com
icrowdnewswire.com
icrowdnewswire.com