CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS で魅力的なグラデーションの境界線を作成する:ステップバイステップ ガイド

グラデーションの境界線は、Web 要素にモダンで視覚的に魅力的なタッチを加え、Web 要素を目立たせます。ただし、CSS でこの効果を実現するのは簡単ではありません。 プロパティはネイティブにグラデーションをサポートしていません。この記事では、3 つの異なる方法を使用してグラデーション境界線を実装するための実用的な回避策を検討します。

構文

/* Method 1: Using border-image */
selector {
 border-width: 5px;
 border-style: solid;
 border-image: linear-gradient(direction, color1, color2) 1;
}
/* Method 2: Background and Padding */
.parent {
 background: linear-gradient(direction, color1, color2);
 padding: border-width;
}
/* Method 3: Pseudo-elements */
selector::before {
 content: "";
 position: absolute;
 inset: -border-width;
 background: linear-gradient(direction, color1, color2);
 z-index: -1;
}

方法 1:border-image を使用する

14 プロパティを使用すると、要素の境界線としてグラデーションを設定できます。 

<!DOCTYPE html>
<html>
<head>
<style>
 .gradient-border-box {
 width: 300px;
 padding: 20px;
 text-align: center;
 border-width: 5px;
 border-style: solid;
 border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
 margin: 20px auto;
 }
</style>
</head>
<body>
 <div class="gradient-border-box">
 This is a gradient border using border-image
 </div>
</body>
</html>

A box with a horizontal gradient border transitioning from red to teal appears on the page.

方法 2:ネストされた要素を使用した背景とパディング

このメソッドは、グラデーションの背景を持つ親要素とネストされた子要素を使用して、境界線の錯覚を作成します。 

<!DOCTYPE html>
<html>
<head>
<style>
 .gradient-parent {
 background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
 padding: 5px;
 display: inline-block;
 margin: 20px;
 }
 .white-child {
 background: white;
 padding: 20px;
 }
</style>
</head>
<body>
 <div class="gradient-parent">
 <div class="white-child">
 Gradient border using background and padding
 </div>
 </div>
</body>
</html>

A box with a diagonal gradient border (red to teal) created using background and padding appears on the page.

方法 3:擬似要素

22 を使用する 疑似要素を使用すると、メイン コンテンツの背後にグラデーションを重ねることができます 

<!DOCTYPE html>
<html>
<head>
<style>
 .pseudo-border-box {
 position: relative;
 width: 300px;
 padding: 20px;
 background: white;
 margin: 30px auto;
 text-align: center;
 }
 .pseudo-border-box::before {
 content: "";
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
 z-index: -1;
 }
</style>
</head>
<body>
 <div class="pseudo-border-box">
 Gradient border using pseudo-elements
 </div>
</body>
</html>

A box with a vertical gradient border (red to teal) created using pseudo-elements appears on the page.

比較

メソッド 長所 短所 border-image シンプルでクリーンなコード 複雑なグラデーションに対する限定的なブラウザサポート 背景とパディング ユニバーサルブラウザサポート 追加の HTML 構造が必要 疑似要素 柔軟性があり、追加の HTML は不要 慎重な配置が必要

結論

グラデーション境界線は、これら 3 つの方法を使用して UI デザインを効果的に強化します。 39 を選択します 簡素化のため、背景/パディングによるユニバーサルサポート、または柔軟性のための疑似要素。それぞれのアプローチには、最新の視覚的に魅力的な Web 要素を作成するための独自の利点があります。

CSS で魅力的なグラデーションの境界線を作成する:ステップバイステップ ガイド


  1. CSSの外観プロパティを持つカスタムチェックボックス

    外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。 構文 CSSの外観プロパティの構文は次のとおりです- Selector {    appearance: /*value*/;    -webkit-appearance: /*value*/; /*for Safari and Chrome */    -moz-appearance: /*value*/; /*for Firefox */ } 例 次の例は、CSSの外観プロパティを示しています。

  2. CSS3での色の定義

    CSS3で色を定義するには、RGB、RGBA、HSL、およびHSLAを使用します。これにより、色の値を使用でき、16進値を使用して色を定義することもできます- CSS3 RGBA 色の値は、赤、緑、青、アルファ用です。アルファは色の不透明度、つまり0.0から1.0の間の数値です。ここで、1.0は完全に不透明になります。ここでは、RGBAのAlphaパラメータで作成された不透明度の違いを確認できます- 例 ここで、RGBAカラー値の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> #de