曲線を使う事で柔らかい表現が出来ます。以前は画像で表現していた曲線や流体シェイプなども今はCSSで簡単に作成が可能なので、テーマによっては使って見ましょう。
参考サイト
■border-radiusを使う
border-radiusを細かく指定して曲線や流体シェイプを作るのは非常に簡単ですが、4点のみの指定しか出来ないため、シンプルな形のみ可能です。
■chip-pathを使う
非常に自由度が高く、多角形を作る事も可能ですが、chipした部分はマスクされてしまうので、段落などある程度文字数が多いテキストを中に入れる場合は注意が必要です。
■SVG画像をマスクする
今はCSSでsvg画像をマスクする事も可能です。この方法が1番自由度が高いですが、記述が少し複雑です。
１：マスク用の画像をsvgで作成します。
２：CSSのmask-imageを使って、画像にマスクをかけます。
| <div class=”main-visual“> <img src=”img/unsplash.jpg” alt=””> </div> |
| .main-visual{ margin: 100px auto; max-width: 960px; height: 400px; } img{ object-fit: cover; width: 100%; height: 100%; -webkit-mask-image: url(img/mask.svg); -webkit-mask-repeat: no-repeat; mask-image: url(img/mask.svg); mask-repeat: no-repeat; } |
■擬似クラスを使い複雑な形を作る
clip-pathでも複雑な形は作れますが、文字が入る場合は擬似クラスを使った方が良いでしょう。その場合CSSが少し複雑になるので、場合によってはスニペットを上手く使いましょう。