Οι διαδικτυακοί πόροι είναι σχεδόν άπειροι, αλλά Η εύρεση τους ποιότητας είναι πραγματικά το δύσκολο πράγμαΑν και ψάχνετε λίγο και διαθέτετε μια καλή λίστα ιστότοπων αφιερωμένων στο σχεδιασμό, τα πράγματα γίνονται πιο εύκολα. Σε μια εποχή που οι γλώσσες όπως το HTML και το CSS είναι σε καλή κατάσταση, η προσέγγιση των δωρεάν πόρων υψηλής ποιότητας απέχει σχεδόν λίγα κλικ.
Θα απαριθμήσουμε μια σειρά από δωρεάν κάρτες σε HTML και CSS που λειτουργούν τέλεια για όλους τους τύπους blog, επιχειρήσεων, ηλεκτρονικού εμπορίου και πολλά άλλα. Μια συλλογή μεγάλου εύρους ώστε να μπορεί να ενσωματωθεί σε κάποια από τις εργασίες που κάνετε για όλους τους τύπους πελατών. Θα το κάνουμε με αυτήν τη λίστα που χρησιμοποιεί το codepen.io ώστε να μπορείτε να αποκτήσετε τον κώδικα τόσο σε HTML όσο και σε CSS.
Διασκέδαση Κάρτας Blog # 1
ένα υπέροχη κάρτα σχεδιασμού που λέει σχεδόν όλα την εικόνα που την αντιπροσωπεύει, μπορείτε να περάσετε από το codepen.io για να αποκτήσετε τον αντίστοιχο κώδικα και να τον εγκαταστήσετε στον ιστότοπό σας.
CSS News Cards μόνο CSS
Αυτή η κάρτα, με Άγνωστα πράγματα ως φόντο, ξεχωρίζει για την ομαλή κινούμενη εικόνα που αποκαλύπτει το περιεχόμενο. Είναι καθαρό CSS.
Στοιχείο δημοσίευσης ιστολογίου
Μια προεπισκόπηση του ιστού φέρνοντας το δείκτη του ποντικιού πάνω του. Έχει CSS και HTML για εύκολη ενσωμάτωση.
Κάρτες ιστολογίου
Μια μινιμαλιστική σχεδίαση καρτών blog που ανταποκρίνεται. Γρήγορες και ομαλές κινούμενες εικόνες υψηλής ποιότητας που δεν αφήνουν κανέναν αδιάφορο.
Αποκριτικές επαγγελματικές κάρτες
Ξεχωρίζει για το ελαφρύ κινούμενο σχέδιο τοποθετώντας το δείκτη του ποντικιού πάνω από την εικόνα της κάρτας.
Μια άλλη κάρτα ιστολογίου
Εμφανίζεται το κείμενο της κάρτας όταν αιωρείται στο ίδιο.
Επαγγελματικές κάρτες
ένα απλή αλλά τρέχουσα κάρτα επίσκεψη με επίδειξη και κώδικα σε HTML και CSS.
Τρισδιάστατη επαγγελματική κάρτα
Αυτή η κάρτα αξίζει 3D animation με HTML και CSS. Κατασκευασμένο από την Elena Nazarova, είναι ιδανικό για μια επαγγελματική κάρτα με χρώμα.
Επαγγελματική κάρτα CSS
Μια πολύ εντυπωσιακή επαγγελματική κάρτα στο CSS περιστρέφεται σε 3D για να διευκολύνουμε μια σειρά διευθύνσεων URL που ανταποκρίνονται στο δείκτη του ποντικιού τη στιγμή που το βάζουμε κάτω.
Πλέγματα καρτών
Μια σειρά από καλά τοποθετημένες κάρτες με ένα εντυπωσιακό σχέδιο. Είναι εκπληκτικό για την απλοϊκή αισθητική του, αλλά με μια καλή επιτυχία στον κώδικα HTML, CSS και SCSS.
Τρισδιάστατες κάρτες αποκαλύπτονται
Αυτή η σειρά πλεγμάτων καρτών αποκαλύπτει περισσότερες πληροφορίες αυτή τη στιγμή ότι αφήσαμε το ποντίκι στο εικονίδιο με πράσινο χρώμα. Την ίδια στιγμή που αφήνουμε το δείκτη, το υπόλοιπο πλέγμα κινείται ανάλογα.
Κάρτα σχεδίασης αποκριτικού υλικού
Με τη γλώσσα σχεδίασης google, εμφανίζεται αυτή η σειρά καρτών που επισημαίνονται από το εικονίδιο μενού που ανοίγει όλες τις πληροφορίες των ηθοποιών, όπως στην περίπτωση. Όμορφα και διαισθητικά κινούμενα σχέδια με υπέροχη οπτική εμφάνιση.
Πλέγμα κάρτας Flexbox
Πρωτότυπο κάρτας στο ίδιο ύψος που ξεχωρίζει για τη χρήση της μορφής πλέγματος flexbox. Μια άλλη από τις τιμές της είναι η χρήση αναλογιών διαστάσεων CSS και φίλτρων CSS.
Κάρτες Clash of Clans
El δημοφιλές παιχνίδι για κινητά έχει τις κάρτες του σε HTML και CSS που δημιουργήθηκαν από τον Andre Madarang. Μπορούμε να περάσουμε μεταξύ τους με μια ακριβή και εξαιρετικά οπτική κίνηση.
Κάρτες διαφανειών για το ηλεκτρονικό εμπόριο
Με ένα ευκίνητη κίνησηΑυτές οι κάρτες σας ενθαρρύνουν να αναζητήσετε τα στοιχεία τους για να μάθετε τι είναι. Με εξαιρετικό σχεδιασμό από τον Omar Dsoky.
Σχεδιασμός διασύνδεσης - Κάρτα προϊόντος
Μια τέλεια κάρτα για το σχεδιασμό αυτών των προϊόν του ηλεκτρονικού εμπορίου μας. Κατασκευασμένο σε HTML και CSS.
Κάρτα προϊόντος
Από την ίδια κάρτα μπορούμε περνούν πολλές εικόνες για να δείτε καλύτερα το προϊόν. Περιλαμβάνει το κουμπί προσθήκης στο καλάθι και περιέχει κώδικα HTML, CSS και JavaScript.
Κάρτες προϊόντων Flexy
Όπως υποδηλώνει το όνομά του, χρησιμοποιεί το flexbox για να δημιουργήσετε μια ενδιαφέρουσα κίνηση όταν κάνουμε κλικ στο κουμπί προσθήκη στο καλάθι.
Αναποδογυρίστε κάρτες
Λίγος κωδικός για μερικές κάρτες με ομαλή και τέλεια κινούμενη εικόνα. Μέσα σε λίγα λεπτά μπορείτε να τα ενσωματώσετε. Προστέθηκε πρόσφατα στο codepen.
Κάρτες ως κάρτες προϊόντων 3D
Πρέπει να σημειωθεί ότι αυτές οι κάρτες είναι σαν να είχαμε μια σειρά από χαρτιά σε ένα τραπέζι. Ο δείκτης παραμένει στάση και ζουμ, κάνει κλικ σε καθένα και δείχνει το πίσω μέρος της κάρτας για να εμφανίσει τις πληροφορίες του προϊόντος. Κάνουμε ξανά κλικ και το αφήνουμε όπως ήταν με το μέτωπο. Ιδανικό για εκμάθηση ιδιοτήτων 3D CSS.
Κάρτα Parallax
Ένα πολύ οπτικό πείραμα με ένα εντυπωσιακό flip εφέ. Είναι καλύτερα να το βλέπετε να ξέρει για τι μιλάει.
Τοποθετήστε το εφέ για κάρτες
Ένα απλό αποτέλεσμα αλλά αιωρηθείτε για κάρτες.
Απλό εφέ αιωρήματος
Εντυπωσιακό μάλλον απλό αποτέλεσμα, αλλά αυτό έχει μεγάλο αποτέλεσμα τη στιγμή που το απεικονίζουμε.
Κάρτες βάθους Parallax
Αυτές οι κάρτες φέρουν το παράλληλη ιδέα στην κορυφή για να διαμορφώσετε μερικές πολύ εντυπωσιακές κάρτες από το σχεδιασμό. Απλώς πρέπει να το δείτε για να κατανοήσετε καλύτερα την επίδραση που παράγει στον χρήστη όταν επιλέγει μερικές από τις κατηγορίες στο ιστολόγιό μας.
Κάρτα διεπαφής χρήστη για ταινίες
Μια κάρτα από εξαιρετική διάταξη με HTML και CSS.
Κάρτα προφίλ
Πολύ καλές κινούμενες εικόνες για μια κάρτα επαφής στην οποία μπορούμε να εφαρμόσουμε την πρόσβαση σε προφίλ κοινωνικών μέσων. HTML και CSS.
Συσκευασμένες κάρτες Polaroid
Με ιδιότητες, φίλτρα και Προσαρμοσμένες μεταβάσεις CSS Δημιουργείται αυτή η σειρά ομαδοποιημένων καρτών Polaroid. μην χάσετε αυτές τις εικόνες SVG στον ιστό.
Θα είναι δυνατή η εισαγωγή οποιασδήποτε από αυτές τις κάρτες σε μια σελίδα με wordpress
ΤΟΥΣ ΑΓΑΠΩ