最近、私は友人を喜ばせるために、インターネット上の次の結婚式専用のページでアイデアを得ました。 お祭りのテーマは、リボン、フレーム、レースなど、さまざまな種類の装飾的な要素を使った実験の観点から、非常に肥沃に思えました。 同時に、魂のために、純粋なCSSでそのような装飾の最大値を実現するために着手しました。
この記事では、放射状と線形のグラデーションを使用して、将来のサイトのレースパターンを「織り」、どうやって管理したかを共有したいと思います。
それでは、マークアップから始めましょう。 レースのタイプごとに1つの要素が必要で、合計で7つの要素があります。
<div class="lace one"></div> <div class="lace two"></div> <div class="lace three"></div> <div class="lace four"></div> <div class="lace five"></div> <div class="lace six"></div> <div class="lace seven"></div>
また、 lace
クラスを使用してすべての要素の共通スタイルを書き留めます。
.lace { height: 70px; background: #222; margin-bottom: 15px; }
最もシンプルな飾りは波線のように見えます。
このようなパターンは、放射状の勾配によって形成された半円を水平方向に繰り返すことによって作成されます。
.one { background-image: radial-gradient(circle at 10px 0, rgba(255,255,255,0) 9px, #fff 10px, rgba(255,255,255,0) 11px); background-repeat: repeat-x; background-size: 20px 11px; }
さまざまな色を組み合わせてグラデーションを作成することで、波型ファブリックの効果を実現できます。
.two { background-image: radial-gradient(circle at 15px 0, #360031 2px, #fba5ec 20px, rgba(255,255,255,0) 21px); background-repeat: repeat-x; background-position: 0 0; background-size: 30px 21px; }
ここでは、他の例と同様に、キーはrepeat-x
値を持つbackground-repeat
プロパティであり、装飾の要素の水平方向の繰り返しを提供します。
放射状のグラデーションによって形成された円と円弧を組み合わせて、レースを連想させるさまざまな複雑さのパターンを取得できます。 以下に例を示します。
.three { background-image: radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px), radial-gradient(circle at 15px 0, rgba(255,255,255,0) 14px, #fff 15px, rgba(255,255,255,0) 16px), radial-gradient(circle at 15px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px), radial-gradient(circle at 5px 5px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px); background-repeat: repeat-x; background-position: 0 0, 15px 6px, 0 0, 25px 9px; background-size: 30px 21px, 30px 21px, 30px 21px, 30px 20px; }
真のレースの編組には、多くの場合、斜めに織り交ぜられたフィラメントが含まれています。
線形グラデーションは、このようなメッシュレース構造のシミュレーションに適しています。 簡単な例を見てみましょう。
菱形を形成する斜線はto right bottom
異なる方向の2つの線形勾配を使用して描画されます。 写真を完成させるために、放射状のグラデーションを使用してエッジに沿って半円を追加しました。
.four { background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px), linear-gradient(to left bottom, rgba(255,255,255,0) 9px, #fba5ec 10px, rgba(255,255,255,0) 11px), radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 7px); background-repeat: repeat-x; background-size: 12px 20px, 12px 20px, 12px 11px; background-position: 0 0, 0 0, 0 20px; }
ただし、グリッドを取得するには、行を水平方向だけでなく垂直方向にも繰り返す必要があります。 したがって、次の例では、 background-repeat
プロパティをrepeat-x
ではなくbackground-repeat
設定しbackground-repeat
。
.five { background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px), linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px); background-repeat: repeat; background-size: 12px 14px, 12px 14px, 12px 11px; background-position: 0 0, 0 0, 0 20px; }
それでは、メッシュに基づいてレースの編組を描いてみましょう。
この場合、メッシュパターンは、疑似.six:before
の.six .six:before
配置するのが便利です.six:before
一方、レースエッジ装飾では、いくつかの放射状グラデーションを組み合わせて作成されたメインdiv.six
要素の背景を使用します。 background-position
プロパティにより、 background-position
は.six:before
擬似.six:before
高さと同じ高さにあります。
.six { background-image: radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fff 6px, rgba(255,255,255,0) 7px), radial-gradient(circle at 12px 0, rgba(255,255,255,0) 11px, #fff 12px, rgba(255,255,255,0) 13px), radial-gradient(circle at 12px 0, rgba(255,255,255,0) 4px, #fff 5px, rgba(255,255,255,0) 6px), radial-gradient(circle at 12px 12px, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px), linear-gradient(to left, rgba(255,255,255,0) 1px, #fff 2px, rgba(255,255,255,0) 3px); background-repeat: repeat-x; background-position: 6px 35px, 6px 39px, 6px 42px, -6px 43px, 8px 45px; background-size: 12px 12px, 24px 13px, 24px 12px, 24px 24px, 24px 8px; } .six:before { content: ""; display: block; height: 35px; background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px), linear-gradient(to left bottom, rgba(255,255,255,0) 8px, #fff 9px, rgba(255,255,255,0) 10px); background-repeat: repeat; background-size: 12px 14px, 12px 14px, 12px 11px; background-position: 0 0, 0 0, 0 20px; }
最後に、線の太さを試して、よりリアルな質感のレースを作成します。
.seven { background-image: radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px), radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px); background-repeat: repeat-x; background-position: 0 29px, 0 33px; background-size: 12px 12px; } .seven:before { content: ""; display: block; height: 31px; background-image: linear-gradient(to right bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px), linear-gradient(to left bottom, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px); background-repeat: repeat; background-size: 6px 12px, 6px 12px, 12px 11px; background-position: 0 0, 0 0, 0 20px; }
この例は、前の例と非常によく似ています。 主な違いは、グラデーションカラーの位置です。
radial-gradient(circle at 6px 0, rgba(255,255,255,0) 5px, #fba5ec 6px, rgba(255,255,255,0) 6px)
今のところすべてです。 完成したオーナメントのデモはこちらです。 楽しみながらかわいいパターンを想像して描いてください。