CSS クリップパスを活用して、画像なしで DOM 内にクールな形状を作成する-CSSチュートリアル-php.cn

CSS クリップパスを活用して、画像なしで DOM 内にクールな形状を作成する

WBOY

リリース： 2024-07-16 15:02:58

オリジナル

1025 人が閲覧しました

Lean on CSS Clip Path to Make Cool Shapes in the DOM without Images

導入

数年前までは、Web サイトの背景の形状やセクションに長方形以外のものが必要な場合は、必要に応じて追加される静的な PNG または JPEG 画像をデザイナーに提供してもらう必要がほとんどでしたが、CSS はそれ以来、長い道のりを歩んできました、友よ。

私がページ上のコンテンツをさまざまな色の背景セクションに分割し、純粋な白と柔らかいグレーの色を交互に配置する Web サイトの更新に取り組んでいたとき、デザインのモックアップには、下端が上に傾いた 1 つのセクションが含まれていました。一般的なブロック要素のように、ページを完全に 90 度の角度で横切るのではなく、右に移動します。

これを行うためにデザイナーに背景画像の作成を依頼することもできましたが、代わりに CSS を使って自分でできるかどうかを確認したいと思いました。そしてなんと、CSS クリップパスを使えばそれができたのです。

DOM 内の興味深い形状やビジュアルは、もはや純粋にデザイナーの領域ではありません。CSS クリップパスなどのツールを使用すると、開発者は要素を再形成する権限を持っています。その方法を説明します。

CSS クリップパス

私のように、CSS クリップパス プロパティにあまり詳しくない場合は、要素のどの部分を表示するかを設定するクリッピング領域が作成されます。領域の内側にある部分は表示され、外側の部分は非表示になります。

Lean on CSS Clip Path to Make Cool Shapes in the DOM without Images

MDN クリップパスドキュメントのデモ。さまざまなクリップパスオプションにより、熱気球とテキストのさまざまなビューが提供されます。

clip-path プロパティはさまざまな値を受け入れることができます:

は、クリッピングパスが定義された SVG 要素の URL などの値を受け入れます。
。margin-box や border-box などの値を受け入れます。
、circle() や rect() などの値を受け入れます。
global-values。inherit や revert などの値を受け入れます。

と値を 1 つのクリップパスに結合することもできます。

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

ログイン後にコピー

この投稿では、クリップパスが受け入れることができるすべてのプロパティと、それらを組み合わせて非常に複雑な形状を作成する方法については詳しく説明しません。さらに詳しい情報と、clip=path の動作例が必要な場合は、Mozilla ドキュメントから始めることをお勧めします。

の 1 つクリップパスが受け入れるプロパティは polygon() であり、これが傾いた背景セクションに必要なソリューションとなりました。

CSSで再作成する必要があったポリゴン

Lean on CSS Clip Path to Make Cool Shapes in the DOM without Images

CSS で作成する必要があった灰色のポリゴン背景。

上の画像は、CSS クリップパスの Polygon() プロパティを使用して再作成する必要があった灰色の背景セクションのスクリーンショットです。そして最初に行う必要があるのは、CSS を適用する HTML 要素をいくつか作成することでした。

polygon() クリップパスと rect() クリップパス

なぜクリップパスでrect()プロパティの代わりにpolygon()プロパティを使用することにしたのか疑問に思われるかもしれません。この 2 つは似ていますが、polygon() はより複雑な多角形の形状を作成でき、多角形の各頂点を定義する座標のペアを受け入れることで高度な設計に優れた汎用性を提供します。一方、rect() は長方形の形状のみを処理できます。

HTMLとCSSを設定する

私が取り組んでいたサイトは、Go ベースのフレームワークである静的サイトジェネレーター Hugo に依存していました。 Hugo はテンプレートを使用してサイトの HTML をレンダリングするため、HTML の知識がある場合は、以下のコード例に比較的馴染みがあるはずです。

テンプレートに関する注意:

JSX コンポーネント、Pug や Handlebars を備えた Node.js、または Jekyll を使用したことがある場合は、Hugo のテンプレートも同様です。Go 変数と関数を含む HTML 要素に {{ }} が散りばめられており、テンプレートのどこにでも正しい情報が表示されます。
が注入されます。

これは、このセクションの前景にあるパズルのピースにちなんで、私がこのページの「パズルセクション」と名付けたもののコードです。この記事の目的と明確さのために、テンプレートに挿入された Go 変数を生成された HTML に置き換えました。

single.html

  <div class="about-body">
    <!-- more HTML elements up here -->

    <section class="puzzle-section section">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 col-lg-6">
              <h4 class="mb-3">
                Lorem ipsum dolor
              </h4>
              <p class="mb-5">
                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              </p>
              <h4 class="mb-3">
                Duis aute irure dolor in reprehenderit
              </h4>
              <p class="mb-5">
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              </p>
          </div>
          <div
            class="col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-6 offset-lg-0"
          >
            <img
              class="img-fluid"
              src="/images/about/puzzle-pieces.png"
              alt="Puzzle pieces"
            />
          </div>
        </div>
      </div>
    </section>

     <!-- more HTML elements below -->
  </div>

ログイン後にコピー

This section of code is relatively compact, but it deserves discussion. In addition to the HTML elements, there are quite a few CSS classes which come from the Bootstrap library, one of the original open source CSS frameworks for responsive web designs.

Among the custom classes like about-body, which I used for adding custom styling, there are classes like container, row, col-12 or col-md-6, mb-5, and mb-3.

All of the latter classes are Bootstrap classes, which serve to make the text and image elements onscreen share the width of the page when the viewport is over a certain width (col-md-6), or apply a margin-bottom of a certain amount to the

tags (mb-3 or mb-5).

The Bootstrap classes are beside the point for this post though, the class to focus on is the puzzle-section which wraps all the text and puzzle piece image.

This puzzle-section class is where we're going to add the clip-path property to display the light grey background behind the text and image with the slightly tilted, up-and-to-the-right design.

Add the CSS clip-path to shape puzzle-section

As I wasn't quite sure how to style a normal, rectangular

into an uneven shape, I started looking for a solution online and found this helpful, interactive clip-path-focused site, CSS clip-path maker.

Lean on CSS Clip Path to Make Cool Shapes in the DOM without Images

This CSS clip-path maker website is fantastic because it has a whole slew of preset shapes, adjustable image sizes and backgrounds, and the currently displayed image's vertices can be dragged into any arrangement you want. The line at the bottom of the screen shows the exact clip-path CSS values that you can copy/paste into your own project's CSS.

I chose the parallelogram preset shape as my starting point, and then dragged the corners to match the angle of the background section I was trying to recreate from scratch. Once I was satisfied it looked accurate, I copied the CSS line at the bottom of the page to my clipboard.

In my project's SCSS file, I added the copied clip-path CSS in addition to the light grey background-color property and some padding to give the text and puzzle piece images some breathing room on the page.

NOTE: Even though this file shown in the example code is SCSS instead of pure CSS, for this post it shouldn't make a difference here. It should be a direct 1:1 comparison.

about.scss

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}

ログイン後にコピー

That little bit of CSS for clip-path was all that was needed to take my perfectly rectangular DOM element and turn it into an imperfect polygon instead. Not too shabby!

Conclusion

CSS is pushing the boundaries of what web developers can do without resorting to images, videos, and custom designed elements all the time. And the satisfaction of figuring out how to do a cool little bit of design on all on your own feels pretty empowering.

A recent example of this was using the CSS clip-path property to create a background box for some text and images that had an uneven bottom edge. With the help of an interactive website dedicated decoding to clip-paths of all shapes and sizes, I was able to make quick work of this slightly skewed polygon.

And let me take a moment to shout out how much I appreciate the folks putting out those little sites or code snippets that solve a very specific problem for another developer - you folks continue to make the Internet a better place.

Check back in a few weeks — I’ll be writing more about JavaScript, React, IoT, or something else related to web development.

If you’d like to make sure you never miss an article I write, sign up for my newsletter here: https://paigeniedringhaus.substack.com

Thanks for reading. I hope learning to reshape how elements look in the DOM with just the power of CSS helps you as much as it's helped me.