Cara Membuat Efek Border Circle

28/08/2019    Risman Hakim    84     Website

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 :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More