27 ρυθμιστικά HTML και CSS για να δώσουν στον ιστότοπό σας αυτό το ιδιαίτερο άγγιγμα

Ρυθμιστικό Cupcake

Συνεχίζουμε με έναν γύρο κώδικα CSS και HTML που μπορούν να εφαρμοστούν στον ιστότοπό μας για να του δώσουμε την ειδική πινελιά με την οποία θα το διαφοροποιήσουμε από τα υπόλοιπα. Χάρη στον έλεγχο + c συν τον έλεγχο + v μπορούμε έχετε στον κωδικό μας που θα κάνει τον ιστό έτοιμο για δημοσίευση σε εξέλιξη μετά από ημέρες ή εβδομάδες σε δοκιμές.

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

Οθόνες σε κάρτες

κατά την επιβίβαση

Ένα πολύ διαισθητικό ρυθμιστικό σε HTML και CSS που ασχολείται μεταφέρετε μια σειρά καρτών στον ιστότοπό σας που περνούν από το ένα στο άλλο με ένα κινούμενο σχέδιο με υπέροχο στυλ. Είναι ακριβώς το κινούμενο σχέδιο και η κλίση φόντου που δίνουν αυτό το λεπτό άγγιγμα σε αυτόν τον κώδικα HTML και CSS που ξεχωρίζει επίσης για λίγο JavaScript. Elegant είναι η λέξη που απεικονίζει αυτό το ρυθμιστικό ποιότητας.

Ρυθμιστικό κάρτας πληροφοριών

Πληροφοριακό ρυθμιστικό

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

Συγκριτικό ρυθμιστικό εικόνας

Συγκριτικό ρυθμιστικό

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

Συγκριτικό ρυθμιστικό χωρίς JavaScript

Συγκριτικό ρυθμιστικό χωρίς JS

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

Συγκριτικό ρυθμιστικό εικόνας τριών επιπέδων

Ρυθμιστικό τριών επιπέδων

Το όνομά του τα λέει όλα, ένα ρυθμιστικό εικόνας που σας επιτρέπει να συγκρίνετε έως και τρία κάθε φορά. Το παράδειγμα που δίνεται είναι ένα να βλέπεις το κεφάλι σε προφίλ, ένα άλλο να δείχνει τους μυς και ένα άλλο ρυθμιστικό να βλέπει τα οστά. Χρησιμοποιεί HTML, CSS και JavaScript για τη λειτουργία του.

Ρυθμιστικό εικόνας Vanilla JS

Συγκριτικό ρυθμιστικό

Ένα άλλο συγκριτικό ρυθμιστικό εικόνας με ένα μεγάλο κουμπί με την οποία μπορείτε να σύρετε την εικόνα από τη μία πλευρά στην άλλη. Μινιμαλιστικό, με λίγο JavaScript και εξαιρετικό οπτικό φινίρισμα. Ένα από τα πιο εντυπωσιακά για σύγκριση εικόνων.

Διαιρέστε την οθόνη διαγώνια

Διαγώνιο συγκριτικό ρυθμιστικό

αυτό συγκριτικό ρυθμιστικό εικόνας Δημιουργήθηκε από την Envato Tuts και έχει τη διάκριση ότι το ρυθμιστικό τοποθετείται διαγώνια για να προκαλέσει άλλους τύπους αισθήσεων κατά τη σύγκριση δύο εικόνων. Χρησιμοποιεί JavaScript, CSS και HTML για να είναι ένα υψηλής ποιότητας συγκριτικό ρυθμιστικό.

Ρυθμιστικό πλήρους οθόνης

Μεταβατικό ρυθμιστικό

Φτάσαμε στο μέρος των ρυθμιστικών πλήρους οθόνης για να συναντηθούμε Slider Transition που χαρακτηρίζεται από μετάβαση πραγματοποιείται από ένα κινούμενο σχέδιο με μεγάλο εφέ. Εάν σκοπεύετε να εμφανίσετε εικόνες σε πλήρη οθόνη και ότι περνάτε πολύ προσεκτικά, κωδικοποιήστε σε JavaScript, CSS και HTML.

Οριζόντιο ρυθμιστικό με παράλλαξη

Ρυθμιστικό Parallax

Για Οι οπαδοί της παράλλαξης επηρεάζουν αυτό το ρυθμιστικό με Swiper.js, HTML και CSS. Εκτός από τη δυνατότητα ολίσθησης με τα δύο κουμπιά που βρίσκονται σε κάθε πλευρά, στη δεξιά πλευρά έχουμε μικροσκοπικές όλες τις εικόνες του πλήρους καρουζέλ. Ένα διαφορετικό και υψηλής ποιότητας οπτικό ρυθμιστικό που δεν θα αφήσει κανέναν που επισκέπτεται τον ιστότοπό μας αδιάφορο.

Ομαλό ρυθμιστικό προοπτικής 3D

Ομαλό ρυθμιστικό 3D προοπτικής

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

Ρυθμιστικό πλήρους οθόνης ήρωας

Ρυθμιστικό εικόνας ήρωας

Ένα ρυθμιστικό εικόνας ήρωας πλήρους οθόνης σε HTML, CSS και JavaScript. Εχω ένα εφέ αναπήδησης σε κάθε κινούμενη εικόνα αυτό το δίνει ότι και γενικά αντιμετωπίζουμε ένα ρυθμιστικό πλήρους οθόνης ποιότητας όπως το υπόλοιπο της λίστας.

Ρυθμιστικό VELO.JS με περίγραμμα

Ολισθητικά άκρα πέλματος

Ένα από τα κυριότερα σημεία ως ρυθμιστικό πλήρους οθόνης με ένα απλώς φανταστικό animation μετάβασης. Σας συνιστούμε να το δείτε σε λειτουργία για να αρχίσετε να σκέφτεστε πώς να το εφαρμόσετε στον Ιστό. Χρησιμοποιήστε εφέ ταχύτητας Για να βελτιώσετε αυτό το κινούμενο σχέδιο που χρησιμοποιεί κουμπιά βέλους, ένα κλικ στην πλοήγηση και ακόμη και την κύλιση, Απλά τέλεια.

Αποκριτικό κατακόρυφο ρυθμιστικό CSS με μικρογραφίες

Αποκριτικό ρυθμιστικό CSS

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

Flexbox ρυθμιστικού εικόνας

Ρυθμιστικό εικόνας Flexbox

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

Motion Blur με φίλτρα SVG

Θόλωμα κίνησης ρυθμιστικού

Ένα πείραμα που προσομοιώνει το αποτέλεσμα του θαμπάδα κίνησης κάθε φορά μια διαφάνεια είναι ενεργοποιημένο. Χρησιμοποιεί ένα SVG Gaussian blur filter και μερικά πλήκτρα κίνησης CSS. Ο κώδικας που χρησιμοποιείται στο JavaScript προορίζεται αποκλειστικά για το δεδομένο παράδειγμα και τη λειτουργικότητα του ρυθμιστικού.

Κινούμενο ρυθμιστικό

Κινούμενο ρυθμιστικό

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

Ρυθμιστικό εικόνας με μοτίβα SVG

Ολισθητικό μόνο CSS SVG

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

Απλό ρυθμιστικό στρώσης

Ρυθμιστικό με στρώσεις

Ένα ρυθμιστικό με ένα περισσότερο από διακεκριμένη κινούμενη εικόνα που προσφέρει αυτό το εφέ κύματος κάθε φορά που κάνουμε κλικ στο εικονίδιο για να σύρετε μια νέα εικόνα. Έγινε σε HTML, CSS και JavaScript, γίνεται ένα άλλο ρυθμιστικό εικόνας.

Pure CSS ρυθμιστικό

Pure CSS ρυθμιστικό

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

Cupcakes μόνο CSS ρυθμιστικό

Ρυθμιστικό cupcake

El το πιο γλυκό ρυθμιστικό στη λίστα και ότι είναι μόνο σε CSS και HTML. Είναι ένα από τα πιο ειδικά από ολόκληρη τη λίστα που έχει στη δεξιά πλευρά τις διαφορετικές παραλλαγές των cupcakes. Κάντε κλικ σε ένα και ένα cupcake εμφανίζεται με ένα υπέροχο κινούμενο σχέδιο που καταλήγει σε ένα μεγάλο εφέ αναπήδησης. Ένα από τα καλύτερα χωρίς αμφιβολία.

Εφέ κίνησης ρυθμιστικού

Ρυθμιστικό κινουμένων σχεδίων

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

Φέτα ολισθητήρα

Ολισθητήρας

Un ρυθμιστικό μετάβασης που χρησιμοποιεί μια απλή κλάση προσθήκης και αυτό χαρακτηρίζεται από πολύ ομαλές κινούμενες εικόνες για να γίνει ένα από τα αγαπημένα αυτής της λίστας. Εάν θέλετε να ξεχωρίσετε στην έκδοση για κινητά του ιστού, είναι ένα από τα βασικά. Πολύ οπτικά.

Slider Parallax Νέα Υόρκη

Slider Νέα Υόρκη

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

Αναδυόμενο παράθυρο

Αναδυόμενο παράθυρο

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

Ρυθμιστικό με εφέ κυματισμού

Ρυθμιστικός κυματισμός

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

Ρυθμιστικό με προεπισκόπηση εικόνας

Προηγούμενο ρυθμιστικό

Slider GSAP με προεπισκόπηση των επόμενων διαφανειών που θα παρουσιαστεί στον χρήστη. Ιδανικό για μοντελοποίηση σε ιστότοπο μόδας ή σχεδιασμού.

Μεταβάσεις ρυθμιστικών

Μεταβάσεις ρυθμιστικού

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

Μην το χάσετε αυτό μια άλλη λίστα κωδικών CSS για κουμπιά.


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

Γίνε ο πρώτος που θα σχολιάσει

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

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

*

*

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