15 Εμπνευστικές προσεγγίσεις στο CSS
Το HTML θα πάρει μόνο τον σχεδιαστή ιστού μέχρι στιγμής και αν θέλετε να δημιουργήσετε δυναμικό, ελκυστικό, αντιδραστικό σχεδιασμό ιστοσελίδων τότε θα πρέπει να μάθετε και να εφαρμόσετε το CSS. Όχι μόνο μπορείτε να δημιουργήσετε βελτιωμένα στοιχεία σχεδιασμού για τις σελίδες σας, αλλά μπορείτε να περιμένετε να απολαμβάνετε ταχύτερους χρόνους φόρτωσης, ευκολότερη συντήρηση και λιγότερο χρόνο για να δημιουργήσετε νέες σελίδες ή να ενημερώσετε υπάρχουσες σελίδες.
Παρακάτω υπάρχουν 15 από τους καλύτερους διαθέσιμους ιστότοπους CSS που προσφέρουν διαφορετικές προσεγγίσεις στο στάδιο του σχεδιασμού ιστοσελίδων. Συγκεντρώστε έμπνευση, συμβουλές CSS για τη συγκομιδή και τις εφαρμόστε στο δικό σας σχέδιο.
Beercamp
ο Beercamp ο ιστότοπος λειτουργεί όπως ένα αναδυόμενο βιβλίο και οι χρήστες μπορούν να γυρίσουν τις σελίδες για να εμφανίσουν τις αναδυόμενες προβολές. Το σχέδιο 3D μπορεί να περιστραφεί και οι σελίδες να στραφούν κάνοντας κλικ στη σελίδα και στροφή. Ο ιστότοπος είναι διαδραστικός, ελκυστικός, πολύχρωμος και απευθύνεται στους επισκέπτες του.
Inzeit
Παρόλο που φαίνεται να είναι λίγο περισσότερο από μια εξαιρετικά ενδιαφέρουσα στατική ιστοσελίδα Inzeit Αρχική σελίδα κυριολεκτικά ζωντανεύει καθώς ξεκινάτε να μετακινηθείτε προς τα κάτω στη σελίδα. Τα διαφορετικά στρώματα κινούνται σε διαφορετικές κατευθύνσεις και σε διαφορετικές ταχύτητες. Ενώ οι επισκέπτες πρέπει να ενθαρρυνθούν να κάνουν τις σωστές κινήσεις, ο ιστότοπος γίνεται ενεργός καθώς λαμβάνεται δράση, ώστε οι επισκέπτες να επιβραβεύονται για τη λήψη μέτρων.
ShockBlast
Σοβαρές είναι ένας ιστότοπος φωτογραφικής γκαλερί και από τη δεύτερη σελίδα που φορτώνει κάθε σελίδα του ποντικιού βοηθά να φέρει τη σελίδα ζωντανή. Όχι μόνο η αρχική σελίδα εμφανίζει πολλά εξαιρετικά φωτογραφικά δείγματα, αλλά επιτρέπει στο ShockBlast να κατηγοριοποιεί και να προβάλλει φωτογραφίες, καθιστώντας την πλοήγηση απλή και άκρως αποτελεσματική.
TepTek
ο TepTek ο ιστότοπος είναι ένας άλλος που ενσωματώνει μια σειρά από περίπλοκα σχεδιασμένα στρώματα σε ένα ενιαίο σχέδιο. Η αρχική οθόνη αλλάζει κατά την κύλιση προς τα κάτω και καθώς τα πλαίσια κλίνουν προς τα κάτω τη σελίδα, οι αριθμοί σελίδων εμφανίζονται και εξαφανίζονται. Το ασπρόμαυρο χρώμα προσφέρει ένα τραγανό και κομψό φινίρισμα, έτσι ώστε ο επισκέπτης να συγκεντρώνεται πλήρως στο περιεχόμενο.
FineGoods
ο FineGoods ο ιστότοπος έχει μερικές εκπληκτικές εκπλήξεις που σας περιμένουν καθώς περνάτε πάνω από τα συρτάρια πλοήγησης, μετακινηθείτε προς τα κάτω στη σελίδα και προσέχετε ακόμη περισσότερο τις ετικέτες τιμών (κείμενο HTML). Η επιλογή των προϊόντων μπορεί να είναι περιορισμένη αλλά αυτό είναι μέρος του λόγου για τον οποίο ο μοναδικός σχεδιασμός λειτουργεί τόσο καλά.
Envy Labs
Envy Labs είναι ένα από τα αγαπημένα μας. Οι μετασχηματισμοί CSS χρησιμοποιούνται για τη δημιουργία περιστρεφόμενου καρουσέλ και καθώς κάνετε κλικ στα εικονίδια "επόμενου" και "προηγούμενου", βλέπετε το περιστρεφόμενο καρουσέλ μέχρι να εμφανιστεί η επόμενη εικόνα. Το υπόλοιπο της σελίδας είναι ένας σχετικά απλός, αλλά εξαιρετικά αποτελεσματικός σχεδιασμός που χρησιμοποιεί το CSS με διάφορους άλλους τρόπους.
Driver Club
ο Driver Club ο ιστότοπος σχεδιάστηκε για το Ubisoft όταν κυκλοφόρησε το νέο παιχνίδι Driver και μόλις επισκεφτείτε τον ιστότοπο μπορείτε να δείτε τη σύνδεση μεταξύ ιστοτόπου και παιχνιδιού. Μια άλλη μεγάλη χρήση των μετασχηματισμών σημαίνει ότι καθώς μετακινηθείτε προς τα κάτω, ολόκληρη η ιστοσελίδα φαίνεται να έρχεται στη ζωή, ακόμη και δίνοντας την εμφάνιση των κυλιόμενων πιστώσεων.
Mammoth Booth
Mammoth Booth είναι ένα άλλο αγαπημένο και παίζει στη θεωρία ότι όλοι θέλουμε αυτό που δεν πρέπει. Κάντε κλικ στο κουμπί Πυρκαγιά και μια σειρά εικόνων κατακόρυφα στην οθόνη και δημιουργήστε έναν θάλαμο φωτογραφιών. Ο ιστότοπος είναι ένας πολύ καλός τρόπος για να προωθηθεί η υπηρεσία φωτοφωτισμού που προσφέρει η εταιρεία.
Jeclat
Εισάγετε το Jeclat και θα σας προσκαλέσουν να πλεύσετε σε όλο τον κόσμο, να δείτε τα αξιοθέατα και να ανοίξετε πλευρικούς υαλοπίνακες. Η κύλιση στο πλάι είναι ασυνήθιστη για πολλούς χρήστες σε απευθείας σύνδεση τώρα και με την ανάγκη να αρπάξει το άγαλμα που χτίζει ίντριγκα και τη συμμετοχή από το χρήστη πάρα πολύ.
Vacheron Constantin
ο Vacheron Constantin Η ιστοσελίδα είναι στα γαλλικά αλλά αξίζει να την επισκεφθείτε ακόμα κι αν δεν την διαβάσετε. Κάντε κλικ και κρατήστε πατημένο το κουμπί κύλισης στη σελίδα και απολαύστε την προβολή. Μια κομψή ιστοσελίδα που δεν δείχνει μόνο τα εξίσου κομψά ρολόγια, αλλά δείχνει την έμπνευση για τα σχέδια επίσης.
Ανυψώστε το Interactive
Μερικές φορές, η προσπάθεια να ταιριάζει πάρα πολλά στυλ και εφέ σε μία σελίδα μπορεί να αποδειχθεί δαπανηρή καθώς η σελίδα παίρνει μπέρδεμα, αλλά αυτό δεν συμβαίνει με Ανυψώστε το Interactive . Επισκεφθείτε και απολαύστε τα πολλά κόλπα. Ρίξτε μια ματιά στα εφέ τρισδιάστατου βιβλίου καθώς και στην πολυεπίπεδη κίνηση των εικόνων κεφαλίδας.
VZug
ο VZug site είναι ένα δυναμικό χρονικό πλαίσιο. Αντί μια απλή και απλή φωτογραφία που εμφανίζεται σε μια στατική σελίδα, καθώς μετακινηθείτε προς τα κάτω στο δυναμικό χρονοδιάγραμμα, θα δείτε ελκυστικό σχεδιασμό και μια σελίδα σχολιασμού. Ο ιστότοπος έχει ως στόχο να γιορτάσει τα 100 χρόνια της ιστορίας της εταιρείας και ο σχεδιασμός του βοηθάει να το κάνει καλά.
Dego
Όποιος έχει παίξει το παιχνίδι Little Big Planet θα αναγνωρίσει το στυλ της ιστοσελίδας που ανήκει στο Dego γραφείο σχεδιασμού. Η πλοήγηση παίρνει μια φαινομενικά τυχαία κατεύθυνση και θα σας οδηγήσει μέσα από τα πολυάριθμα στάδια που η ομάδα σχεδίασης Dego ισχυρίζεται ότι λαμβάνει τους πελάτες και τους πιθανούς πελάτες της.
WeAreX3
Αυτός ο ιστότοπος είναι ένας μοναδικός τρόπος για μια εταιρεία να αναζητήσει έναν intern. Η ιστορική sci-fi σχεδίαση συνδυάζεται με μια μοναδική οριζόντια σελίδα κύλισης και κάθετα στοιχεία. Οι επισκέπτες παρουσιάζονται πώς να μετακινηθούν οι σελίδες και Χ3 ελπίζει ότι η μοναδική εμφάνιση και τα στοιχεία του site θα προσελκύσουν το είδος του εσωτερικού σχεδιασμού που αναζητούν.
Cymetriq
Cymetriq είναι ένας άλλος ένας εξαιρετικά σχεδιασμένος ιστότοπος χαρτοφυλακίου που συνδυάζει διάφορα στοιχεία και στυλ σε ένα μοναδικό site που αναζητά και ενεργεί. Κάντε κύλιση προς τα κάτω για δείγματα γκαλερί, τοποθετήστε το δείκτη του ποντικιού πάνω στη γραμμή πλοήγησης για στοιχεία CSS και συνεχίστε να μετακινηθείτε από πάνω προς τα κάτω για κάποιο μοναδικό στυλ και σχέδια.
Έχουμε χάσει ένα από τα αγαπημένα σας; Έχετε ξεπεράσει ένα από τα παραδείγματα εδώ; Ενημερώστε μας στα σχόλια.