Create story

Tidak ada pin yang di tentukan

Home › Css › Cara membuat bentuk ...

Cara membuat bentuk love dengan html dan css bagi pemula

kirmanalidris

24 Juni 2020 296 views

Ehmm.. halo sob gimana nih kabarnya baik?, atau sebaliknya.

Okelah di postingan kali ini saya sendiri akan memberikan bagaimana cara membuat bentuk love dalam html menggunakan css.

Memang sih tutorial kali ini bisa dibilang sangat mudah oleh yang udah berpengalaman dan bermiain css, tapi gimana sebaliknya?.. seperti dengan judul diatas “Membuat bentuk love dengan html dan css pemula”.

Seperti biasa kamu langsung aja buka html editor, atau perhatian langkah berikutnya

– buka html editor
– buatlah rectangle (1 bentuk)
– buatlah rounded (2 bentuk)
– costum CSS

Seperti skema diatas hanyalah 4 langkah mudah saja untuk ynang lebihnya jelasnya mari kita lanjutkan di tahap berikutnya.

dalam antarmuka html editor kita perlu membuat sebuah section dengan class container seperti dibawah ini

<section class="container">
<!-- disinilah elemen dibuat -->
</section>

Setelah melakukannya kamu harus membuat dua lingkaran dengan div yang memiliki class round_l dan round_r dan dalam section, dan berikut html nya.

<div class="radius_l"></div>
<div class="radius_r"></div>

Stelah itu kamu diperlukan untuk membuat sebuah setyle yang berguna untuk menempatkan css agar berfungsi dengan baik.

<style>
/* disini css di buat */
</style>

Maka setelah semuanya di lakukan tampilan nya akan menjadi seperti dibawah ini

<style type="text/css" media="all">
/* Disini css dibuat */
</style>
<section class="container">
<!-- disinilah elemen dibuat -->
  <div class="radius_l"></div>
  <div class="radius_r"></div>
</section>

Nah seperti yang kamu lihat diatas, bahwa kita perlu membuat section dan div, yang memiliki class lainnya menjadi sebuah kotak dan bulatan dengan memberikan height dan width dan seterusnya, dalam antarmuka html editor buatlah css untuk melakukan hal tersebut, silahkan salin dan tempelkan di dalam style tadi kamu buat.

Untuk mempermudah proses nya maka kamu tinggal salin dan tempelkan css dibawah ini ke dalam style dan kemudian pertunju, maka kamu akan melihat bentuk love dengan warna merah.

  .container {
    margin: 80px;
    background: red;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 30px 30px 30px 5px;
  }
  .radius_l {
    background: red;
    width: 200px;
    height: 200px;
    position: absolute;
    border-radius: 100%;
    top: -70px;
    left: px;
    z-index: 2;
  }
  .radius_r {
    background: red;
    height: 200px;
    width: 200px;
    border-radius: 100%;
    position: absolute;
    top: 0px;
    right: -70px;
  }

Kesimpulan

Jadi kesimpulannya amati dan lakukan untuk memahami dan beradaptasi dengan CSS nya.

Bila kurang paham silahkan bertanya melalui komentar dibawah

SHARE

Sembunyikan source code pada blog agar terhindar dari copas Animasi Emoticon peduli menggunakan anime library

Cara membuat bentuk love dengan html dan css bagi pemula

Kesimpulan

Related content

Cara membuat icon sejajar pada posisi li...