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

Feb 10, 2026

πως να

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

Χριστουγεννιάτικη προσφορά: Εξοικονομήστε έως και 47% σε μια συνδρομή στο Net Magazine

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

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

Σε αυτό το σεμινάριο, θα χρησιμοποιήσουμε πολύγωνα με την ιδιοκτησία του Clip-Path για να κόψουμε ένα γεωμετρικό σχήμα από το κείμενο μας έτσι ώστε μόνο η περιοχή που περικλείεται μέσα στο πολύγωνο είναι ορατό. Θα προσθέσουμε επίσης μερικές απλές μεταβάσεις για να φέρει το αποτέλεσμα στη ζωή. Μπορείτε να πάρετε τον κώδικα για κάθε βήμα σε αυτό το repo από Github, εδώ .

01. Ξεκινήστε με το HTML

Πρώτον, ας πάρουμε το HTML μας έτοιμο. Χρειαζόμαστε μόνο ένα & lt; div & gt; , μας .συνδετήρας Κλάση και το κείμενο μας, αλλά όπως θα χρησιμοποιήσουμε ψευδο-στοιχεία για αυτό το αποτέλεσμα, θα προσθέσουμε επίσης ένα χαρακτηριστικό με την ίδια τιμή με το κείμενο, ώστε να μπορέσουμε να το διαβάσουμε στο CSS αντί να το κωδικοποιήσετε.

 & lt; div class = "clip" δεδομένων-περιεχόμενο = "ένα demo clipping" & gt;
Ένα demo clipping
& lt; / div & gt;

Στη συνέχεια, θέλουμε να το γεμίσουμε την οθόνη και να ευθυγραμμίσουμε το κείμενο Dead Center - μπορούμε να χρησιμοποιήσουμε μερικά Flexbox Magic γι 'αυτό. Ας το στυλ και το μέγεθος του κειμένου.

 .Clip {
// Οθόνη πλήρωσης
Θέση: Απόλυτη.
Κορυφή: 0;
Αριστερά: 0;
Πλάτος: 100%.
Ύψος: 100%.
// Ευθυγράμμιση
Εμφάνιση: Flex; // χρησιμοποιήστε flex για ευθυγράμμιση
Δικαιολογήστε-περιεχόμενο: κέντρο; // οριζόντια ευθυγράμμιση
Ευθυγράμμιση-αντικείμενα: Κέντρο; // κατακόρυφη στοίχιση
// κειμένου styling
Γραμματοσειρά: «Εργασία Sans», Arial, Helvetica, Sans-Serif. // Η εργασία SANS διατίθεται από τη γραμματοσειρά Google
Γραμματοσειρά: 800;
Μέγεθος γραμματοσειράς: 8rem;
Κείμενο-Ευθυγράμμιση: Κέντρο;
Κείμενο-μετασχηματισμό: κεφαλαία;
}

02. Προσθέστε κάποιο στυλ

Τώρα μπορούμε να το στυλ ::πριν και ::μετά ψευδο-στοιχεία, με το καθένα να γίνει ένα στρώμα πάνω από το κείμενο. Από προεπιλογή, ::μετά θα έχει τον υψηλότερο z-index. Το πρακτικό attr () Ο επιλογέας θα διαβάσει την αξία του μας περιεχόμενο δεδομένων Χαρακτηριστικό.

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

 .Clip {
...
// Θέση Αυτές (& amp;) και ψευδο-στοιχεία (πριν / μετά)
&αμπέραζ;,
& amp; :: πριν,
& amp; :: μετά {
  Θέση: Απόλυτη.
  Κορυφή: 0;
  Αριστερά: 0;
  Πλάτος: 100%.
  Ύψος: 100%.
  Εμφάνιση: Flex; // χρησιμοποιήστε flex για ευθυγράμμιση
  Δικαιολογήστε-περιεχόμενο: κέντρο; // οριζόντια ευθυγράμμιση
  Ευθυγράμμιση-αντικείμενα: Κέντρο; // κατακόρυφη στοίχιση
}
& amp; :: πριν,
& amp; :: μετά {
  Περιεχόμενο: ATTR (περιεχόμενο δεδομένων); // Χρησιμοποιήστε την τιμή χαρακτηριστικού ως το περιεχόμενο
}
}

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

03. Ορίστε φόντο και χρώματα

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

Αυτό είναι χρήσιμο, καθώς διαφορετικά θα πρέπει να χρησιμοποιήσουμε δύο διαφορετικούς τύπους διαλείμματα γραμμής: & lt; br & gt; μεσα στην & lt; div & gt; και το πιο σκοτεινό \ΕΝΑ στο χαρακτηριστικό.

 .Clip {
...
&αμπέραζ;,
& amp; :: πριν,
& amp; :: μετά {
  Padding: 0 50%.
  Κουτί-μέγεθος: Σύνορα.
}
& amp; :: πριν {
  Χρώμα: $ White?
  Ιστορικό: $ ροζ?
}
& amp; :: μετά {
  Χρώμα: $ ροζ?
  Ιστορικό: $ μπλε?
}
}

Το Trick Padding λειτουργεί δίνοντας το κείμενο μηδενικό οριζόντιο πλάτος, αναγκάζοντας το πρόγραμμα περιήγησης να τυλίξει κάθε λέξη σε μια νέα γραμμή.

04. Κλείστε το κείμενο

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

ο ::πριν Το ψευδο-στοιχείο θα είναι ορατό μόνο στο επάνω αριστερό τρίγωνο, και ::μετά Το ψευδο-στοιχείο θα είναι ορατό μόνο στο κάτω δεξί τρίγωνο. Εδώ είναι ο κώδικας για να επιτευχθεί αυτό:

 .Clip {
...
& amp; :: πριν {
  Clip-Path: Πολύγωνο (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: μετά {
  Clip-Path: Πολύγωνο (100% 0, 100% 100%, 0 100%, 100% 0).
}
}

Αυτό δημιουργεί πολύγωνα με τέσσερα σημεία. Κάθε σημείο περιγράφεται από ένα ζεύγος συντονισμού. απλά ένα x (αριστερά προς τα δεξιά) και τιμή Y (πάνω προς τα κάτω). Η τιμή μπορεί να είναι απόλυτη (για παράδειγμα: px) ή σχετικό (για παράδειγμα:%). Τα σημεία αναφέρονται στην κορυφή αριστερά, έτσι τα σημεία στο 100% 100% είναι στο κάτω δεξιά.

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

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

Εάν χρησιμοποιείτε το Chrome, πιθανότατα θα δείτε ορισμένα θέματα απορροφής ενώ αλλάζετε το μέγεθος, που προκαλείται από σύνθετα στρώματα του Chrome. Δυστυχώς, επειδή το demo είναι πλήρους οθόνης, το συνιστώμενο Θα αλλάξει: μετασχηματισμός ιδιοκτησία και Μετασχηματισμός: Translatez (0) hack μην το διορθώσετε. Ωστόσο, εάν αλλάζετε .συνδετήρας προς την Θέση: Σταθερή. δουλεύει.

 Clip {
&αμπέραζ;,
& amp; :: πριν,
& amp; :: μετά {
  Θέση: Σταθερή.
}
}

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

05. Προσθέστε μεταβάσεις

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

Κράτος 1: Αυτή είναι η αρχική κατάσταση, οπότε ας δημιουργήσουμε τρεις άλλους

Προσθέστε κάθε μπλοκ στο κάτω μέρος του CSS σας καθώς πηγαίνετε, έτσι μπορείτε να δείτε τι μοιάζει.

Κράτος 2: Μετακινήστε τα τρίγωνα μακριά ελαφρά για να αποκαλύψετε το φόντο

Αυτό θα φανεί λίγο σαν τη σημαία της Δημοκρατίας του Κονγκό. Η αφαίρεση 20 τοις εκατό από την άκρη κάθε τριγώνου πολυγώνου θα κάνει το τέχνασμα.

Κράτος 3: μορφοποιήστε τα τρίγωνα σε ορθογώνια

Αυτό είναι παρόμοιο με το γαλλικό τρίχρωμο, αντίστροφα.

Τι γίνεται με αυτό το τέταρτο ζεύγος συντονισμού; Λοιπόν, αυτό είναι όπου έρχεται χρήσιμο. Αποδεικνύεται ότι η μετάβαση διαδρομή κλιπ Λειτουργεί μόνο εάν η λειτουργία σχήματος που χρησιμοποιείται είναι η ίδια (τόσο πολύγωνο & gt; πολύγωνο) και ο αριθμός των σημείων που χρησιμοποιούνται είναι το ίδιο - το πρόγραμμα περιήγησης θα μεταβεί σε κάθε μεμονωμένο σημείο. Γι 'αυτό έχουμε αυτό το τέταρτο κρυμμένο σημείο - μας επιτρέπει να μεταβαίνουν απρόσκοπτα από ένα τρίγωνο σε ένα ορθογώνιο, απλά αποκαλύπτουμε το τέταρτο σημείο όταν το χρειαζόμαστε.

 .Clip {
& amp; :: πριν {
  Clip-Path: Πολύγωνο (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: μετά {
  Clip-Path: Πολύγωνο (100% 0, 100% 100%, 60% 100%, 60% 0).
}
}

Κράτος 4: Περιστρέψτε αυτά τα πολύγωνα

Προσκόλλοντας το θέμα της σημαίας μας, αυτό μοιάζει με το «Απαιτεί ένα ρυμουλκό» στον κόσμο της σηματοδότησης της ναυτικής σημαίας.

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

 .Clip {
& amp; :: πριν {
  Clip-Path: Πολύγωνο (100% 0, 0 0, 100% 100%, 0 100%).
}
& amp; :: μετά {
  Clip-Path: Πολύγωνο (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Τύλιξε

Όλοι είμαστε όλοι, αλλά δεν είμαστε ακόμα σε θέση να αλλάξουμε τα κράτη, πράγμα που σημαίνει ότι δεν μπορείτε να δείτε τις μεταβάσεις σε δράση. Υπάρχουν πολλοί τρόποι για να το επιτύχετε αυτό, οπότε εξαρτάται από εσάς. Στο repo and codepen, έχω χρησιμοποιήσει ένα 100% διάλυμα χωρίς javascript με κρυμμένα κουμπιά ραδιοφώνου και τον ~ General Sibling Selector - ρίξτε μια ματιά. Μπορείτε επίσης να δείτε αυτό το codepen του tutorial εδώ .

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

Ειδική προσφορά Χριστουγέννων: Εξοικονομήστε έως και 47% σε μια συνδρομή στο NET για εσάς ή έναν φίλο για τα Χριστούγεννα. Είναι μια περιορισμένη προσφορά, οπότε κινείστε γρήγορα ...

Σχετικά Άρθρα:

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

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

01. Ξεκινήστε με το HTML

02. Προσθέστε κάποιο στυλ

03. Ορίστε φόντο και χρώματα

04. Κλείστε το κείμενο

05. Προσθέστε μεταβάσεις

Τύλιξε

πως να - Τα πιο δημοφιλή άρθρα

Πώς να μετατρέψετε τη φωτογραφία σε εικονογράφηση

Δημιουργήστε μια πύλη πελάτη με το WordPress

Δημιουργία κινούμενων CSS Art

10 τρόποι δημιουργίας καλύτερων κινούμενων εικόνων χαρακτήρων

Πώς να μοντελοποιήσετε την τέχνη της τέχνης στο Cinema 4D

Πώς να οικοδομήσουμε μια τοποθεσία blogging με gatsby

5 πράγματα που δεν γνωρίζατε ότι θα μπορούσατε να κάνετε με το HTML

Πώς να κάνετε τις δικές σας σανίδες καμβά

Κατηγορίες