27 kartu HTML dan CSS gratis untuk blog, e-commerce, dan lainnya

Sumber daya online hampir tidak terbatas, tetapi menemukan kualitas mereka benar-benar hal yang sulitMeskipun mencari sedikit dan memiliki daftar situs web bagus yang didedikasikan untuk desain, segalanya menjadi lebih mudah. Pada saat bahasa seperti HTML dan CSS sedang dalam kondisi bagus, semakin mendekati sumber daya gratis dan berkualitas tinggi hanya dengan beberapa klik saja.

Kami akan membuat daftar serangkaian kartu gratis dalam HTML dan CSS yang sangat cocok untuk semua jenis blog, bisnis, e-commerce, dan banyak lagi. Koleksi jarak jauh sehingga dapat digabungkan ke dalam beberapa pekerjaan yang Anda lakukan untuk semua jenis klien. Mari kita lakukan dengan daftar ini yang menggunakan codepen.io sehingga Anda bisa mendapatkan kode dalam HTML dan CSS.

Kesenangan Kartu Blog # 1

sebuah kartu desain yang bagus yang mengatakan hampir semua gambar yang mewakilinya, Anda dapat pergi ke codepen.io untuk mendapatkan kode yang sesuai dan menginstalnya di situs web Anda.

Kartu Berita CSS hanya CSS

Kartu ini, dengan Stranger Things sebagai latar belakang, menonjol karena animasinya yang halus yang menampilkan konten. Ini adalah CSS murni.

Item Posting Blog

Pratinjau web dengan mengarahkan penunjuk mouse ke atasnya. Ini memiliki CSS dan HTML untuk memudahkan penggabungan.

Kartu blog

Desain kartu blog responsif minimalis. Animasi cepat dan halus berkualitas tinggi yang tidak membuat siapa pun acuh tak acuh.

Kartu nama yang responsif

Menonjol sedikit animasi dengan mengarahkan kursor mouse ke atas gambar kartu.

Kartu blog lain

Muncul teks kartu saat melayang pada bagian yang sama.

Kartu nama

sebuah sederhana namun kartu terkini kunjungi dengan demo dan kode dalam HTML dan CSS.

Kartu bisnis 3D

Kartu ini sangat berharga animasi 3D dengan HTML dan CSS. Dibuat oleh Elena Nazarova, sangat cocok untuk kartu nama dengan warna mencolok.

Kartu bisnis CSS

Kartu nama yang sangat mencolok di CSS itu berputar dalam 3D untuk memberi jalan bagi rangkaian alamat URL yang merespons penunjuk tetikus pada saat kami meletakkannya.

Kisi kartu

Serangkaian kartu yang ditempatkan dengan baik dengan desain yang menarik. Ini mengejutkan karena estetika simplistiknya, tetapi dengan sukses bagus dalam kode HTML, CSS dan SCSS.

Kartu 3D terungkap

Rangkaian kisi kartu ini mengungkapkan lebih banyak informasi saat ini kami meninggalkan mouse di atas ikon hijau. Pada saat yang sama kita meninggalkan penunjuk, sisa grid bergerak sesuai.

Kartu Desain Material Responsif

Dengan bahasa desain google, rangkaian kartu ini muncul yang menonjol untuk ikon menu yang membuka semua informasi aktor seperti pada contoh kasus. Animasi yang indah dan intuitif dengan tampilan visual yang bagus.

Kisi kartu Flexbox

Prototipe kartu pada ketinggian yang sama dengan mereka karena menggunakan format grid flexbox. Nilai lainnya adalah penggunaan rasio aspek CSS dan filter CSS.

Kartu Clash of Clans

El game seluler populer memiliki kartunya dalam HTML dan CSS yang dibuat oleh Andre Madarang. Kita bisa melewatinya dengan animasi yang presisi dan sangat visual.

Kartu geser untuk eCommerce

Dengan animasi tangkas, kartu-kartu ini mendorong Anda untuk mencari elemen-elemennya untuk mencari tahu tentang apa mereka. Dengan desain hebat dari Omar Dsoky.

Desain Antarmuka - Kartu Produk

Kartu yang sempurna untuk mendesainnya produk eCommerce kami. Dibuat dengan HTML dan CSS.

Kartu produk

Dari kartu yang sama kita bisa berikan beberapa gambar untuk melihat produk dengan lebih baik. Ini termasuk tombol tambahkan ke keranjang dan berisi kode HTML, CSS dan JavaScript.

Kartu Produk Flexy

Seperti namanya, menggunakan flexbox untuk membuat animasi yang menarik saat kita mengklik tombol add to cart.

Balik kartu

Kode kecil untuk beberapa kartu dengan halus dan animasi yang sempurna. Dalam hitungan menit Anda bisa memasukkannya. Baru ditambahkan ke codepen.

Kartu sebagai Kartu Produk 3D

Perlu dicatat bahwa kartu-kartu ini seolah-olah kami memiliki serangkaian kartu di atas meja. Penunjuk kiri dan mereka memperbesar, mengklik masing-masing, dan menunjukkan bagian belakang kartu untuk menampilkan informasi produk. Kami mengklik lagi dan membiarkannya seperti sebelumnya. Sempurna untuk mempelajari properti 3D CSS.

Kartu Parallax

Eksperimen yang sangat visual dengan a efek flip yang eye-catching. Lebih baik Anda melihatnya untuk mengetahui apa yang dibicarakannya

Efek hover untuk kartu

Efek sederhana tapi hover untuk menarik perhatian tentang kartu.

Efek hover sederhana

Efek mencolok agak sederhana, tetapi itu memiliki efek yang besar pada saat kita memvisualisasikannya.

Kartu Kedalaman Parallax

Kartu-kartu ini mengandung konsep paralaks ke atas untuk membentuk beberapa kartu yang sangat mencolok dengan desain. Anda hanya perlu melihatnya untuk lebih memahami efek yang dihasilkannya pada pengguna saat Anda memilih beberapa kategori di blog kami.

Kartu UI untuk film

Kartu tata letak hebat dibuat dengan HTML dan CSS.

Kartu profil

Sangat animasi yang bagus untuk kartu kontak di mana kami dapat menerapkan akses ke profil media sosial. HTML dan CSS.

Kartu bundel polaroid

Dengan properti, filter, dan Transisi kustom CSS Seri kartu yang dikelompokkan Polaroid ini dibuat; jangan lewatkan web gambar SVG ini.