Membuat Teks Vintage di HTML
Memubuat Text Vintage di HTML dam CSS - Pernah kalian mendengar istilah Vintage ? Vintage merupakan istilah model atau desain yang populer ditahun 20 sampai tahun 60-an. 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.
Hasil Jadi By dari Synatax nya :
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"> LUTHFIAN </div>
</div>
</body>
<div class="wrapper">
<div class="text"> LUTHFIAN </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%);
}
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
Terima Kasih atas Perhatian nya, Minal Aidzin walfaizin :D
Post a Comment