Cara Membuat Sticker dengan CSS3

Cascading style sheet (CSS3) merupakan salah satu bahasa desain web yang berguna untuk mendesain tampilan website, dengan CSS3 kita bisa membuat sebuah layout web, membuat efek, animasi dan lain sebagainya. Salah satu contoh sederhana berikut ini adalah bagaimana kita bisa membuat sticker dengan menggunakan CSS3. Penasaran seperti apa cara membuat nya ? Simak tutorial Cara Membuat Sticker dengan CSS3 berikut ini.

Sebelum kepada tahap mendesain tampilan sticker, terlebih dahulu kita akan membuat struktur sederhana dengan HTML 5 berikut untuk membuat objek dari sticker.

<div class="sticker">
     <h1>CSS</h1>
</div>

Setelah membuat objek pada sticker, selanjutnya adalah pada tahapan desain sticker yakni dengan kode CSS3 berikut.

body {
  margin: 0;
  padding: 0;
  height: 1px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  grid-template-areas: ". . ." ". sticker ." ". . .";
}

.sticker {
  grid-area: sticker;
  background: black;
  height: 300px;
  width: 300px;
  position: relative;
  background-color: #3498db;
  overflow: hidden;
  font-family: sans-serif;
  z-index: -3;
}

h1 {
  position: absolute;
  margin: 0;
  font-size: 150px;
  color: white;
  font-weight: bold;
  bottom: -40px;
  right: -25px;
}

h1:after {
  content: "CSS";
  z-index: -2;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  text-shadow: -5px -3px 0 #2980b9;
}

h1:before {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
  content: '';
  background-color: #2c3e50;
  display: block;
  z-index: -1;
  transform-origin: 0, 0;
  transform: translate(8px, 10px) rotate(15deg);
}

Setelah semua kode HTML 5 dan CSS3 diketikan, langkah selanjutnya simpan filenya kemudian silahkan buka pada browser masing-masing dan lihat hasilnya. Maka akan terlihat tampilan sticker seperti dibawah ini.

Nah, Dengan kemampuan CSS3 inilah kita bisa memanipulasi berbagai macam objek yang kita inginkan salah satunya contoh diatas dengan kita memainkan sedikit warna dan posisi objek maka kita bisa membuat sticker sederhana dengan CSS3. Baiklah cukup sekian tutorial sederhana mengenai Cara Membuat Sticker dengan CSS3. semoga bermanfaat dan selamat mencoba :)