Δημιουργήστε εφέ κολάζ στο πρόγραμμα περιήγησης με CSS

Jan 30, 2026

πως να

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

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

Ψάχνετε για διαφορετικό τύπο φροντιστηρίου; Βλέπω Πώς να φτιάξετε ένα κολάζ φωτογραφιών στο Photoshop . Και για εύχρηστους οδηγούς, δείτε την επιλογή μας στην κορυφή οικοδόμος ιστότοπου και web hosting υπηρεσία.

18 κορυφαία παραδείγματα κινούμενων σχεδίων CSS

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

Θα χρειαστείτε:

Το αγαπημένο σας πρόγραμμα περιήγησης ιστού και προγραμματιστή - συνιστώ να χρησιμοποιήσετε το Google Chrome, καθώς υποστηρίζει όλα τα χαρακτηριστικά που χρησιμοποιώ σε αυτό το σεμινάριο
Ένας επεξεργαστής κώδικα
Περιουσιακά στοιχεία όπως εικόνες ή αρχεία SVG - μπορείτε να κατεβάσετε αυτά που χρησιμοποιούμε σε αυτό το σεμινάριο εδώ

Εικόνες που επικαλύπτουν το κείμενο

CSS masks example — Οι μάσκες CSS σας επιτρέπουν να δημιουργείτε ειδικά εφέ - όπως η ενεργοποίηση μιας επικεφαλίδας ιστότοπου για να εμφανιστεί επιλεκτικά και να εξαφανιστεί καθώς ο χρήστης μετακινείται προς τα πάνω και προς τα κάτω στη σελίδα (αντίθετα αυτή η εικόνα στο παραπάνω)

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

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

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

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

 & LT; Header & GT;
        & lt; h3 & gt; αυτό είναι & lt; / h3 & gt;
        & lt; h1 & gt; & lt; my adventure & lt; / span & gt; / lt; / h1 & gt;
& lt; / header & gt;

Το κείμενο της κλάσης θα διατηρηθεί στο & lt; span & gt; ετικέτα. Δεν είναι ένα κοινό πράγμα αλλά, σε αυτή την περίπτωση, εφαρμόζουμε κάλυψη στην κλάση, όχι στο δοχείο.

 κεφαλίδα {
    Πλάτος: 100VW;
    Ύψος: 80VH;
    Κορυφή: 0;
    Αριστερά: Αυτόματα.
    Ιστορικό: URL (.../ εικόνες / τοπίο.jpg) Κέντρο Κορυφαία επανάληψη.
    Ιστορικό μέγεθος: κάλυψη;
}
h1 {
    Μάσκα: URL (.../ images / mask.svg # massid);
    -Webkit-μάσκα: URL (.../ εικόνες / τοπίο-μάσκα.png)
Κέντρο Κορυφαία Επαναλάβετε.
    Μέγεθος μάσκας: κάλυψη;
    -Webkit-mask-Μέγεθος: κάλυψη;
    Πλάτος: 100VW;
    Ύψος: 80VH;
    Χρώμα: #FFF;
    Μέγεθος γραμματοσειράς: 100px;
    Θέση: συγγενής.
}
H1 Span {
    Θέση: Σταθερή.
    Οθόνη: Inline-Block.
    Κείμενο-Ευθυγράμμιση: Κέντρο;
    Οικογένεια γραμματοσειράς: «Libre Baskerville», Serif.
    Πλάτος: 100VW;
    Κορυφή: 80px;
    Στυλ γραμματοσειράς: πλάγια?
}

Κόψτε τις εικόνες χρησιμοποιώντας το CSS Clipping

CSS clipping example — Οι διαδρομές αποκοπής σας επιτρέπουν να κόψετε την εικόνα του φυτού σε αυτό το παράδειγμα

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

Ο στόχος σε αυτή την άσκηση είναι να συνδεθεί το φυτό από την εικόνα, αφαιρώντας το φόντο. Μπορούμε να αντιγράψουμε τον κωδικό SVG από το αρχείο μας και να το επικολλήσουμε σε ένα έγγραφο HTML. Το διαδρομή Clip πρέπει να τοποθετηθεί μέσα & lt; defs & gt; & lt; / defs & gt; Ετικέτες.

 & lt; svg & gt;
  & lt; defs & gt;
      & lt; clippath id = "clip-plant" & gt;
     & lt; διαδρομή d = "m293.2.524.8c0,3,3,0 ... [και περισσότερους αριθμούς]» & gt;
     & lt; / Clippath & GT;
  & lt; / defs & gt;
& lt; / svg & gt;
& lt; div class = "plant" & gt; / div & gt;

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

.
    Ύψος: 700px;
    Ιστορικό - Εικόνα: URL (.../ images / plant.jpg);
    Ιστορικό μέγεθος: κάλυψη;
    Θέση: συγγενής.
    Ιστορικό-Επαναλάβετε: Καμία επανάληψη?
    -Webkit-clip-path: URL ("# clip-plant");
    Clip-Path: URL ("# Clip-Plant");}

Σκεφτείτε έξω από το κουτί

clipping in CSS example — Μπορείς να χρησιμοποιήσεις **σχήμα-εσωτερικό** και **σχήμα-εξωτερικό** για να δημιουργήσετε όλα τα είδη σχημάτων

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

Πως λειτουργεί, λοιπόν? Απλά εφαρμόστε σχήμα-εξωτερικό στην δεδομένη πλωτή εικόνα ή δοχείο. Είναι σημαντικό να σημειωθεί ότι το φλοτέρ Ακίνητα και οι διαστάσεις του στοιχείου - είτε ύψος είτε πλάτος - πρέπει να οριστούν διαφορετικά δεν λειτουργεί. Μπορείτε να χρησιμοποιήσετε το URL () λειτουργία, η οποία επιτρέπει το σχήμα-εξωτερικό ιδιοκτησίας για να ορίσετε ένα σχήμα στοιχείου με βάση τη διαδρομή από ένα αρχείο SVG.

. Α-επιστολή {
    Ιστορικό - Εικόνα: URL ('../ images / gold-bg.jpg');
    Μέγεθος: 1000px;
    -Webkit-Mask-image: URL ('..// εικόνες / a-letter2.svg');
    -Webkit-Mask-Composite: Πηγή.
    -Webkit-μάσκα-επανάληψη: καμία επανάληψη.
    -Webkit-Mask-Μέγεθος: 300px;
    Πλάτος: 100%.
    Ύψος: 60VH;
    Θέση: συγγενής.
    Κορυφή: 0px;
    Συνημμένο υπόβαθρο: Σταθερό;
    Float: Αριστερά.
    Οθόνη: Inline-Block.
    Πλάτος: 310px;
    σχήμα-περιθώριο: 23px;
    Shape-Outside: URL ('../ images / mask.svg');
}

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

Ένα σημαντικό πράγμα που πρέπει να σημειώσετε είναι ότι το σχήμα-εξωτερικό Το χαρακτηριστικό λειτουργεί μόνο με αρχεία με δυνατότητα Cors. Ο Cors αντιπροσωπεύει την κοινή χρήση πόρων διασταυρούμενης προέλευσης.

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

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

Διαβάστε περισσότερα:

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

Δημιουργήστε εφέ κολάζ στο πρόγραμμα περιήγησης με CSS

Θα χρειαστείτε:

Εικόνες που επικαλύπτουν το κείμενο

Κόψτε τις εικόνες χρησιμοποιώντας το CSS Clipping

Σκεφτείτε έξω από το κουτί

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

Πώς να κωδικοποιήσετε εφέ έξυπνων κειμένων με CSS

Ξεκινήστε με το Babel 7

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

Μάθετε να αυξήσετε το φύλλωμα με τα X-σωματίδια

Αυξάνονται τα φυτά στο Houdini

Δημιουργήστε ένα αυτοπροσωπογραφία με μόλις 4 χρώματα

Επιταχύνετε τη ροή εργασίας της υφής σας

Πώς να δημιουργήσετε ένα στυλιζαρισμένο 3D χαρακτήρα για τα παιχνίδια

Κατηγορίες