Cara Mudah Membuat Teks Split
15/06/2020 Risman Hakim 1159 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.
<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.
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
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
