Selamat malam, teman studykuy sudah lama tidak membagi ilmu tentang ngoding, pada arikel ini studykuy akan membagi ilmu cara mudah membuat card HTML membuat card html ini biasanya untuk membuat price list pada sebuah website ecommerce.

Bagaimana apakah kalian sedang mencari cara membuat card HTML dengan css, kali ini artikel yang tepat yukk kita bahas dari awal sampai jadii.

Pertama-tama kalian tentunya harus mempunyai text editor, setelah itu kita membuat file dengan nama index.html dan style.css. Untuk index dan css kita sudah banyak membahas di artikel-artikel sebelumnya.

Cara Mudah Membuat Card HTML

Index

Pertama dan paling utama kita buat file baru dengan nama index.html untuk membuat code nya. kalian bisa tuliskan source code dibawah ini.

Kalian sudah menulisnya atau kalian hanya copypaste, kalau bisa di tulis yah agar melekat pada pikiran kalian.
Disini jangan lupa kalian include kan pada file css kalian dengan cara <link rel=”stylesheet” href=”style.css”> nah jangan lupa untuk di include kan yah. Setelah kalian menulis semua pasti tampilannya berabtakan kan, mari kita rapihkan tampilannya dengan css. Kalian buat file baru dengan nama style.css, untuk tampilan Cara Mudah Membuat Card HTML.

Baca Juga

Apa itu website ? pengertian dan jenis-jenis website.
Codeigniter4 Tutorial #4 : Membuat CRUD dan Validation

Style Css

Mari kita buat untuk tampilan Card html kita dengan css, kalian sudah buat file baru dengan nama style.css, jika sudah kalian tuliskan source code dibawah ini.

Cara Mudah Membuat Card HTML
Selamat malam, teman studykuy sudah lama tidak membagi ilmu tentang ngoding, pada arikel ini studykuy akan membagi ilmu cara mudah membuat card HTML membuat card html ini biasanya untuk membuat price list pada sebuah website ecommerce.

Bagaimana kalian sudah menuliskan nya? mari kita bahas satu persatu dari style yang sudah kita buat di atas. yang pertama tama kita coba bahas * pada css kita akan buat tampilan default kita memuat dulu margun dan pading 0.

.cards{
width: 250px;
height: 400px;
background: #0abde3;
border-radius: 20px;
margin: 20px;
box-shadow: inset 0 0 0 0 goldenrod;
transition: ease-out 1s;
}

Pada ini kita membuat tingginya 400px dan lebarnya 250px pada css nya kita lihat ada box-shadow: inset 0 0 0 0 goldenrod; ini kita membuat agar saat cursor berada di di card nya maka akan animasi warna pada card nya. ini akan membuat animasi dari kanan ke kiri atau dari atas kebawah dan kita membuat tampilan transition: ease-out 1s; ini membuat transisi lama transisi 1 detik dengan transisi keluar.

.cards:hover{
box-shadow: inset 0 450px 0 0 goldenrod;
height: 450px;
width: 300px;
}

Disini kita buat hovernya ketika cursor berada di cardnya maka tinggi dan lebar menjadi 450 dan 300 px. Lalu untuk box-shadow: inset 0 450px 0 0 goldenrod; ini kita atur bagaiman hovernya ini akan melakukan transisi jika inset 0 450px 0 0 goldenrod maka ini akan melakukan transisi dari atas ke bawah jika inset 450px 0 0 0 goldenrod maka ini akan melakukan transisi dari kiri ke kanan

Jika inset 0 0 450px 0 goldenrod maka ini akan melakukan hover efek dari keseluruhan kanan kiri atas bawah akan menuju ke tengah dan warnanya agak samar. lalu jika kita buat inset 0 0 0 450px goldenrod maka tampilan transisi akan melakukan keseluruhan kanan kiri atas bawah akan menuju ke tengah dengan warna yang jelas tidak samar.

Inilah Cara Mudah Membuat Card HTML dan membuat card html css Jika kalian penasaran kalian bisa coba-coba sendiri di rumah yah teman, dan jika kalian ingin dibuat kan satu tutorial kalian bisa request di kolom komentar yang ada di bawah, maka saya akan buatkan tutorial yang kalian minta.

Ya saya rasa sekian tutorial kali ini semoga bisa bermanffat untuk kalian yang sedang belajar manjadi web developer handal, jangan lupa terus mencoba ilmu baru, jangan lelah untuk mencoba, jika gagl terus mencari jalan keluar pasti akan ketemu.

Semangat mengoding terimakasih buat kalian yang sudah membaca sampai habis.


0 Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *