Cara Membuat Efek Border Circle

Cara Membuat Efek Border Circle - Saat ini CSS sudah wajib penggunaanya jika ingin membuat halaman website dan desain. Dengan CSS banyak sekali kreasi elemen yang bisa kita buat dengan CSS seperti desain card, efek hover dan animasi sederhana. Nah, Kali ini saya akan kasih contoh kreasi yang bisa kita buat dengan CSS yakni bagaimana Cara Membuat Efek Border Circle, buat kalian yang ingin mencba membuatnya bisa mengikuti langkah - langkahnya berikut ini.

Baiklah langkah pertama untuk membuat efek border circle adalah membuat struktur atau elemen yang akan dikenai efek border yaitu elemen circle dengan HTML seperti berikut ini.

<body>
    <div class="container">
        <div class="box">
            <div class="content">
                <h2>Title..</h2>
                <p>Kursus Website, Digital Marketing & Desain Grafis</p>
              </div>
        </div>

        <div class="box">
            <div class="content">
                <h2>Title..</h2>
                <p>Kursus Website, Digital Marketing & Desain Grafis</p>
            </div>
        </div>
      
        <div class="box">
              <div class="content">
                <h2>Title..</h2>
                <p>Kursus Website, Digital Marketing & Desain Grafis</p>
              </div>
          </div>
    </div>
</body>

Setelah membuat struktur seperti diatas, langkah selanjutnya adalah mendesain dan membuat efek border circle dengan kode CSS berikut.

@import url('https://fonts.googleapis.com/css?family=Gayathri&display=swap');

  * {margin: 0;padding: 0;}

  body {
    font-family: 'Gayathri', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #00363d;
  }

  .container {
    position: relative;
    width: 60%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 70px;
  }

  .container .box::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: -2px;
    left: -2px;
    border-radius: 50%;
    transform: skew(2deg, 3deg);
    transition: .5s;
  }

  .container .box:hover:before {
    transform: skew(-2deg, -3deg);
  }

  .container .box {
    position: relative;
    color: #fff;
    height: 330px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    background-color: #00363d;
  }

  .container .box:nth-child(1):before {
    background: linear-gradient(to right, #00c3ff, #ffff1c);
  }

  .container .box:nth-child(2):before {
    background: linear-gradient(to right, #ef32d9, #89fffd);
  }

  .container .box:nth-child(3):before {
    background: linear-gradient(to right, #e96443, #904e95);
  }

  .content {
    padding: 0 40px;
    position: relative;
    text-align: center;
  }

  .content h2 {
    font-size: 30px;
    margin-bottom: 30px;
  }

  .content p {
    letter-spacing: 1px;
    font-size: 14px;
  }

Setelah semua kode HTML dan CSS telah diketikan semua, silahkan simpan filenya kemudian kalian bisa melihat hasil akhirnya dibrowser masing - masing, maka hasil akhir efek border circle akan terlihat seperti gambar dibawah ini.

Cara Membuat Efek Border Circle

Baik, saya cukupkan tutorial bagaimana Cara Membuat Efek Border Circle, semoga bermanfaat dan bisa menjadi referensi dalamn mendesain dengan CSS. Selamat mencoba :)

28 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat