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.
<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.
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.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
