Fancy Image Decorations: Περίγραμμα και σύνθετα κινούμενα σχέδια

Ξοδέψαμε τα δύο τελευταία άρθρα αυτής της σειράς τριών μερών παίζοντας με ντεγκραντέ για να φτιάξουμε πραγματικά προσεγμένες διακοσμήσεις εικόνων χρησιμοποιώντας τίποτα άλλο από το στοιχείο. Σε αυτό το τρίτο και τελευταίο κομμάτι, θα εξερευνήσουμε περισσότερες τεχνικές χρησιμοποιώντας το CSS outline ιδιοκτησία. Αυτό μπορεί να ακούγεται περίεργο επειδή το χρησιμοποιούμε γενικά outline για να σχεδιάσετε μια απλή γραμμή γύρω από ένα στοιχείο — κάτι σαν border αλλά μπορεί να σχεδιάσει μόνο και τις τέσσερις πλευρές ταυτόχρονα και δεν αποτελεί μέρος του Box Model.

Μπορούμε να κάνουμε περισσότερα με αυτό, ωστόσο, και αυτό είναι που θέλω να πειραματιστώ σε αυτό το άρθρο.

Ας ξεκινήσουμε με το πρώτο μας παράδειγμα — μια επικάλυψη που εξαφανίζεται κατά την τοποθέτηση του ποντικιού με ένα ωραίο κινούμενο σχέδιο:

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

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

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

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

Αντί να χρησιμοποιήσω το μισό μέγεθος εικόνας σε αυτό, χρησιμοποιώ ένα πολύ μεγάλο outline τιμή πάχους (100vmax) κατά την εφαρμογή μιας μάσκας CSS. Με αυτό, δεν χρειάζεται πλέον να γνωρίζετε το μέγεθος της εικόνας — το κόλπο λειτουργεί σε όλα τα μεγέθη!

Μπορεί να αντιμετωπίσετε προβλήματα με τη χρήση 100vmax ως μεγάλη αξία στο Safari. Εάν ισχύει, σκεφτείτε το προηγούμενο κόλπο όπου αντικαταστήσατε το 100vmax με το μισό μέγεθος εικόνας.

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

Cool σωστά; ο outline είναι αυτό που δημιουργεί την κίτρινη επικάλυψη. ο clip-path κλιπ το επιπλέον outline για να πάρει το σχήμα του αστεριού. Στη συνέχεια, στο hover, κάνουμε το χρώμα διάφανο.

Ω, θέλετε καρδιές; Σίγουρα μπορούμε να το κάνουμε!

Φανταστείτε όλους τους πιθανούς συνδυασμούς που μπορούμε να δημιουργήσουμε. Το μόνο που έχουμε να κάνουμε είναι να σχεδιάσουμε ένα σχήμα με μια μάσκα CSS ή/και clip-path και συνδυάστε το με το outline τέχνασμα. Μία λύση, άπειρες δυνατότητες!

Και, ναι, μπορούμε σίγουρα να το ζωντανέψουμε και αυτό. Ας μην το ξεχνάμε αυτό clip-path είναι ζωντανό και mask βασίζεται σε κλίσεις — κάτι που καλύψαμε με εξαιρετική λεπτομέρεια στα δύο πρώτα άρθρα αυτής της σειράς.

Ξέρω, το animation είναι λίγο γκλιτσόκ. Αυτό είναι περισσότερο μια επίδειξη για να απεικονίσει την ιδέα παρά το "τελικό προϊόν" που θα χρησιμοποιηθεί σε μια τοποθεσία παραγωγής. Θα θέλαμε να βελτιστοποιήσουμε τα πράγματα για μια πιο φυσική μετάβαση.

Εδώ είναι ένα demo που χρησιμοποιεί mask αντι αυτου. Είναι αυτό με το οποίο σε πείραξα στο τέλος το τελευταίο άρθρο:

Γνωρίζατε ότι το outline η ιδιοκτησία ήταν ικανή για τόσο φοβερό; Προσθέστε το στην εργαλειοθήκη σας για φανταχτερές διακοσμήσεις εικόνων!

Συνδυάστε όλα τα πράγματα!

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

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

Ολοκληρώνοντας

Λοιπόν, φίλε, ευχαριστώ που κάνατε παρέα μαζί μου σε αυτήν τη σειρά τριών μερών τις τελευταίες εβδομάδες. Εξερευνήσαμε μια σειρά από διαφορετικές τεχνικές που μετατρέπουν απλές εικόνες σε κάτι εντυπωσιακό και διαδραστικό. Θα χρησιμοποιήσετε όλα όσα καλύψαμε; Σίγουρα όχι! Αλλά ελπίζω ότι αυτή ήταν μια καλή άσκηση για εσάς για να εξερευνήσετε προηγμένες χρήσεις των χαρακτηριστικών CSS, όπως οι διαβαθμίσεις, mask, clip-path, να outline.

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