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.

Membuat Desain Post Card dengan CSS

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.

<body>
    <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.

Membuat Desain Post Card dengan CSS

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 :)

19 Februari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat