Cara Membuat Desain Teks Vintage dengan CSS

03/06/2018    Risman Hakim    208     Website

Cara Membuat Desain Teks Vintage dengan CSS - Pernahkah kalian mendengar istilah Vintage ? Vintage merupakan istilah model atau desain yang populer ditahun 20 sampai tahun 60-an. Saat ini model desain Vintage diangkat lagi menjadi model baru zaman now, salah satu contohnya adalah pengaplikasian desain Vintage pada tampilan webiste, misalnya desain layout, jenis teks, dan lain sebagainya.

Nah, Pada kesempatan kali ini saya akan bagikan tutorial yang berhubungan dengan desain Vintage yakni bagaimana Cara Membuat Desain Teks Vintage dengan CSS. Buat kalian yang ingin memanipulasi teks tidak ada salahnya untuk mencoba tutorial yang saya bagikan berikut. Baik langsung saja kita praktekan membuat desain teks vintage berikut ini.

Langkah 1 : Cara Membuat Desain Teks Vintage dengan CSS

Langkah pertama, silahkan buat satu file dengan nama index.html kemudian ketikan struktur sintak HTML sederhana berikut untuk membuat konten berupa teks.

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

Langkah 2 : Cara Membuat Desain Teks Vintage dengan CSS

Setelah menentukan dan membuat teks seperti diatas, langkah selanjutnya adalah mendesain teks diatas menjadi teks dengan desain Vintage, untuk itu silahkan ketikan sintak CSS untuk membuat desain teks Vintage berikut ini.

@import url('https://fonts.googleapis.com/css?family=Share');
body {
    background:#f0e8db;
}
.wrapper {
    width:900px;
    margin: auto;
}
.wrapper .text {
    font-family: 'Share', cursive;
    font-size:150px;
    font-weight: bold;
    text-shadow: 5px 5px 0px #f0e8db, 8px 8px 0px #6c5257;
    color: #b33939;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 }

Setelah semua sintak HTML dan CSS telah diketikan, silahkan simpan filenya kemudian jalankan pada browser masing - masing dan lihat hasilnya. Selesai

Cara Membuat Desain Teks Vintage dengan CSS

Bagaimana, cukup mudah buka untuk membuat desain teks vintage dengan CSS ? desain sederhana namun tetap menampilkan kesan teks yang sangat unik. Baiklah cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Desain Teks Vintage dengan CSS, semoga bermanfaat sekaligus menambah referensi dalam membuat desain serta memanipulasi teks, selamat mencoba :)

Artikel, Web Design, HTML CSS, website

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