Cara Membuat Efek Pita pada Gambar

28/08/2018    Risman Hakim    540     Website

Cara Membuat Efek Pita pada Gambar - Ada banyak sekali efek yang bisa kita buat dengan menggunakan CSS, mulai dari yang sederhana sampai efek yang sangat bagus dan menarik bisa kita buat hanya dengan CSS. Misalnya saja efek 3D teks, efek warna dan efek lainnya, kali ini saya akan bagikan tutorial mengenai efek pada CSS yakni bagaimana Cara Membuat Efek Pita pada Gambar. Buat kalian yang ingin mencoba membuatnya silahkan simak langkah - langkahnya berikut ini.

Langkah 1 : Cara Membuat Efek Pita pada Gambar

Baik kita mulai praktek membuat efek pita dengan membuat struktur HTML terlebih dahulu, namun sebelum mengetikan sintak HTML nya kita butuh satu buah gambar sebagai objek nya, silahkan persiapkan dahulu gambar nya barulah setelah itu ketikan sintak HTML berikut.

<body>
    <div class="pita1 pita2">
      <img src="iamges.jpeg" />
    </div>
</body>

Langkah 2 : Cara Membuat Efek Pita pada Gambar

Langkah selanjutnya barulah kita desain tampilan gambar dan tentunya membuat efek pita yang menempel pada gambar, untuk itu silahkan ketikan sintak CSS untuk membuat efek pita pada gambar.

body {
    padding: 40px;
    background: #1e272e;
}
.pita1 {
    position: relative;
    text-align: center;
    display: inline-block; *display: inline; zoom: 1;
}
.pita2:before,
.pita2:after {
    content: "";
    display: block;
    width: 100px;
    height: 30px;
    position: relative;
    top: 20px;
    margin: auto;
    background: rgba(186, 62, 97, 0.5);
}
.pita1 img {
    border: 8px solid #ddd;
    margin: 0 20px;
    width: 400px;
}

.pita2:before,
.pita2:after {
    position: absolute;
    top: 10px;
}
.pita2:before {
    left: 0;
    transform: rotate(-45deg);
}
.pita2:after {
    top: inherit;
    bottom: 10px;
    right: 0;
    transform: rotate(-35deg);
}

Setelah semuanya selesai diketikan sintak diatas, selanjutnya simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya. Maka hasil akhirnya akan terlihat seperti pada gambar berikut.

Cara Membuat Efet Pita pada Gambar

Baiklah, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Efek Pita pada Gambar, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More