Membuat Desain Post Card dengan CSS
Membuat Desain Post Card dengan CSS - Jika kalian sering melihat desain post card hanya berbentuk selembaran kertas untuk mengirimkan suatu pesan mungkin sudah tidak asing lagi yah ? padahal desain post card bisa kita gunakan untuk desain website tentu penggunaan post card pada suatu website ditentukan dengan kebutuhan masing - masing. Nah, jika kalian ingin membuat desain post card tapi bingung mau membuat desain post card nya seperti apa, berikut akan saya bagikan referensi dan tutorial mengenai desain post card untuk web yaitu Membuat Desain Post Card dengan CSS. Langsung saja kita praktekan membuat desain post card berikut ini.
Langkah 1 : Membuat Desain Post Card dengan CSS
Untuk membuat post card pada kasus ini kita akan butuh bahan yaitu 1 gambar sebagai latar dari post card yang akan kita buat, kalian bisa menggunakan gambar bebas atau bisa kalian download gambarnya dibawah ini.
Langkah 2 : Membuat Desain Post Card dengan CSS
Setelah menyiapkankan gambar sebagai bahannya, selanjutnya kita mulai untuk mengetikan sintak HTML, sebagai struktur awal desain post cardnya.
<div class="wrapper">
<div class="wrapper-text">
<p>
DUMET
</p>
<p class="space">
School.
</p>
</div>
</div>
</body>
Langkah 3 : Membuat Desain Post Card dengan CSS
Langkah selanjutnya, tentu kita akan mengetikan sintak CSS untuk mendesain tampilan post card.
@import url('https://fonts.googleapis.com/css?family=Lilita+One');
body { background: #EDEAE3; }
.wrapper {
width: 600px;
margin: auto;
height: 400px;
position: relative;
background-image: url("portada.jpg");
background-size: 600px;
border-radius: 5px;
}
.wrapper::after {
content: '';
position: absolute;
left: 30px; right: 30px;
top: 30px; bottom: 30px;
border: 8px solid #EDEAE3;
border-radius: 5px;
}
p {
margin: 0;
color: #EDEAE3;
}
.space { letter-spacing: 15px; }
.wrapper-text {
font-family: 'Lilita One', cursive;
font-size: 58px;
font-weight: bold;
background-image: url("portada.jpg");
background-position: bottom left;
background-size: 600px;
position: absolute;
left: 0; right: 290px;
top: 250px; bottom: 0;
padding-left: 27px;
padding-bottom: 15px;
z-index: 9;
border-radius: 5px;
}
Setelah semua sintak kalian ketikan, simpan filenya kemudian silahkan buka pada browser masing - masing dan lihat hasilnya, maka tampilan post card akan seperti gambar berikut.
Bagaimana, cukup mudah bukan ? Baik, sekian referensi dan tutorial mengenai bagaimana Membuat Desain Post Card dengan CSS, semoga bermanfaat dan menginspirasi dalam membuat desain post card untuk halaman website kalian. Selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
