Cara Mudah Membuat Teks Split

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

15 Juni 2020

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