時折、ブログの熱狂的な話題が特定のトピックに集中しているように見え、ブックマーク フォルダに保存されている記事が会話を交わしているように見えます。 現在そこにある会話はすべて CSS グラデーションに関するものであり、より興味深い部分のいくつかをリンクしたいと思いました.
- 22 日目: 円錐勾配 — Manuel Matuzovic は、最新の CSS に関する 21 日間の連載の 100 日目に円錐グラデーションを調べ、色、角度、配置、およびカラー ストップについての優れた概要を提供しました。 次に、 日22、彼はそれを
::backdrop疑似要素。 （ちなみにTwitterは意外と 彼のアカウントを停止した — 可能であれば、その船を正す手助けをしましょう.) - CSS 放射状グラデーションを本当に理解していますか? - パトリック・ブロセット ここでガイドに値する作業を行いましたが、正直なところ、まだ作業を進めています。 しかし、放射状グラデーションのサイズと形状のキーワードのように、私がまだ聞き漏らしている事柄についての彼の明確な説明とデモには、すでに感謝しています。 私はすでにこれを私たち自身でリンクしています CSS グラデーション ガイド!
- 高度にカスタマイズ可能な背景グラデーション — ねえ、放射状グラデーションと言えば、 スコット・ヴァンデヘイ複数のカラー ストップを使用したレシピが先週話題になりました。 彼の課題は、さまざまなカラー バリエーションをサポートできるグラデーション パターンを作成することでした。これは、使用しない場合、通常は各バリエーションの CSS クラスとカラー値の混乱です。 カスタムプロパティ. このようにして、さまざまな色のカスタム プロパティと各カラー ストップの配置値を割り当て、状況に応じて値を更新するだけです。 さらに、JavaScript を使用してカスタム プロパティを更新する方法により、Scott は次のことが可能になりました。 グラデーション パターンをカスタマイズするためのツールを作成する、投稿の最後に惜しみなく共有されています。
- CSS ハーフトーン パターン - ミシェル・バーカー Ana Tudor の「ハーフトーン」パターンの詳細な内訳が含まれています。 その効果は、古い学校の新聞の点線のインク印刷のようなものです。 アナが使ってる間に フーディーニ アニメーションとホバー効果のフードの下で、Michelle は特にハーフトーン効果自体と、それが放射状グラデーションでどのように構成されているかを調べます。 私は特に、ミシェルがドットの単純なグリッドからパターンが少しずらされたものに移行する方法を示す方法が気に入っています. そして最後まで固執して、彼女がどのように効果を句読点で強調しているかを確認してください。
mask-image線形グラデーションを使用してフェード効果を作成します。 私はこのパターンを少しリフしましたも、とろみのあるインクブロットフィルターのように見えるきちんとしたものに巻き上げられました. - 威勢のいい Navbar ソリューション — Eric Meyer は、点線が「現在のページ」リンクから出て、コンテンツ コンテナーの左端に沿った大きな点線の境界線の一部になるメニューの興味深い設計課題を与えられました。 エリックは常に素晴らしい例です フロントエンド開発者のように考える方法、そして標準的な設定方法で思わぬ障害にぶつかったときに線形勾配を使用して取った別のルートを説明しながら、彼はここでそれを行います
border-style: dotted要素に。 - マスクされたグラデーションの破線 — エリックは最後のリンクのフォローアップで、左の境界線のダッシュをラスター イメージのダッシュに接続した方法だけでなく、彼の辛抱強い設計眼がどのように彼を説得してソリューションを変更し、より低い解像度を模倣したかを示しましたXNUMX つの繰り返し線形背景グラデーションを使用した画像のダッシュ
mask-image背景のグラデーションに。 とてもオタクで素晴らしい！
