Trys Mudfordの作成についての説明を楽しんだ 丸い三角形のボックス。それは非常に現実的なクライアントのニーズであり、私は理論的な問題に対する実際の問題に対する技術的なソリューションについて読むことを好む傾向があります。この特定の形状には、ウェブ上にそれを描くためのひどく明白な方法がないため、これは難しいものでした。
CSS ‘ clip-path 便利ですが、最終的な丸めは直感的ではありませんでした feGaussianBlur SVGフィルター。あなたはそれを描くことができます 全て SVGで、しかし私は思う % 使用できる値 clip-path 純粋なSVGよりも、Webコンテンツにより自然に適合しています。 SVGは、レスポンシブウェブデザインの世界で生まれたわけではありません。
事は次のとおりです。SVGには viewBox これは、物事を描く固定座標系です。最終的なSVGは、スケーリングとつぶやくなどを行うことができますが、すべてこの固定グリッドで起こっています。
私はしようとしたときのことを覚えています 学ぶ
M 100,100「ペンを拾い、正確な座標100,100に移動する」を意味しますm 100,100「現在どこにいてもペン100を下に移動し、100を100に移動します」を意味します。
のその構文 d 属性（で表現されます path() 関数）は CSSに適用されます、しかし、私はいつもそれが非常に奇妙だと思っていました。数字はSVGの「ユニットレス」であり、それは理にかなっています。 viewBox。しかし、noはありません viewBox 通常のWebレイアウトで。 px、 そして px また、特にレスポンシブなWebデザインに優しいものではありません。
私が見たとき、これは私の心の文脈でした Safari 18.4新機能。それらの1つは新しいものです shape() 関数：
画像やビデオを形状に切り取るなどの複雑なグラフィカルな効果の場合、著者はCSSのマスキングに戻ることがよく、マスクがマスクされているコンテンツのサイズとアスペクト比に適応できるようにします。を使用して
clip-path複雑な形状を指定する唯一の方法は、path()SVGスタイルのパスを取る機能、およびこれらのパスの値にはユニットがありません。それらはCSSピクセルとして扱われます。クリップされている要素に敏感なパスを指定することは不可能でした。
はい！彼らがそれを手に入れてよかったです。この問題について話し、空白の凝視に会ったとき、私は夢中になっているように感じました。
Tyrsはとても近くになりました clip-path: polygon() 丸い矢印の形で一人で。 % 値は、内部のランダムな量のコンテンツでうまく機能します（たとえば、「ノーズ」は高さの50％である必要があります）、および矢印の形状を維持する必要がある場合 px 値はそこに混ざり合っています。
しかし、丸めはありませんでした。丸みはありません polygon()。
それとも私は思った？とにかく見ている私はドラフトスペックにいました shape()、これを丸で囲みますが、同じものを定義します round キーワードと幾何学的図を提供して、その実装方法に期待します。
オプション
ラウンドキーワードの後、ポリゴンの各頂点の丸めを定義します。
コードの例はありませんが、次のように見えると思います。
/* might work one day? */
clip-path: polygon(0% 0% round 0%, 75% 0% round 10px, 100% 50% round 10px, 75% 100% round 10px, 0% 100% round 0%);「ドラフトスペックはただ…ドラフトスペック」と言いますが、安定したSafariはこのドラフトスペックに荷物を供給しているので、すべてがどのように機能するかわかりません。ブラウザ全体でこの構文をテストしましたが、それをサポートするものはありません。もしそうなら、Trysの仕事はかなり簡単だったでしょう。境界が曲がった経路をたどるその投稿の例は、まだ難しいです。多分私たちは必要です clip-path-border？
「基本的な形状」関数での丸めの先例がすでにあります。 inset() 関数には round 丸い長方形を生成するキーワード（シンプルだと考えてください border-radius）。 この例を参照してください、実際には機能します。
とにかく：それは新しい shape() 関数。それはのパワーを複製しようとしているようです
= | | close |
| |
| |
= move
= line
= hline
[ to [ | left | center | right | x-start | x-end ]
| by ]
= vline
[ to [ | top | center | bottom | y-start | y-end ]
| by ]
= curve
[ [ to with [ / ]? ]
| [ by with [ / ]? ] ]
= smooth
[ [ to [ with ]? ]
| [ by [ with ]? ] ]
= arc
[ [ of {1,2} ]
&& ? && ? && [rotate ]? ]
= [ to | by ]
= [ | ]
= [ from [ start | end | origin ] ]?
= {2}
= cw | ccw
= large | small したがって、Path Syntaxでやや鈍い単一文字コマンドの代わりに、これらはより理解しやすい名前を持っています。これは、音声バブルの形を描く仕様の例です。
.bubble {
clip-path:
shape(
from 5px 0,
hline to calc(100% - 5px),
curve to right 5px with right top,
vline to calc(100% - 8px),
curve to calc(100% - 5px) calc(100% - 3px) with right calc(100% - 3px),
hline to 70%,
line by -2px 3px,
line by -2px -3px,
hline to 5px,
curve to left calc(100% - 8px) with left calc(100% - 3px),
vline to 5px,
curve to 5px top with left top
);
}丸い角が文字通りで描かれているのがわかります curve コマンド。きちんとしていると思います。したがって、再び適切なブラウザのサポートが得られたら、これでtrysの形状を描画することができます。この構文を使用して、ユニットを混合して一致させることができます。カスタムプロパティでそれらを抽象化することができ、それらをアニメーション化することができます。 calc()、そしてこのすべての本当に素敵なネイティブCSSのもの path() 私たちに与えることができませんでした。これ は レスポンシブウェブデザインの世界で生まれました。
とても素敵な勝利、Webプラットフォーム。
Be the first to comment
