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.

Cara Membuat Sticker dengan CSS3
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 :)

4 Agustus 2017

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat