私がCSS図面を作り始めたとき、私は「一つのdiv CSSアート」について知りませんでした、私は人々が1つのdivだけで描くことができるものに非常に驚いていました、そして、私はこれらの図面がどのように作られるかについて知りたいと感じました.
私はCodepenに行って、それらについてもっと学び始めました、私は、彼らが3つの構成要素を使うとわかりました:「擬似要素」、『影』と『勾配』.
私は、これらの3つの要素があなたが一つのdiv CSSアートを作るのを援助する方法についてより多くの詳細を与えます.

1 -擬似要素:

はい、それは単一のdivです、しかし、擬似要素を使用することはあなたにスタイルに2つの他の要素を与えます:div ::beforeとdiv ::after.
セレクタの前に何かを挿入する
後にセレクタを挿入します.
これらの2つのセレクタの間に行く要素としてdivを考えてください.
' content 'プロパティを使用して、追加するコンテンツを挿入できます.またはそれを空白(コンテンツ:';を維持することができます幅/高さ、境界線、背景を追加する図形を作成します.

2 -シャドウ

ボックスシャドウプロパティは、単一の影を追加するために使用されていない、我々はまた、さまざまな色、サイズ、スプレッドとぼかしの値を持つ多くの図形を生成するために複数のボックスの影を設定することができます.

    div {
      border: 1px solid;
      border-radius:50%;
      width: 50px;
      height: 50%;
      padding: 50px;
      box-shadow: 5px 5px blue, 10px 10px red, 15px 15px yellow;
    }

我々は、オフセットとinsetオプションを使用して、これらの図形で遊ぶことができます.

3 -グラデーション

私はそれが一般的にCSSアートに来るとき、これは重要なことだと思う、あなたは常にグラデーションを見つけるだろう、よりグラデーションは、より複雑さをあなたの図面に追加されます.
また、背景画像のプロパティで複数のグラデーションを組み合わせることによって図形を作ることができます.

    div{
      width : 200px;
      height : 100px;
      background: radial-gradient(ellipse at 50% 82%, red 67%, transparent 52%)
    }

デモ

それでは、例を挙げて、この「一つのdiv香水瓶」を一緒に描きましょう.

これは3つの主要な要素で構成されています.

A -黒い要素は、我々の部門

です

B - Green要素は:::beforeセレクタを表します.

C -赤の要素は::::::::::::::::::::::::::::::::::::::::

これは単一のdiv html要素です.

    <div class="perfume"></div>

CSSを書き始めましょう
だから私たちが気にかける最初のことは黒い要素です.
これは灰色の背景色を持つDIV要素で、境界線半径は10ピクセルで、いくつかの次元が表示されます.ここで複数の影を使用していることに注意してください.

    .perfume {
      position: absolute;
      width: 222px;
      height: 328px;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: #ececec;
      border-radius: 10px;
      box-shadow: -2px 9px 8px #5d56564a, 0px 1px 3px #888;
      border-width: 1px;
      border-style: ridge;
    }

を使用して緑色の要素に移動しましょう:セレクタの前に、この1つが多くの図形を含んでいることがわかります.
これは、複数の異なる色の線形勾配以外の最初の形のコードです.

    .perfume::before {
      content: '';
      position: absolute;
      display: block;
      width: 164px;
      height: 157px;
      top: -148px;
      background-repeat: no-repeat;
      background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
      background-size: 92px 17px;
      background-position: 64px 124px;

    }

我々の第2の形は、小さいサイズと異なる位置で前のものと同じです.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px;
background-position: 64px 124px, 74px 101px;

次に、上部の円を表すラジアルグラデーションです.我々がそれの下にあるものの前にこの形を加えたことに注意してください.常にそれは次の1つでカバーされませんので、先頭の図形で起動します.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%);
background-size: 92px 17px, 72px 20px, 10px 10px;
background-position: 64px 124px, 74px 101px, 106px 50px;

前の形を付けたあとで、異なるサイズと位置を持つ最初のものと同じように、次の直線勾配を加えます.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px;

他の線形勾配

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px;

今、すべてのこれらの図形の間の空白部分を埋める時間です.

background-image: linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), radial-gradient(circle closest-side, #3f3f3f 10%, #a8a8a8 104%, transparent 3%), linear-gradient(90deg, rgba(68, 68, 68, 1) 6%, rgba(245, 245, 245, 1) 7%, rgba(245, 245, 245, 1) 40%, rgba(13, 12, 12, 1) 51%, rgba(192, 192, 192, 1) 61%, rgba(192, 192, 192, 1) 93%, rgba(67, 67, 67, 1) 95%), linear-gradient(90deg, rgba(208, 208, 208, 1) 6%, rgba(207, 207, 207, 1) 7%, rgba(40, 40, 40, 1) 27%, rgba(13, 12, 12, 1) 51%, rgba(40, 40, 40, 1) 70%, rgba(207, 207, 207, 1) 93%, rgba(208, 208, 208, 1) 95%), linear-gradient(#434343, #434343), linear-gradient(#939393, #939393), linear-gradient(#2f2f2f, #2f2f2f),
    linear-gradient(#878787, #878787);
background-size: 92px 17px, 72px 20px, 10px 10px, 80px 52px, 92px 17px, 80px 3px, 72px 3px, 76px 6px, 82px 8px;
background-position: 64px 124px, 74px 101px, 106px 50px, 70px 48px, 63px 148px, 70px 46px, 74px 99px, 73px 121px, 70px 140px;

はい、それは自分の位置、色、サイズを持つすべてのこれらの異なるグラデーション、それぞれを見て少しクレイジーだが、それは私たちの図面は良い見て作るものです.
それはすべてのためのものです:セレクタの前に、我々はトップパート1を終えました😌
のセレクタに移動し、赤の要素を我々の図面に追加しよう😅 )
それはちょうどいくつかの境界半径と2つの線形勾配を持つ要素です.

    .perfume::after {
      content: '';
      display: block;
      box-sizing: border-box;
      width: 203px;
      height: 292px;
      position: absolute;
      top: 4px;
      left: 10px;
      background-color: #e1e1e1;
      border: 1px solid #1919195e;
      border-top-left-radius: 18px 151px;
      border-top-right-radius: 18px 151px;
      border-bottom-left-radius: 34px;
      border-bottom-right-radius: 34px;
      background-repeat: no-repeat;
      background-image: linear-gradient(#ebebeb, #ebebeb), linear-gradient(#2f2f2f, #2f2f2f);
      background-size: 194px 18px, 190px 1px;
      background-position: 3px 0px, 3px 18px;
    }

我々は完了です!🥳
あなたがこれから何かを学んだという望み.
すべてのコード@codepenをチェックしてください
そして、あなたがより多くのCSSスタッフを見たいならば、私について来てください👋