E-ticaretler, bloglar ve daha fazlası için her türden HTML ve CSS'den 27 kart

Çevrimiçi kaynaklar neredeyse sonsuzdur, ancak onları kaliteli bulmak gerçekten zor bir şeyBiraz araştırma yapmanıza ve tasarıma adanmış iyi bir web sitesi listesine sahip olmanıza rağmen, işler daha kolay hale gelir. HTML ve CSS gibi dillerin mükemmel durumda olduğu bir zamanda, yüksek kaliteli ücretsiz kaynaklara yaklaşmak neredeyse birkaç tık uzağınızda.

Bir dizi listeleyeceğiz HTML ve CSS'de ücretsiz kartlar her türden blog, iş, e-ticaret ve çok daha fazlası için mükemmel şekilde uygun. Her türden müşteri için yaptığınız işlerin bir kısmına dahil edilebilmesi için uzun vadeli bir koleksiyon. Bunu codepen.io kullanan bu listeyle yapalım, böylece kodu hem HTML hem de CSS'de alabilirsiniz.

Blog Kartı eğlencesi # 1

bir harika tasarım kartı Bu, onu temsil eden görüntünün neredeyse her şeyi söylüyor, ilgili kodu almak ve web sitenize yüklemek için codepen.io'ya gidebilirsiniz.

Yalnızca CSS Haber Kartları CSS

Bu kart, Arka plan olarak Stranger Things, içeriği ortaya çıkaran akıcı animasyonu ile dikkat çekiyor. Saf CSS'dir.

Blog Gönderisi Öğesi

Fare işaretçisini üzerine getirerek web'in bir önizlemesi. CSS ve HTML'ye sahiptir kolay birleştirme için.

Blog kartları

Minimalist duyarlı bir blog kartı tasarımı. Hızlı ve pürüzsüz animasyonlar kimseyi kayıtsız bırakmayan yüksek kalite.

Duyarlı kartvizitler

İçin öne çıkıyor hafif animasyon fare imlecini kart görüntüsünün üzerine getirerek.

Başka bir blog kartı

Görünür gezinirken kart metni aynısı.

Kartvizitler

bir basit ama güncel kart HTML ve CSS'de demo ve kod ile ziyaret edin.

3D kartvizit

Bu kart değerinde HTML ve CSS ile bir 3D animasyon. Elena Nazarova tarafından yapılmış, renkleri çarpıcı bir kartvizit için mükemmeldir.

CSS kartvizit

CSS'de çok çarpıcı bir kartvizit 3D olarak döner Fare işaretçisine bıraktığımız anda yanıt veren bir dizi URL adresine yol açmak için.

Kart ızgaraları

Bir dizi iyi yerleştirilmiş kart göz alıcı bir tasarım. Basit estetiğiyle şaşırtıcıdır, ancak HTML, CSS ve SCSS kodunda iyi bir isabet vardır.

3D kartlar ortaya çıkıyor

Bu kart ızgaraları serisi şu anda daha fazla bilgi göster yeşil renkli ikona fareyi bıraktık. İşaretçiden ayrıldığımızda aynı zamanda ızgaranın geri kalanı buna göre hareket eder.

Duyarlı Materyal Tasarım Kartı

Birlikte google tasarım diliÖrnek durumda olduğu gibi oyuncuların tüm bilgilerini açan menü simgesiyle öne çıkan bu kart serisi görünür. Harika görsel görünüme sahip güzel ve sezgisel animasyonlar.

Flexbox kart ızgarası

Kart prototipi ızgara flexbox formatını kullanmak için öne çıktıkları aynı yükseklikte. Değerlerinden bir diğeri de CSS en boy oranlarının ve CSS filtrelerinin kullanılmasıdır.

Clash of Clans Kartları

El popüler mobil oyun HTML ve CSS kartlarını Andre Madarang tarafından oluşturulmuştur. Aralarından hassas ve oldukça görsel bir animasyonla geçebiliriz.

E-Ticaret için slayt kartları

Bir ile çevik animasyonBu kartlar, neyle ilgili olduklarını bulmak için öğelerini aramanızı teşvik eder. Omar Dsoky'den harika tasarım.

Arayüz Tasarımı - Ürün Kartı

Bunları tasarlamak için mükemmel bir kart e-Ticaretimizin ürünü. HTML ve CSS'de yapılmıştır.

Ürün kartı

Aynı karttan yapabiliriz birkaç görüntüden geçmek ürünü daha iyi görmek için. Sepete ekle düğmesini içerir ve HTML, CSS ve JavaScript kodunu içerir.

Flexy ürün kartları

Adından da anlaşılacağı gibi, flexbox kullanır Sepete ekle düğmesine tıkladığımızda ilginç bir animasyon oluşturmak için.

Kartları çevir

Düzgün ve pürüzsüz olan bazı kartlar için küçük kod mükemmel animasyon. Birkaç dakika içinde bunları dahil edebilirsiniz. Yakın zamanda codepen'e eklendi.

3D Ürün Kartları olarak Kartlar

Bu kartların olduğu unutulmamalıdır bir masada bir dizi kartımız varmış gibi. İşaretçi sol pozisyondadır ve yakınlaştırır, her birine tıklar ve ürün bilgilerini göstermek için kartın arkasını gösterir. Tekrar tıklıyoruz ve öndeki gibi bırakıyoruz. 3D CSS özelliklerini öğrenmek için mükemmel.