リアルなCSSアートハッキング

現実的なCSSアートを作成するの秘密は、それは私が約束する簡単です!
私はそれが簡単に動作例を使用して現実的なCSSのアートを作ることがいかに簡単かを示すつもりです.CSSのアートは、私は確かに行くことをお勧めしますので、あなたのCSSのスキルと知識を練習するために本当に楽しい方法でありえます!
オブジェクトの選択
あなたが描画するオブジェクトを選択するときは、図形があまりにも複雑になりたくない.あなたはいくつかの簡単な形にオブジェクトを破る必要がある、これらの単純な図形はあなたのdivされます.

画像をトレース
オブジェクトを決定した後、どのようにそれを壊そうとしている、それはコーディングを開始する時間です.あなたの人生を100 %簡単にするために私はすべてのあなたのdivのコンテナを作成することをお勧めし、あなたがそれをトレースすることができますので、あなたの背景画像として描画されているオブジェクトを設定することをお勧めします.これにより、位置と取得の割合がはるかに容易になります.容器にそれらを置くことも位置決めに役立ちます.

.container {
    width: 700px; /* size of container */
    height: 700px;
    background-image: url(https://cdn.huntoffice.co.uk/images/D/can-of-coke.jpg); /* insert image to trace */
    background-size: 700px; /* you may need to play around with the sizing to fit container */
    background-repeat: no-repeat;
    border: 10px solid black;  /* so you can see your canavas */
 position: relative; /* important for positioning*/
}

あなたの形のdivを作成する
トレース各図形のランダムな背景色と不透明度0.5を設定して、各図形をトレースします.あなたが何をやっているか見ることができるこの方法.下記を参照.

.top {
    /* size */
    width: 55%;
    height: 2.5%;
    /* position */
    position: absolute;
    left: 24%;
    top: 0.3%;
    /* shape */
    border-radius: 20%;
    /* to help you trace - will remove */
    background-color: green;
    opacity: 0.5;    
}

あなたが探している形を得ることができる多くの方法があります.私は簡単に別の形を作成する方法を教えるいくつかのリソースをリンクしている.

CSSで作られる簡単な形
https://css-tricks.com/the-shapes-of-css/

クリップ・パス
https://bennettfeely.com/clippy/ ボーダー半径
https://codepen.io/pmk/pen/zGGXKW 下記のリソースを使用してコークスの形状を完成させました.

.top {
    /* size */
    width: 55%;
    height: 2.5%;
    /* position */
    position: absolute;
    left: 24%;
    top: 0.3%;
    /* shape */
    border-radius: 20%;
    /* to help you trace - will remove */
    background-color: green;
    opacity: 0.5;    
}



.middle:before {
    content: "";
    /* size */
    width: 95%;
    height: 12%;
    /* position */
    position: absolute;
    left: 2%;
    top: -12%; 
    /* shape */
    clip-path: polygon(8% 0%, 91% 0%, 100% 100%, 0% 100%);
    /* to help you trace - will remove */
    background: blue; 
    opacity: 0.8;
}


.middle {
     /* size */
    width: 67%;
    height: 85%;
 /* position */
    position: absolute;
    left: 18%;
    top: 9.5vh; 
     /* shape */
    border-radius: 2% 2% 50% 50% / 49% 50% 7% 7%;
     /* to help you trace - will remove */
    background: rgb(16, 162, 53);
    opacity: 0.5;
}

.base {
    /* size */
    width: 67%;
    height: 5%;
    /* position */
    position: absolute;
    left: 5.4vw;
    top: 91%;
    /* shape */
    border-radius: 0% 1% 50% 50% / 49% 50% 57% 57%;
    /* to help you trace - will remove */
    background: blue;
    opacity: 0.5;
}


.base:before {
    content: "";
      /* size */
    width: 90%;
    height: 110%;
     /* position */
    position: absolute;
    left: 5%;
    top: 50%; 
    /* shape */
 border-radius: 50%;
 clip-path: polygon(0 0, 100% 1%, 90% 100%, 10% 100%);
 /* to help you trace - will remove */
   background: red;
   opacity: 0.5;
}

正しい色の選択

私は非常にシンプルで効果的なハックあなたのイメージのための右の色を得るために-はい、イメージカラーピッカー:
https://imagecolorpicker.com/en/
あなたが主なコカコーライメージから見ることができるように、我々は若干の勾配(ほとんどの物のような)があります.このグラデーションを正しく得ることは、オブジェクトを本物に見えさせる鍵です!上にリンクされたイメージカラーツールとこのCSSグラデーションジェネレータを使用して、完全なグラデーションを取得します.
https://cssgradient.io/
要約するには-カラーピッキングツールを使用して、個別に元の画像からグラデーションの各色を選択し、CSSで完璧な色を作成するためにグラデーションジェネレータに追加します.あなたの形のdivsとヴィオラにこのコードを加えてください!

例:

.middle {
     /* size */
    width: 67%;
    height: 85%;
 /* position */
    position: absolute;
    left: 18%;
    top: 9.5vh; 
    z-index: 6;
     /* shape */
    border-radius: 2% 2% 50% 50% / 49% 50% 7% 7%;
     /* color */
     background: linear-gradient(90deg, rgba(162,16,33,1) 0%, rgba(219,33,40,1) 10%, rgba(194,33,39,1) 22%, rgba(232,37,41,1) 31%, rgba(241,79,82,1) 42%, rgba(199,34,41,1) 56%, rgba(240,68,66,1) 71%, rgba(227,34,37,1) 79%, rgba(179,30,34,1) 88%, rgba(148,30,36,1) 100%);
}

影/国境を使用して生活にイメージをもたらす
ボックスの影を使用してボーダーとシェーディングを追加すると、本当にそれがより多くの3 Dを見て生活にあなたのイメージをもたらすでしょう.このサイトを使用して、すぐにボックスシャドウを生成することをお勧めします.
https://www.cssmatic.com/box-shadow

ここでは、影や境界線を追加しているように形状を見ることができると定義されて3 D.
今すぐに行くことができますし、任意の詳細を追加するには、私のために、私はちょうど上にSVGのロゴを追加し、これは非常に効果的に働いた.したら別のソフトドリンクを作るために別の色で遊ぶことができる形を持っている!
最終結果

うまくいけば、私はそれを壊す方法を説明したので、あなた自身のcssobjectsを作ることができます.私は正直にこれを行うことが大好き、それは100 %私の毎日のCSSのスキルを向上させた.


ᴇ甘川ᴇ ♡
@ elliechen html

R 2 Day 8 -純粋なCSSコークスとペプシ缶-私がそれがとても楽しいとわかるので、もう一つのCSSは描きます!また、いくつかのウェブサイトのレイアウトを練習している私のコードを確保しようとして効率的かつ理解している!
午後16時04分- 2020年5月26日
105
1159
免責事項:私は専門家ではないと私はちょうど楽しみのためにこれを行う注意してください.これは、このチュートリアルの目的のための非常に簡単な例です.あなたが助けを必要とするか、より複雑なオブジェクトが壊れているのを見たいと思うならば、私にTwitterで知らせてください