2.14.2015

Bagaimana Cara Membuat Heart Shape Dengan CSS3?


Tidak sengaja saya menemukan sebuah artikel yang membahas tentang pembuatan bentuk hati (heart shape) dengan menggunakan CSS3. Setelah dibaca, saya sadar bahwa banyak hal yang bisa dilakukan dengan CSS terutama CSS3, dan pada artikel ini, kita akan membuat heart shape dengan menggunakan fitur pseudo-element pada CSS3. (Baca tentang pseudocode-element disini.).


Artikel ini tidak ada kaitannya dengan hari Valentine.

Step 1

Buatlah sebuah elemen div dengan menambahkan id="heart" pada div tersebut, lalu pasangkan code CSS dibawah ini:

#heart{
    width: 100px;
    height: 90px;
    margin-top: 10px;
    position: relative;
}

Step 2

Lalu kita buat sebuah kotak dengan bulatan diatasnya menggunakan pseudocode #heart:before seperti dibawah ini:

#heart:before{
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 52px;
    height: 80px;
    background: red; /* assign a nice red color */
    border-radius: 50px 50px 0 0; /* make the top edge round */
}

Bila dilihat hasilnya, akan seperti ini:








Step 3

Buatlah object tersebut berotasi sebanyak -45 derajat:

#heart:before{
    -webkit-transform: rotate(-45deg); /* 45 degrees rotation counter clockwise */
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%; /* Rotate it around the bottom-left corner */
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}

lalu hasilnya seperti ini:

Sudah terbayangkah langkah selanjutnya? YA! buatlah object kedua dengan menggunakan pseudocode #heart:after. Secara umum, style nya sama dengan #heart:before, namun untuk object yang kedua ini, kita merotasi nya sebanyak 45 derajat.

Hasil akhirnya akan seperti ini:

Semoga bermanfaat.
Anda bisa melihat full source code nya disini.

Sumber: http://stackoverflow.com/a/17386187
Posted in 

2 comments:

  1. Wah, infonya lumayan bagus nih :D
    ternyata bisa juga ya lewat css3 Gue sih, biasanya pake font awesome :)

    ReplyDelete
    Replies
    1. iya gan, ane juga biasa pake font awesome, mantap soalnya, ringan, ga ribet...
      ini cuman berbagi pengetahuan aja, kalo di css itu ada :before sama :after hha

      Thanks gan

      Delete