Fancy Image Decorations: Single Element Magic

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

Αυτό είναι σωστό, χωρίς επιπλέον σήμανση, χωρίς div και χωρίς ψευδοστοιχεία. Μόνο η μία ετικέτα.

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

Ας ξεκινήσουμε με το πρώτο μας παράδειγμα

Πριν εμβαθύνουμε στον κώδικα, ας απαριθμήσουμε τις δυνατότητες για το στυλ ενός χωρίς επιπλέον στοιχεία ή ψευδοστοιχεία. Μπορούμε να χρησιμοποιήσουμε border, box-shadow, outline, και φυσικά, background. Μπορεί να φαίνεται περίεργο να προσθέτουμε ένα φόντο σε μια εικόνα επειδή δεν μπορούμε να το δούμε όπως θα είναι πίσω από την εικόνα — αλλά το κόλπο είναι να δημιουργήσουμε χώρο γύρω την εικόνα χρησιμοποιώντας padding και / ή border και μετά σχεδιάστε το φόντο μας μέσα σε αυτό το χώρο.

Νομίζω ότι ξέρετε τι θα ακολουθήσει από τότε που μίλησα background, σωστά? Ναί, κλίσεις! Όλα τα διακοσμητικά που πρόκειται να φτιάξουμε βασίζονται σε πολλές κλίσεις. Αν έχετε με ακολούθησε για λίγο, νομίζω ότι αυτό μάλλον δεν αποτελεί έκπληξη για εσάς. 😁

Ας επιστρέψουμε στο πρώτο μας παράδειγμα:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

Εμείς ορίζουμε padding και ένα διαφανές border χρησιμοποιώντας τη μεταβλητή --s να δημιουργήσουμε ένα κενό γύρω από την εικόνα μας ίσο με το τριπλάσιο αυτής της μεταβλητής.

Γιατί χρησιμοποιούμε και τα δύο padding και border αντί για το ένα ή το άλλο; Μπορούμε να πάρουμε χρησιμοποιώντας μόνο ένα από αυτά, αλλά χρειάζομαι αυτόν τον συνδυασμό για την κλίση μου επειδή, από προεπιλογή, η αρχική τιμή του background-clip is border-box και background-origin είναι ίσο με padding-box.

Ακολουθεί μια απεικόνιση βήμα προς βήμα για να κατανοήσετε τη λογική:

Αρχικά, δεν έχουμε περιθώρια στην εικόνα, επομένως η κλίση μας θα δημιουργήσει δύο τμήματα με 1px πάχους. (Χρησιμοποιώ 3px σε αυτό το συγκεκριμένο demo, ώστε να είναι πιο εύκολο να το δούμε.) Προσθέτουμε ένα χρωματιστό περίγραμμα και η διαβάθμιση εξακολουθεί να μας δίνει το ίδιο αποτέλεσμα μέσα στην περιοχή padding (λόγω background-origin) αλλά επαναλαμβάνεται πίσω από τα σύνορα. Αν κάνουμε διάφανο το χρώμα του περιγράμματος, μπορούμε να χρησιμοποιήσουμε την επανάληψη και παίρνουμε το πλαίσιο που θέλουμε.

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

Εδώ είναι μια λύση μόνο με κλίση όπου χρησιμοποιώ μόνο padding για να ορίσετε το χώρο. Ακόμα το ίδιο αποτέλεσμα αλλά με πιο σύνθετη σύνταξη.

Ας δοκιμάσουμε μια άλλη ιδέα:

Για αυτό, πήρα το προηγούμενο παράδειγμα αφαίρεσε το outline, και εφάρμοσε α clip-path για να κόψετε την κλίση σε κάθε πλευρά. ο clip-path Η τιμή είναι λίγο περίεργη και μπερδεμένη, αλλά εδώ είναι μια απεικόνιση για να δείτε καλύτερα τα σημεία της:

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

The Corner-Only Frame

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

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

Θα σχεδιάσουμε μια κλίση με μέγεθος ίσο με 50px 50px και τοποθετήστε το στην επάνω αριστερή γωνία (0 0). Για τη διαμόρφωση της διαβάθμισης, ακολουθεί μια απεικόνιση βήμα προς βήμα που δείχνει πώς έφτασα σε αυτό το αποτέλεσμα.

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

#0000 25%, darkblue 0

Αυτό ουσιαστικά λέει: «γεμίστε τη διαβάθμιση με ένα διαφανές χρώμα μέχρι 25% της περιοχής και, στη συνέχεια, γεμίστε την υπόλοιπη περιοχή με darkblue.

Μπορεί να ξύνετε το κεφάλι σας πάνω από το 0 αξία. Είναι ένα μικρό χακάρισμα για την απλοποίηση της σύνταξης. Στην πραγματικότητα, θα πρέπει να το χρησιμοποιήσουμε για να κάνουμε μια δύσκολη στάση μεταξύ των χρωμάτων:

#0000 25%, darkblue 25%

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

Κάπου μέσα η προδιαγραφή, λέει:

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

0 είναι πάντα μικρότερη από οποιαδήποτε άλλη τιμή, επομένως το πρόγραμμα περιήγησης θα τη μετατρέπει πάντα στη μεγαλύτερη τιμή που εμφανίζεται πριν από αυτήν στη δήλωση. Στην περίπτωσή μας, αυτός ο αριθμός είναι 25%.

Τώρα, εφαρμόζουμε την ίδια λογική σε όλες τις γωνίες και τελειώνουμε με τον ακόλουθο κώδικα:

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

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

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

img:hover {
  background-size: 51% 51%;
}

Ναι είναι 51% αντί του 50% — που δημιουργεί μια μικρή επικάλυψη και αποφεύγει πιθανά κενά.

Ας δοκιμάσουμε μια άλλη ιδέα χρησιμοποιώντας την ίδια τεχνική:

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

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b), #0000 25%, var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b), #0000 25%, var(--c) 0);
  background-position:
    var(--_p, 0%) var(--_p, 0%),
    calc(100% - var(--_p, 0%)) calc(100% - var(--_p, 0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i, .3s));
}
img:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g) / 2);
  --_i: 0s;
}

Γιατί το --_i και --_p οι μεταβλητές έχουν υπογράμμιση στο όνομά τους; Οι κάτω παύλες αποτελούν μέρος μιας σύμβασης ονομασίας που χρησιμοποιώ για να εξετάσω "εσωτερικές" μεταβλητές που χρησιμοποιούνται για τη βελτιστοποίηση του κώδικα. Δεν είναι τίποτα το ιδιαίτερο, αλλά θέλω να κάνω τη διαφορά μεταξύ των μεταβλητών που προσαρμόζουμε για να ελέγχουμε το πλαίσιο (όπως --b, --c, κ.λπ.) και αυτά που χρησιμοποιώ για να κάνω τον κώδικα πιο σύντομο.

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

Ακολουθεί μια απεικόνιση για την καλύτερη κατανόηση των διαφορετικών τιμών:

The Frame Reveal

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

Cool, σωστά; Και αν κοιτάξετε προσεκτικά, θα παρατηρήσετε ότι οι γραμμές εξαφανίζονται προς την αντίθετη κατεύθυνση στο ποντίκι, κάτι που κάνει το εφέ ακόμα πιο φανταχτερό! Χρησιμοποίησα παρόμοιο αποτέλεσμα σε ένα προηγούμενο άρθρο.

Αλλά αυτή τη φορά, αντί να καλύπτω όλο το στοιχείο, καλύπτω μόνο ένα μικρό μέρος ορίζοντας το α height για να πάρετε κάτι σαν αυτό:

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

img {
  --b: 10px; /* the border thickness*/
  --g: 5px; /* the gap on hover */
  --c: #8A9B0F; 

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

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

Αλλο ένα? Πάμε!

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

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

Αλλά γιατί έκανα το πλάτος της κλίσης 200%? Θα νόμιζες 100% θα ήταν αρκετό, σωστά;

100% θα πρέπει να είναι αρκετό, αλλά δεν θα μπορώ να μετακινήσω την κλίση όπως θέλω, αν διατηρήσω το πλάτος της ίσο με 100%. Αυτή είναι μια άλλη μικρή ιδιορρυθμία που σχετίζεται με το πώς background-position έργα. Το καλύπτω αυτό μέσα ένα προηγούμενο άρθρο. εγώ επίσης δημοσίευσε μια απάντηση στο Stack Overflow ασχολείται με αυτό. Ξέρω ότι διαβάζεται πολύ, αλλά αξίζει πραγματικά τον χρόνο σας.

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

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200%  no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

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

Η περιστροφή του πλαισίου

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

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

Ας δούμε πώς δημιουργείται η κινούμενη εικόνα για την κορυφαία κλίση:

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

Αρχίζετε να βλέπετε το κόλπο; Και οι δύο κλίσεις τέμνονται στη γωνία για να δημιουργήσουν την ψευδαίσθηση όπου η ευθεία γραμμή αλλάζει σε μια γωνιακή. Ας αφαιρέσουμε το περίγραμμα και ας κρύψουμε την υπερχείλιση για να το δούμε καλύτερα:

Τώρα, προσθέτουμε άλλες δύο κλίσεις για να καλύψουμε τις υπόλοιπες άκρες και τελειώσαμε:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

Εάν πάρουμε αυτόν τον κωδικό και τον προσαρμόσουμε ελαφρώς, μπορούμε να πάρουμε ένα άλλο ωραίο κινούμενο σχέδιο:

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

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

Αυτό είναι πολλές κλίσεις σε ένα άρθρο!

Σίγουρα είναι και σας προειδοποίησα! Αλλά αν η πρόκληση είναι να διακοσμήσετε μια εικόνα χωρίς επιπλέον στοιχεία και ψευδοστοιχεία, μας μένουν μόνο λίγες δυνατότητες και οι διαβαθμίσεις είναι η πιο ισχυρή επιλογή.

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

Θα φύγω με ένα τελευταίο demo για να σας κρατήσω μέχρι το επόμενο άρθρο αυτής της σειράς. Αυτή τη φορά, χρησιμοποιώ radial-gradient() για να δημιουργήσετε ένα άλλο αστείο εφέ αιώρησης. Θα σας αφήσω να αναλύσετε τον κώδικα για να μάθετε πώς λειτουργεί. Κάντε μου ερωτήσεις στα σχόλια αν κολλήσετε!