Cara Mudah Membuat Teks Split

15/06/2020    Risman Hakim    226     Website

Cara Mudah Membuat Teks Split - Pernahkah kalian melihat teks split ? teks split merupakan suatu efek dimana teks akan dibagi dua dengan background sebagai pemisah. Nah, dengan CSS kita bisa dengan mudah membuat teks split, dengan variasi teks split tentunya desain akan terlihat lebih menarik ya. Bagi kalian yang ingin mencoba membuat teks split bisa kalian ikuti langkah - langkahnya berikut ini.

Langkah pertama untuk membuat teks split adalah membuat elemen teks, silahkan kalian ketikan sintak HTML untuk membuat elemen teksnya.

<body>
    <div class="wrapper">
        <div class="split-text">
            <h1>DUMETSCHOOL.</h1>
            <h1>DUMETSCHOOL.</h1>
        </div>
    </div>
</body>

Setelah membuat elemen teks seperti diatas, langkah selanjutnya adalah mengatur dan membuat teks split, untuk membuatnya kalian bisa ketikan sintak CSS berikut ini.

*, *:after, *:before {
    box-sizing: border-box;
}
body {
    font-family: "Inter", sans-serif;
}
.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.split-text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
h1 {
    font-size: 8vw;
    font-weight: 900;
    background-color: #2b67fe;
    color: #fff;
    display: block;
    padding: 0.5em;
}
h1:nth-child(2) {
    position: absolute;
    background-color: #fff;
    color: #2b67fe;
    clip-path: inset(-1% -1% 50% -1%);
}
p {
    font-size: 2vw;
    font-weight: 900;
    margin-top: 1em;
    text-align: center;
}
p span {
    display: block;
    transform: rotate(90deg);
    margin-top: 0.25em;
}

Jika sudah kalian ketikan semua sintak diatas, langkah terakhir simpan filenya kemudian kalian buka pada browser masing - masing untuk melihat hasil akhirnya.

Nah, itulah Cara Mudah Membuat Teks Split, cukup mudah bukan ? Baiklah, sekian tutorial dumetschool kali ini, semoga bermanfaat dan 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