27 δωρεάν κάρτες HTML και CSS για ιστολόγια, ηλεκτρονικό εμπόριο και άλλα

Κάρτες Hover

Οι διαδικτυακοί πόροι είναι σχεδόν άπειροι, αλλά Η εύρεση τους ποιότητας είναι πραγματικά το δύσκολο πράγμαΑν και ψάχνετε λίγο και διαθέτετε μια καλή λίστα ιστότοπων αφιερωμένων στο σχεδιασμό, τα πράγματα γίνονται πιο εύκολα. Σε μια εποχή που οι γλώσσες όπως το HTML και το CSS είναι σε καλή κατάσταση, η προσέγγιση των δωρεάν πόρων υψηλής ποιότητας απέχει σχεδόν λίγα κλικ.

Θα απαριθμήσουμε μια σειρά από δωρεάν κάρτες σε HTML και CSS που λειτουργούν τέλεια για όλους τους τύπους blog, επιχειρήσεων, ηλεκτρονικού εμπορίου και πολλά άλλα. Μια συλλογή μεγάλου εύρους ώστε να μπορεί να ενσωματωθεί σε κάποια από τις εργασίες που κάνετε για όλους τους τύπους πελατών. Θα το κάνουμε με αυτήν τη λίστα που χρησιμοποιεί το codepen.io ώστε να μπορείτε να αποκτήσετε τον κώδικα τόσο σε HTML όσο και σε CSS.

Διασκέδαση Κάρτας Blog # 1

Διασκέδαση κάρτας

ένα υπέροχη κάρτα σχεδιασμού που λέει σχεδόν όλα την εικόνα που την αντιπροσωπεύει, μπορείτε να περάσετε από το codepen.io για να αποκτήσετε τον αντίστοιχο κώδικα και να τον εγκαταστήσετε στον ιστότοπό σας.

CSS News Cards μόνο CSS

Κάρτα ειδήσεων

Αυτή η κάρτα, με Άγνωστα πράγματα ως φόντο, ξεχωρίζει για την ομαλή κινούμενη εικόνα που αποκαλύπτει το περιεχόμενο. Είναι καθαρό CSS.

Στοιχείο δημοσίευσης ιστολογίου

Ανάρτηση Μια προεπισκόπηση του ιστού φέρνοντας το δείκτη του ποντικιού πάνω του. Έχει CSS και HTML για εύκολη ενσωμάτωση.

Κάρτες ιστολογίου

Κάρτες ιστολογίου

Μια μινιμαλιστική σχεδίαση καρτών blog που ανταποκρίνεται. Γρήγορες και ομαλές κινούμενες εικόνες υψηλής ποιότητας που δεν αφήνουν κανέναν αδιάφορο.

Αποκριτικές επαγγελματικές κάρτες

Αποκριτικές κάρτες

Ξεχωρίζει για το ελαφρύ κινούμενο σχέδιο τοποθετώντας το δείκτη του ποντικιού πάνω από την εικόνα της κάρτας.

Μια άλλη κάρτα ιστολογίου

Κάρτα Hover Blog

Εμφανίζεται το κείμενο της κάρτας όταν αιωρείται στο ίδιο.

Επαγγελματικές κάρτες

Επισκεφτείτε την κάρτα

ένα απλή αλλά τρέχουσα κάρτα επίσκεψη με επίδειξη και κώδικα σε HTML και CSS.

Τρισδιάστατη επαγγελματική κάρτα

3D Flip Card

Αυτή η κάρτα αξίζει 3D animation με HTML και CSS. Κατασκευασμένο από την Elena Nazarova, είναι ιδανικό για μια επαγγελματική κάρτα με χρώμα.

Επαγγελματική κάρτα CSS

Επαγγελματική κάρτα CSS

Μια πολύ εντυπωσιακή επαγγελματική κάρτα στο CSS περιστρέφεται σε 3D για να διευκολύνουμε μια σειρά διευθύνσεων URL που ανταποκρίνονται στο δείκτη του ποντικιού τη στιγμή που το βάζουμε κάτω.

Πλέγματα καρτών

Κάρτα πλέγματος

Μια σειρά από καλά τοποθετημένες κάρτες με ένα εντυπωσιακό σχέδιο. Είναι εκπληκτικό για την απλοϊκή αισθητική του, αλλά με μια καλή επιτυχία στον κώδικα HTML, CSS και SCSS.

Τρισδιάστατες κάρτες αποκαλύπτονται

Τρισδιάστατη κάρτα

Αυτή η σειρά πλεγμάτων καρτών αποκαλύπτει περισσότερες πληροφορίες αυτή τη στιγμή ότι αφήσαμε το ποντίκι στο εικονίδιο με πράσινο χρώμα. Την ίδια στιγμή που αφήνουμε το δείκτη, το υπόλοιπο πλέγμα κινείται ανάλογα.

Κάρτα σχεδίασης αποκριτικού υλικού

Υλικό Σχεδιασμός

Με τη γλώσσα σχεδίασης google, εμφανίζεται αυτή η σειρά καρτών που επισημαίνονται από το εικονίδιο μενού που ανοίγει όλες τις πληροφορίες των ηθοποιών, όπως στην περίπτωση. Όμορφα και διαισθητικά κινούμενα σχέδια με υπέροχη οπτική εμφάνιση.

Πλέγμα κάρτας Flexbox

Flexbox

Πρωτότυπο κάρτας στο ίδιο ύψος που ξεχωρίζει για τη χρήση της μορφής πλέγματος flexbox. Μια άλλη από τις τιμές της είναι η χρήση αναλογιών διαστάσεων CSS και φίλτρων CSS.

Κάρτες Clash of Clans

Σύγκρουση των Clans

El δημοφιλές παιχνίδι για κινητά έχει τις κάρτες του σε HTML και CSS που δημιουργήθηκαν από τον Andre Madarang. Μπορούμε να περάσουμε μεταξύ τους με μια ακριβή και εξαιρετικά οπτική κίνηση.

Κάρτες διαφανειών για το ηλεκτρονικό εμπόριο

Κάρτα προϊόντος

Με ένα ευκίνητη κίνησηΑυτές οι κάρτες σας ενθαρρύνουν να αναζητήσετε τα στοιχεία τους για να μάθετε τι είναι. Με εξαιρετικό σχεδιασμό από τον Omar Dsoky.

Σχεδιασμός διασύνδεσης - Κάρτα προϊόντος

UI προϊόντος

Μια τέλεια κάρτα για το σχεδιασμό αυτών των προϊόν του ηλεκτρονικού εμπορίου μας. Κατασκευασμένο σε HTML και CSS.

Κάρτα προϊόντος

Προϊόν ECommerce

Από την ίδια κάρτα μπορούμε περνούν πολλές εικόνες για να δείτε καλύτερα το προϊόν. Περιλαμβάνει το κουμπί προσθήκης στο καλάθι και περιέχει κώδικα HTML, CSS και JavaScript.

Κάρτες προϊόντων Flexy

Κάρτα Flexy

Όπως υποδηλώνει το όνομά του, χρησιμοποιεί το flexbox για να δημιουργήσετε μια ενδιαφέρουσα κίνηση όταν κάνουμε κλικ στο κουμπί προσθήκη στο καλάθι.

Αναποδογυρίστε κάρτες

Αναστροφή κάρτας

Λίγος κωδικός για μερικές κάρτες με ομαλή και τέλεια κινούμενη εικόνα. Μέσα σε λίγα λεπτά μπορείτε να τα ενσωματώσετε. Προστέθηκε πρόσφατα στο codepen.

Κάρτες ως κάρτες προϊόντων 3D

Τρισδιάστατη κάρτα

Πρέπει να σημειωθεί ότι αυτές οι κάρτες είναι σαν να είχαμε μια σειρά από χαρτιά σε ένα τραπέζι. Ο δείκτης παραμένει στάση και ζουμ, κάνει κλικ σε καθένα και δείχνει το πίσω μέρος της κάρτας για να εμφανίσει τις πληροφορίες του προϊόντος. Κάνουμε ξανά κλικ και το αφήνουμε όπως ήταν με το μέτωπο. Ιδανικό για εκμάθηση ιδιοτήτων 3D CSS.

Κάρτα Parallax

Κάρτα Parallax

Ένα πολύ οπτικό πείραμα με ένα εντυπωσιακό flip εφέ. Είναι καλύτερα να το βλέπετε να ξέρει για τι μιλάει.

Τοποθετήστε το εφέ για κάρτες

Τοποθετήστε την κάρτα

Ένα απλό αποτέλεσμα αλλά αιωρηθείτε για κάρτες.

Απλό εφέ αιωρήματος

Απλή κάρτα

Εντυπωσιακό μάλλον απλό αποτέλεσμα, αλλά αυτό έχει μεγάλο αποτέλεσμα τη στιγμή που το απεικονίζουμε.

Κάρτες βάθους Parallax

Βάθος παράλλαξης

Αυτές οι κάρτες φέρουν το παράλληλη ιδέα στην κορυφή για να διαμορφώσετε μερικές πολύ εντυπωσιακές κάρτες από το σχεδιασμό. Απλώς πρέπει να το δείτε για να κατανοήσετε καλύτερα την επίδραση που παράγει στον χρήστη όταν επιλέγει μερικές από τις κατηγορίες στο ιστολόγιό μας.

Κάρτα διεπαφής χρήστη για ταινίες

Κάρτα ταινίας

Μια κάρτα από εξαιρετική διάταξη με HTML και CSS.

Κάρτα προφίλ

Κάρτα επαφής

Πολύ καλές κινούμενες εικόνες για μια κάρτα επαφής στην οποία μπορούμε να εφαρμόσουμε την πρόσβαση σε προφίλ κοινωνικών μέσων. HTML και CSS.

Συσκευασμένες κάρτες Polaroid

Polaroid

Με ιδιότητες, φίλτρα και Προσαρμοσμένες μεταβάσεις CSS Δημιουργείται αυτή η σειρά ομαδοποιημένων καρτών Polaroid. μην χάσετε αυτές τις εικόνες SVG στον ιστό.


Το περιεχόμενο του άρθρου συμμορφώνεται με τις αρχές μας συντακτική ηθική. Για να αναφέρετε ένα σφάλμα κάντε κλικ Aquí.

Ένα σχόλιο, αφήστε το δικό σας

Αφήστε το σχόλιό σας

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται με *

*

*

  1. Υπεύθυνος για τα δεδομένα: Miguel Ángel Gatón
  2. Σκοπός των δεδομένων: Έλεγχος SPAM, διαχείριση σχολίων.
  3. Νομιμοποίηση: Η συγκατάθεσή σας
  4. Κοινοποίηση των δεδομένων: Τα δεδομένα δεν θα κοινοποιούνται σε τρίτους, εκτός από νομική υποχρέωση.
  5. Αποθήκευση δεδομένων: Βάση δεδομένων που φιλοξενείται από τα δίκτυα Occentus (ΕΕ)
  6. Δικαιώματα: Ανά πάσα στιγμή μπορείτε να περιορίσετε, να ανακτήσετε και να διαγράψετε τις πληροφορίες σας.

  1.   Cristian dijo

    Θα είναι δυνατή η εισαγωγή οποιασδήποτε από αυτές τις κάρτες σε μια σελίδα με wordpress