Cara Membuat Teks Split dengan CSS

23/07/2019    Risman Hakim    47     Website

Cara Membuat Teks Split dengan CSS - Banyak sekali hal yang bisa kita lakukan dengan kode CSS, kita tahu bahwa css merupakan bahasa Style Sheet yang tujuan utamanya adalah mengatur layout, mendesain konten, menambahkan efek dan masih banyak lagi hal yang bisa kita lakukan dengan CSS. Pada pembahasan ini saya akan bagikan tutorial sederhana dan ini salah satu yang bisa kita lakukan dengan CSS adalah mendesain elemen teks, yaitu tutorial bagaimana Cara Membuat Teks Split dengan CSS.

Baik, mari kita mulai tutorial membuat teks split dengan membuat file html terlebih dahulu, kalian bisa membuat file dengan nama index.html. Kemudian didalam nya kita akan ketikan kode HTML tentunya dengan membuat elemen teks yang akan dijadikan objek teks split.

<body>
    <div class="title">DUMETSchool.</div>
</body>

Setelah membuat elemen teks, selanjtunya kita akan desain elemen teks tersebut dengan kode CSS untuk dijadikan teks split. Silahkan kalian bisa ketikan kode CSS nya berikut ini.

@import url('https://fonts.googleapis.com/css?family=Atomic+Age&display=swap');
body {
    font-family: 'Atomic Age', cursive;
    background: #f1f2f6;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 200px; 
}

.title {
    position: relative;
    color: #0984e3;
    padding: 20px 50px;
}
 
.title:before {
    background: #0984e3;
    color: white;
    content: 'DUMETSchool.';
    overflow: hidden;
    position: absolute; 
    color: #f1f2f6; 
    top: 0;  
    left: 0;
    padding: 20px 50px;  
    clip-path: polygon(0% 0% , 50% 0%, 50% 100%, 0% 100%);
    border-radius: 25px 0 0 25px;

Setelah mengetikan semua kode HTML dan CSS, silahkansimpan kembali file index.html nya kemudian kalian bisa buka dibrowser masing - masing untuk melihat hasil akhir. Selesai

Nah, dengan menambahkan sedikit desain pada suatu elemen dengan CSS tentu elemen itu mempunyai style tersendiri. Baik saya cukupkan tutorial sederhana tentang Cara Membuat Teks Split dengan CSS semoga tutorial ini menjadi bahan belajar dan referensi dalam membuat desain pada suatu elemen. Selamat mencoba dan sampai jumpa lagi ditutorial selanjutnya :) 

Web Design

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