Cara Membuat Efek Skew dengan HTML & CSS

Cara Membuat Efek Skew dengan HTML & CSS - Skew merupakan suatu efek untuk mengubah suatu objek menjadi miring, bisa kekanan atau kekiri. Didalam website biasanya kita bisa menemukan efek ini pada bagian background ataupun pada konten berupa gambar. Nah, buat kalian yang penasaran dan ingin membuat efek ini, akan saya share tutorialnya. Berikut Cara Membuat Efek Skew dengan HTML & CSS.

Pada kasus yang akan kita buat kali ini adalah membuat efek skew pada konten berupa gambar, sebelum kita memulai untuk praktek alangkah baiknya kalian persiapkan bahan - bahannya terlebih dahulu yakni berupa gambar. Setelah itu barulah kita mulai praktek membuat efek skew.

Langkah 1 : Cara Membuat Efek Skew dengan HTML & CSS

Langkah pertama yang harus kita lakukan adalah membuat struktur HTML 5 berikut ini.

<body>
    <div class="wrapper">
        <div class="subWrap">
            <div class="text">
                <h3>Lorem Ipsum</h3>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
            <div class="img">
                <img src="images/img.jpg" />
            </div>
        </div>
        <div class="bg"></div>
    </div>
</body>

Langkah 2 : Cara Membuat Efek Skew dengan HTML & CSS

setelah membuat struktur seperti diatas, selanjutnya barulah kita akan mendesain tampilan untuk efek skew dengan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Kavivanar');
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #2e2e2e;
    color: #1e1e1e;
    font-family: 'Kavivanar', cursive;
}
.wrapper {
    display: flex;
    height: 100vh;
    align-items: center;
    position: relative;

}
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("images/img.jpg");
    background-size: cover;
    -webkit-filter: blur(30px);
    z-index: -999;

}
.subWrap {
    width: 750px;
    display: flex;
    height: 200px;
    transform:translatex(60px);
}
.text {
    width: calc(50% - 90px);
    background-color: #fff;
    line-height: 1.4;
    padding: 10px;
}
.text h3 {
    margin-bottom: 10px;
}
.img {
    border-bottom: 200px solid transparent;
    border-left: 60px solid white;
}
.img img {
    height: 200px;
    position: relative;
    z-index: -999;
    transform: translateX(-50px);
    
}

Setelah semua sintak kalian ketikan, langkah terakhir adalah simpan filenya kemudian silahkan buka pada browser masing - masing dan lihat hasilnya. Maka hasil efek skew akan seperti gambar dibawah ini.

Cara Membuat Efek Skew dengan HTML & CSS

Bagaimana, cukup mudah bukan cara membuatnya ? Baik, cukup sekian tutorial cara membuat efek skew dengan HTML & CSS semoga tutorialnya bermanfaat, selamat mencoba dan sampai ketemu ditutorial selanjtunya.

15 Januari 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