8 Χαρακτηριστικά του Art-Of-Art CSS (και πώς να τα χρησιμοποιήσετε)

Το CSS εξελίσσεται συνεχώς και έχει προστεθεί ένας οικοδεσπότης συναρπαστικών νέων χαρακτηριστικών για να γίνει η προδιαγραφή ένα ακόμα ισχυρό όπλο σε ένα εργαλείο Web Designer.

Το CSS Grid παίρνει διατάξεις σε νέα επίπεδα που δεν παρατηρούνται πριν, οι προσαρμοσμένες ιδιότητες εισάγουν την έννοια των μεταβλητών ενώ διαθέτουν ερωτήματα ελέγχου για υποστήριξη προγράμματος περιήγησης. Τα ερωτήματα των μέσων ενημέρωσης μετακινούνται ένα επίπεδο με νέες ιδιότητες προσβασιμότητας, οι μεταβλητές γραμματοσειρές προσφέρουν μέγιστη δημιουργικότητα με ελάχιστο φούσο κώδικα ενώ το Scroll Snapping εξαλείφει την ανάγκη για το JavaScript. Ελέγξτε το δροσερό μας CSS animation Παραδείγματα για να δείτε τι μπορείτε να δημιουργήσετε. Ή, για να δημιουργήσετε έναν ιστότοπο χωρίς κώδικα δοκιμάστε αυτά Οικοδόμοι ιστοτόπων .

Για όσους θέλουν να γίνουν δημιουργικοί, υπάρχουν σχήματα CSS για μοναδικές διατάξεις και ένα πλήκτρο τρόπων μείγματος και φίλτρων για την εισαγωγή εφέ σχεδιασμού στυλ Photoshop. Διαβάστε παρακάτω για να μάθετε πώς μπορείτε να χρησιμοποιήσετε αυτές τις λειτουργίες που πρέπει να δοκιμάσετε στις τελευταίες σας κατασκευές. Αλλά θυμηθείτε, ένας πολύπλοκος ιστότοπος σημαίνει ότι χρειάζεστε ένα web hosting Υπηρεσία που μπορεί να υποστηρίξει τις ανάγκες σας.

01. Προσαρμοσμένες ιδιότητες

Εάν χρησιμοποιείτε έναν προεπεξεργαστή όπως η SASS, ή μάλιστα μια γλώσσα προγραμματισμού όπως το JavaScript, χωρίς αμφιβολία θα είστε εξοικειωμένοι με την έννοια των μεταβλητών - τιμές που ορίζονται για επαναχρησιμοποίηση καθ 'όλη τη διάρκεια του κώδικα σας. Οι προσαρμοσμένες ιδιότητες μας επιτρέπουν να το κάνουμε αυτό στο CSS μας, χωρίς την ανάγκη για προεπεξεργαστές. Οι μεταβλητές μπορούν να ρυθμιστούν στο επίπεδο των ριζών (δημιουργώντας παγκόσμιες μεταβλητές) ή το SPOPED εντός ενός επιλογέα. Στη συνέχεια, μπορούν να καλούνται χρησιμοποιώντας τη σύνταξη var (-> - myvariaplename). Για παράδειγμα, θα μπορούσαμε να ορίσουμε μια μεταβλητή που ονομάζεται - αμφιβαση σαν αυτό:

 / * σχετικά με το στοιχείο ρίζας (ένα παγκόσμιο
μεταβλητή) * /
: ρίζα {
- -PrimaryColor: # F45942;
}
/ * Scoped σε έναν επιλογέα * /
.my-component {
- -παρκαρυγία: # 4171F4;
} 

Τώρα μπορούμε να χρησιμοποιήσουμε αυτή τη μεταβλητή ως τιμή ιδιοκτησίας:

 H1 {
Χρώμα: VAR (- -πμετρικά);
} 

Οι προσαρμοσμένες ιδιότητες κληρονομούνται, οι οποίες έχουν κάποιες πολύ χρήσιμες επιπτώσεις. Ένα από αυτά είναι το θέμα. Πάρτε το παραπάνω παράδειγμα: μπορούμε να ορίσουμε μια παγκόσμια μεταβλητή (# F45942 - ένα φωτεινό πορτοκαλί κόκκινο) για - αμφιβαση Σε επίπεδο ρίζας, οπότε κάθε περίπτωση που χρησιμοποιούμε αυτή τη μεταβλητή, η τιμή θα είναι κόκκινη. Αλλά επαναπροσδιορίζουμε την ίδια μεταβλητή μέσα σε έναν επιλογέα, με διαφορετική τιμή (# 4171F4 - μεσαίο μπλε). Έτσι για κάθε περίπτωση που χρησιμοποιούμε το - αμφιβαση Μεταβλητή μέσα σε αυτόν τον επιλογέα, η υπολογισμένη τιμή θα είναι μπλε.

Ρύθμιση προεπιλογών

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

 H1 {
Χρώμα: VAR (- -πρυπμαρυχείο, μπλε);
} 

Πώς διαφέρουν οι προσαρμοσμένες ιδιότητες από τις μεταβλητές προεπεξεργαστών;

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

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

02. Ερωτήσεις χαρακτηριστικών

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

Τα ερωτήματα χαρακτηριστικών υποστηρίζονται καλά σε σύγχρονα προγράμματα περιήγησης, αλλά είναι σχετικά νέα και ένα "gotcha" είναι ότι ορισμένα προγράμματα περιήγησης που μπορεί να θέλετε να δοκιμάσετε για υποστήριξη ενδέχεται να μην υποστηρίζουν τα ίδια τα δυνατά ερωτήματα. Συχνά ο καλύτερος τρόπος για να χειριστείτε αυτό είναι να παρέχετε πρώτα τα εφεδρικά στυλ (έξω από το ερώτημα χαρακτηριστικών), στη συνέχεια τυλίξτε τις βελτιώσεις σας για τη στήριξη των προγραμμάτων περιήγησης στο εσωτερικό του @Supports κανόνας.

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

Πώς να χρησιμοποιήσετε τα ερωτήματα χαρακτηριστικών

Για να δοκιμάσετε την υποστήριξη μιας μονής αξίας ιδιοκτησίας, μπορούμε πρώτα να παρέχουμε την πτώση. Σε αυτό το παράδειγμα, παρέχουμε μια εκπληκτική FlexBox για προγράμματα περιήγησης που δεν υποστηρίζουν τη διάταξη του πλέγματος.

 .my-component {
Εμφάνιση: Πλέγμα;
}
@Supports (οθόνη: πλέγμα) {
.my-component {
Εμφάνιση: Flex;
}
} 

03. Ερωτήσεις πολυμέσων

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

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

 .my-στοιχείο {
Κινούμενα σχέδια: Ανακινήστε 500ms ευκολία-in-out 5;
}
@Media (προτιμά-Μειωμένη κίνηση: Μείωση) {
.my-στοιχείο {
Animation: Κανένα;
}
} 

Είναι όλο και πιο δημοφιλής για τους ιστότοπους να παρέχουν ένα εναλλακτικό σκοτεινό θέμα. Το πρόγραμμα προτιμάται-χρώματα μας επιτρέπει να αναρωτηθούμε αν ο χρήστης έχει ορίσει μια προτίμηση σε ολόκληρο το σύστημα (χρησιμοποιώντας τις λέξεις-κλειδιά Dark, Light, ή No-Προτίμηση) και δείξτε ανάλογα το κατάλληλο σχήμα χρώματος.

 / * Ερωτήσεις πολυμέσων 02 * /
σώμα {
Ιστορικό: γραμμική κλίση (σε
κάτω, # b5faff, # ffe2b4);
}
@media (προτιμά-χρώμα-σχήμα: σκοτεινό) {
σώμα {
άσπρο χρώμα;
Ιστορικό: γραμμική κλίση (σε
κάτω, # 0c1338, # 3E3599);
}
} 

04. Μεταβλητές γραμματοσειρές

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

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

Άξονας διακύμανσης

Όχι μόνο αυτό, αλλά με μεταβλητές γραμματοσειρές, δεν περιορίζονται σε ένα μικρό υποσύνολο γραμματοσειρών γραμματοσειρών. Όταν εργάζεστε με τακτικές γραμματοσειρές, τα διαθέσιμα βάρη γραμματοσειράς δίδονται σε πολλαπλάσια των 100. Συνήθως, το 400 μπορεί να είναι το κανονικό βάρος, 300 το ελαφρύ βάρος και το 700 το έντονο βάρος - με διαφορετικές οικογένειες που τροφοδοτούν περισσότερα βάρη ή λιγότερα. Οι μεταβλητές γραμματοσειρές έχουν έναν άξονα παραλλαγής, το οποίο μας παρέχει μια σειρά τιμών για ιδιότητες όπως το βάρος της γραμματοσειράς. Μια γραμματοσειρά μπορεί να έχει έναν άξονα 1-900, το οποίο θα μας παράσχει πρόσβαση σε 900 διαφορετικά βάρη!

Ο άξονας της παραλλαγής δεν περιορίζεται μόνο στο βάρος. Οι μεταβλητές γραμματοσειρές μπορούν να έχουν διαφορετικούς άξονες για το X-Ύψος, το κλίση, το μήκος Serif και την αντίθεση (για να επιλέξετε μόνο μερικά παραδείγματα) - που σημαίνει ότι ένα ενιαίο αρχείο γραμματοσειράς θα μπορούσε να μας δώσει πρόσβαση σε εκατοντάδες ή ακόμα και χιλιάδες παραλλαγές! Θα μπορούσαμε ακόμη και να ζωντανήσουμε αυτές τις ιδιότητες, επιτρέποντάς μας να επιτύχουμε μερικά πραγματικά δροσερά αποτελέσματα. Mandy Michael ( https://codepen.io/mandymichael ) έχει ένα ολόκληρο φορτίο δημιουργικών demos που δοκιμάζει πραγματικά τα όρια.

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

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

Ρυθμίσεις παραλλαγής γραμματοσειρών

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

Καταχωρημένοι άξονες

Υπάρχουν πέντε διαφορετικοί καταχωρημένοι άξονες, οι οποίοι αντιστοιχούν σε διάφορες ιδιότητες CSS. Κάθε ένα από αυτά έχει αυτό που είναι γνωστό ως "ετικέτα άξονα". Οι καταχωρημένοι άξονες είναι: wght (γραμματοσειρά γραμματοσειράς), wdth (γραμματοσειρά), λερώνω (Στυλ γραμματοσειράς: πλάγια / γωνία), ιτ (Στυλ γραμματοσειράς: πλάγια), opsz (γραμματοσειρά-οπτικό μέγεθος). Μπορούμε να έχουμε πρόσβαση σε αυτούς τους άξονες είτε από την ιδιοκτησία CSS είτε με Ρυθμίσεις παραλλαγής γραμματοσειρών .

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

Προσαρμοσμένους άξονες

Οι προσαρμοσμένοι άξονες είναι άξονες που περιλαμβάνονται από τον σχεδιαστή γραμματοσειράς και θα μπορούσαν να είναι καθόλου οτιδήποτε. Θα μπορούσαν να περιλαμβάνουν (για παράδειγμα) μήκος serif, το x-Ύψος, ακόμη και κάτι πιο δημιουργικό (και λιγότερο τυπογραφικό τυπικό), όπως η περιστροφή.

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

05. Γραφικά εφέ

Εάν είστε εξοικειωμένοι με τα εργαλεία σχεδιασμού, όπως το Photoshop και το εικονογράφο, ίσως να γνωρίζετε τις λειτουργίες μείγμα και πώς μπορούν να χρησιμοποιηθούν για την παραγωγή διαφορετικών επιδράσεων στις εικόνες. Ο τρόπος λειτουργίας των λειτουργιών μείγμα είναι να συνδυάσουν δύο ή περισσότερα στρώματα μαζί χρησιμοποιώντας μαθηματικούς τύπους για να υπολογίσετε μια προκύπτουσα τιμή για κάθε εικονοστοιχείο. Τα στρώματα θα μπορούσαν να είναι οτιδήποτε - εικόνες, κλίσεις ή επίπεδα χρώματα. Ορισμένες λειτουργίες μείγμα παράγουν ένα σκούρο αποτέλεσμα (π.χ. πολλαπλασιάζεται, η οποία πολλαπλασιάζει τις τιμές εικονοστοιχείων των στρωμάτων), μερικές ελαφρύτερες (π.χ. οθόνη και επικάλυψη). Δεν χρειάζεται να κατανοήσουμε τα μαθηματικά για να τα χρησιμοποιήσουμε, ωστόσο. Η αναπαραγωγή με διαφορετικές λειτουργίες μείγμα μπορεί να μας δώσει μια καλή αίσθηση για την οποία από αυτούς παράγουν τα επιθυμητά αποτελέσματα όταν συνδυάζονται με διαφορετικά στρώματα.

Με τις ιδιότητες CSS mix-blend-mode και Background-Blend-Mode , μπορούμε να επιτύχουμε εφέ εικόνας που μοιάζουν με φωτογραφίες στο πρόγραμμα περιήγησης. Και οι δύο ιδιότητες λαμβάνουν τις ίδιες τιμές, αλλά λειτουργούν ελαφρώς διαφορετικά.

Background-Blend-Mode

Background-Blend-Mode Μείγματα μαζί τα στρώματα φόντου του στοιχείου που στοχεύουμε. Το στοιχείο μας θα μπορούσε να έχει εικόνες φόντου, χρώματα και κλίσεις και όλοι θα αναμειχθούν μεταξύ τους χωρίς να επηρεάζουν το περιεχόμενο του προσκηνίου. Μπορούμε να καθορίσουμε πολλές τιμές για Background-Blend-Mode , ένα για κάθε στρώμα φόντου.

 .my-στοιχείο {
Ιστορικό: URL (#myurl),
Γραμμική κλίση (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5),
RGBA (244, 65, 106, 1).
Ιστορικό μέγεθος: κάλυψη;
Background-Blend-Mode: Οθόνη,
πολλαπλασιάζω;
} 

Mix-blend-mode

Mix-blend-mode επηρεάζει τον τρόπο με τον οποίο το στοιχείο συνδυάζεται με τον γονέα του και τα αδέλφια του, συμπεριλαμβανομένων οποιουδήποτε περιεχομένου προσκηνίου και υποβάθρου και ψευδο-στοιχεία. Ορισμένες ενδιαφέρουσες δημιουργικές επιδράσεις μπορούν να επιτευχθούν με ανάμειξη επικαλυμμένων ψευδο-στοιχείων (:: πριν και: μετά).

 .my-στοιχείο {
Ιστορικό: RGB (244, 65, 106).
Mix-Blend-Mode: Πολλαπλασιάστε.
} 

Φίλτρα CSS

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

Μετατροπή σε κλίμακα του γκρι

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

Φίλτρα SVG

Τα φίλτρα CSS είναι στην πραγματικότητα απλοποιημένες εκδόσεις των φίλτρων SVG. Το CSS φίλτρο Το ακίνητο παίρνει επίσης ένα URL () Λειτουργία, επιτρέποντάς μας να περάσουμε σε μια διεύθυνση URL σε ένα φίλτρο SVG. Τα φίλτρα SVG είναι εξαιρετικά ισχυρά και επιτρέπουν ορισμένα απίστευτα εφέ εικόνας - αλλά είναι επίσης πολύ πιο περίπλοκα από τις λειτουργίες του φίλτρου CSS! Η Sara Soueidan έχει μια υπέροχη σειρά άρθρων σε κώδικες αν ενδιαφέρεστε να καταδύσεις στην κωδικοποίηση των δικών σας προσαρμοσμένων φίλτρων SVG. Ελέγξτε το άρθρο στο https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Clipping και κάλυψη: Πέρα από τα ορθογώνια

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

Διαδρομή κλιπ

ο clip-μονοπάτι () Το ακίνητο μας επιτρέπει να "κόψετε" ένα στοιχείο καθορίζοντας ένα μονοπάτι. Χρειάζεται μια σειρά από βασικές λειτουργίες σχήματος, Ένθεση (), κύκλος (), έλλειψη () ή πολύγωνο () , που μας επιτρέπει να δημιουργήσουμε πιο σύνθετα σχήματα διακοπής χρησιμοποιώντας ζεύγη συντονισμάτων XY για να ορίσουν τη διαδρομή. Εναλλακτικά, μπορούμε επίσης να περάσουμε σε μια διαδρομή SVG χρησιμοποιώντας το μονοπάτι() λειτουργία ή χρήση URL () για να δώσετε ένα αναγνωριστικό διαδρομής SVG.

Όχι μέσα στο μονοπάτι

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

Μάσκα-εικόνα

μάσκα-εικόνα Σας επιτρέπει να δείξουμε και να κρύψουμε τμήματα της εικόνας χρησιμοποιώντας μια εικόνα (SVG ή διαφανή PNG) ή κλίση ως μάσκα. Διαφορετικός διαδρομή κλιπ , Μπορούμε να προσθέσουμε υφή στις εικόνες μας με κάλυψη, καθώς η πηγή μάσκας δεν χρειάζεται να είναι μια διαδρομή - επιτρέπει τους βαθμούς διαφάνειας.

06. Σχήματα CSS

Η προδιαγραφή σχήματος CSS μας επιτρέπει να τυλίξουμε κείμενο γύρω από τα πλωμένα γεωμετρικά σχήματα, δημιουργώντας μερικές ενδιαφέρουσες, σχέδια που μοιάζουν με περιοδικά. Αυτό γίνεται δυνατή χρησιμοποιώντας το σχήμα-εξωτερικό ιδιοκτησία. Παρόμοιο με διαδρομή κλιπ , μπορούμε να δώσουμε αυτή την ιδιοκτησία μια βασική λειτουργία σχήματος κύκλος (), έλλειψη (), ένθετα (), πολύγωνο () , ή μια διεύθυνση URL σε ένα μονοπάτι SVG και στην πραγματικότητα οι δύο εργασίες σε αρμονία πολύ καλά! σχήμα-εξωτερικό Θα τυλίξει το κείμενο μας αποτελεσματικά, αλλά δεν θα επηρεάσει το επιπλωμένο στοιχείο. Αν θέλουμε το κείμενο να μοιάζει να μοιάζει με την περιτύλιξη γύρω από την εικόνα ή το πλωτιστικό αντικείμενο, μπορούμε να χρησιμοποιήσουμε την ίδια τιμή για διαδρομή κλιπ . Χρήση σχήμα-περιθώριο Για να προσθέσετε κενά μεταξύ της διαδρομής σχήματος και του περιεχομένου που το περιτυλίγει. Ρίξτε μια ματιά στο Stuff & amp; Ανοησίες site για να δείτε πώς τα σχήματα CSS χρησιμοποιούνται για να τυλίξετε κείμενο γύρω από μια κεντρική εικόνα.

Ο Firefox έχει ένα Επεξεργαστής διαδρομής σχήματος Στο πλαίσιο του πίνακα DEV, το οποίο είναι ιδιαίτερα χρήσιμο για την εργασία με σύνθετα σχήματα. Ωστόσο, χρησιμοποιήστε με προσοχή. Η περιτύλιξη της αιχμής μιας παραγράφου κειμένου είναι μεγάλη για καλλιτεχνικό αποτέλεσμα, αλλά δεν είναι πάντα σπουδαίο για την εμπειρία των χρηστών. Τα πολύπλοκα οδοντωτά σχήματα μπορούν να κάνουν τα μπλοκ του κειμένου να διαβάσουν. Για σημαντικό περιεχόμενο, ίσως θελήσετε να κατευθύνετε.

07. Κύλιση snapping

Πολλοί ιστότοποι επωφελούνται από τις βιβλιοθήκες JavaScript για να παρέχουν μια κηλίδα, φυσική εμπειρία κύλισης τύπου εφαρμογής, όπου το περιεχόμενο "Snaps" στα σημεία καθώς ο χρήστης μετακινείται. Τώρα, με τις προδιαγραφές Snap Scroll, μπορούμε να το κάνουμε αυτό ακριβώς μέσα στο αρχείο CSS - δεν χρειάζεται να εισάγετε σε βαριά Modules JS για να φουσκώσετε τη σελίδα σας!

Για να υλοποιήσετε το Scroll-Snapping, χρειαζόμαστε ένα στοιχείο για να ενεργήσετε ως το δοχείο κύλισης. Τα άμεσα παιδιά του εμπορευματοκιβωτίου υπαγορεύουν τα σημεία που θα χτυπηθούν και μπορούν να ευθυγραμμιστούν με διάφορους τρόπους εντός της περιοχής Snap.

Το Scroll Snapping μπορεί να είναι ακόμα πιο αποτελεσματικό όταν συνδυάζεται με μια άλλη νέα τιμή ιδιοκτησίας CSS - Θέση: κολλώδης . Αυτή η τιμή θέσης "κολλάει" ένα στοιχείο σε μια καθορισμένη θέση κατά την κύλιση μέσα στο δοχείο - άλλη συμπεριφορά που ήταν προηγουμένως δυνατή μόνο με το JavaScript. Ελέγξτε αυτό το κουμπί κύλισης με τη θέση: Sticky και Intersectionobserver παράδειγμα .

08. CSS πλέγμα και διατάξεις

Οι προγραμματιστές του εμπρόσθιου άκρου έχουν hacked διάταξη με όποια εργαλεία ήταν διαθέσιμα για χρήση τη στιγμή - πιο πρόσφατα flexbox, τα οποία χρησιμοποιούν πολλά σύγχρονα συστήματα πλέγματος. Αλλά το FlexBox δεν σχεδιάστηκε ποτέ για την οικοδόμηση αυστηρών πλέγματος - ο σκοπός του είναι ευελιξία!

Το CSS Grid είναι η πρώτη προδιαγραφή που έχει σχεδιαστεί για δισδιάστατη διάταξη, επιτρέποντάς μας τον πλήρη έλεγχο της οικοδόμησης μιας διάταξης και την τοποθέτηση αντικειμένων τόσο στη σειρά όσο και στον άξονα στήλης. Η οικοδόμηση μιας ανταποκρινόμενης διάταξης με το πλέγμα δεν απαιτεί calc () ή hacking γύρω με αρνητικά περιθώρια. Το μυστικό όπλο είναι η μονάδα FR - μια νέα μονάδα αποκλειστική στο δίκτυο. Τα μεγέθη μονάδων FR με τα κομμάτια πλέγματος (σειρές και στήλες) ως ποσοστό του διαθέσιμου χώρου. Λαμβάνει υπόψη τυχόν σταθερά κομμάτια, υδρορροές και περιεχόμενο, στη συνέχεια διανέμει το υπόλοιπο χώρο ανάλογα. Ο Jen Simmons επικύρωσε τον όρο "Intrinsic Web Design" για να περιγράψει τη νέα εποχή της διάταξης ιστού που το πλέγμα users in.

Πώς να χρησιμοποιήσετε το πλέγμα CSS

Το πλέγμα απαιτεί ένα στοιχείο με την ονομαστική τιμή ιδιοκτησίας που έχει οριστεί σε πλέγμα, να ενεργεί ως δοχείο δικτύου. Τα άμεσα παιδιά του δοχείου δικτύου είναι τα αντικείμενα που μπορούν να τοποθετηθούν στο δίκτυο. Χρησιμοποιούμε τις ιδιότητες Πλέγμα-πρότυπο-σειρές και Πλέγμα-πρότυπο-στήλες για να ορίσετε τα κομμάτια (σειρές και στήλες) του δικτύου, και Στήλη-χάσμα και Συναλλαγή για να ορίσετε τα υδρορροές (τα κενά μεταξύ των κομματιών).

 .GRID {
Εμφάνιση: Πλέγμα;
Πλέγμα-πρότυπο-στήλες: Επαναλάβετε (4, 1fr).
Πλέγμα-πρότυπο-σειρές: Επαναλάβετε (4, 200px).
Gap: 20px;
} 

Χρησιμοποιούμε το επαναλαμβάνω() Λειτουργία για να διατηρήσετε τον κωδικό πιο συνοπτική, ως εναλλακτική λύση στο Longhand (π.χ. Πρότυπο-Πρότυπο-Στήλες: 1FR 1FR 1FR 1FR ). Αυτό το παράδειγμα χρησιμοποιεί επίσης τη στενογραφία χάσμα Για Συναλλαγή και Στήλη-χάσμα .

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

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

Μπορούμε να τοποθετήσουμε αντικείμενα στο πλέγμα με αναφορά αριθμών γραμμών πλέγματος, οι οποίες είναι αριθμητικές γραμμές που καθίσουν μεταξύ κάθε διαδρομής. Εδώ, χρησιμοποιούμε τη στενογραφία στήλη πλέγματος και πλέγμα Για Πλέγμα-Στήλη-Έναρξη , Πλέγμα-Στήλη-άκρο , Grid-Row-Start και Πλέγμα-Row-End . Αυτά τα λένε στο πρόγραμμα περιήγησης σε ποια γραμμή πρέπει να ξεκινά το στοιχείο μας και να τελειώσει σε κάθε άξονα.

.
Στήλη πλέγματος: 1/4;
Grid-Row: 2;
} 

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

 .GRID {
Εμφάνιση: Πλέγμα;
Πλέγμα-πρότυπο-στήλες: [image-start] 1fr
 1FR 1FR [image-start] 1FR;
Πλέγμα-πρότυπο-σειρές: 200px [image-start]
 200px 200px [image-end] 200px;
Gap: 20px;
} 

Εναλλακτικά, το Πλέγμα-πρότυπο-περιοχή Το ακίνητο μας επιτρέπει να "σχεδιάζουμε" μια διάταξη πλέγματος με κείμενο.

 .GRID {
Εμφάνιση: Πλέγμα;
Πλέγμα-πρότυπο-στήλες: Επαναλάβετε (4, 1fr).
Πλέγμα-πρότυπο-σειρές: Επαναλάβετε (4, 200px).
Gap: 20px;
Πλέγμα-πρότυπο-περιοχές:
'. . . . "
«Εικόνα εικόνας εικόνας».
«Εικόνα εικόνας εικόνας».
'. . . . ';
} 

Χρησιμοποιώντας οποιαδήποτε από αυτές τις μεθόδους, μπορούμε απλά να αναφερθούμε στην αντίστοιχη περιοχή πλέγματος κατά την τοποθέτηση ενός στοιχείου πλέγματος:

 .image {
Περιοχή πλέγματος: Εικόνα;
} 

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 290 τώρα.

• 10 καλύτερα πλαίσια CSS το 2019
• Πώς να προσθέσετε κινούμενα σχέδια στο SVG με το CSS
• 52 Εργαλεία σχεδίασης ιστοσελίδων για να σας βοηθήσουν να εργαστείτε πιο έξυπνα το 2019