Εργασία Mask Mask Magic με Houdini

Sep 12, 2025

πως να

An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Εάν ενδιαφέρεστε να μάθετε περισσότερα για το Houdini, βεβαιωθείτε ότι παρακολουθείτε τη Δημιουργία της Νέας Υόρκης (24-25 Απριλίου). Στη διάσκεψη, μπορείτε να πιάσετε τον Sam Richard, τον Enterprise Partner Engineer στο Google, συζητώντας πώς η Houdini μπορεί να βελτιώσει σημαντικά την ευελιξία, την εξουσία, την απόδοση και τη συντήρηση των μοτίβων σχεδιασμού. Για να κλείσετε το εισιτήριό σας σε αυτό το βραβευμένο συνέδριο για τους σχεδιαστές ιστοσελίδων, επισκεφθείτε generateconf.com .

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

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

19 δροσερά παραδείγματα κινούμενων εικόνων CSS για αναδημιουργία

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

Τι είναι το Houdini ικανό;

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

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

Ενώ ορισμένα από αυτά τα API εξακολουθούν να βρίσκονται στα αρχικά στάδια τους, πολλά έχουν προσγειωθεί τόσο σε χρώμιο όσο και σε όπερα, από V66 και V53 αντίστοιχα. Το API CSS Paint επιτρέπει στους προγραμματιστές να δημιουργούν εικόνες σε JavaScript για χρήση, όπου μια εικόνα θα χρησιμοποιηθεί κανονικά στο CSS, ενώ το μοντέλο αντικειμένων CSS εκθέτει τα αντικείμενα CSS στο JavaScript σας, αντί μόνο χορδές. Η στήριξη στο Safari για αυτά τα API βρίσκεται σήμερα στην ανάπτυξη, αρκετά περισσότερα API βρίσκονται στο δρόμο σε χρώμιο και τα διάφορα API της Χουνίνια δουλεύουν το δρόμο τους μέσω της διαδικασίας προδιαγραφών του W3C, με το API Paint που έχει ήδη φτάσει στην υποψήφια σύσταση.

Το σχέδιο API μεταβάλλεται διαρκώς και εκείνες που υπάρχουν αυτή τη στιγμή μπορεί να μην μοιάζουν με το τι τελικά προσγειώνεται στα προγράμματα περιήγησης. Παρακολουθούμε ishoudinireadyyet.com να παραμείνει μπροστά από τις τελευταίες βελτιώσεις.

Θέλετε κάτι απλούστερο; Δοκιμάστε ένα οικοδόμος ιστότοπου . Είτε έτσι είτε αλλιώς, το δικό σας web hosting Η υπηρεσία πρέπει να εργαστεί για εσάς.

Χρησιμοποιήστε το Houdini για να αναμορφώσετε τις μάσκες εικόνας

Προς το παρόν, ακόμη και μόνο το API CSS CSS του Houdini είναι σε θέση να επιτύχει πολλά. Για παράδειγμα, μπορούμε να το συνδυάσουμε με μάσκες εικόνας για να αναμορφώσετε στοιχεία κατόπιν ζήτησης.

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

01. Εφαρμόστε την κάλυψη CSS

An image showing three images of seascapes, awaiting the application of a CSS mask. — Οι εικόνες πριν εφαρμόσετε μια μάσκα CSS

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

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

 .Masked {
  [...]
  -Webkit-mask-image: βαφή (μάσκα);
  Εικόνα: Βίτση (μάσκα);
}
.masked: Τοποθετήστε το hover, .masked: εστίαση {
  - ΜΑΣΚ-REVEAN: TRUE.
}

02. Εφαρμόστε την ιδιότητα σχήματος μάσκας

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

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

 .Masked.Square {
  - ΜΑΣΚ-Σχήμα: Πλατεία.
}
.masked.circle {
  - ΜΑΣΚ-Σχήμα: Κύκλος;
}
.Masked.Triangle {
  - ΜΑΣΚ-Σχήμα: Τρίγωνο;
}

03. Καθορίστε ποια μορφή χρήσης

Ανοιξε scripts / mask.js . Αυτό έχει ήδη συμπληρωθεί με κάποια από τη λογική για τη δημιουργία των σχημάτων. Πρέπει ακόμα να το συνδέσουμε μαζί με τα μαθήματα που έγραψα.

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

 Αφήστε το σχήμα = "κύκλος";
Εάν (ιδιοκτησία.get ('- σχήμα μάσκας') & amp; & amp;
  [«Τετράγωνο», «τρίγωνο», «κύκλο»]
  .Includes (Properties.get (
  '- ΜΑΣΚ-Σχήμα'). Tostring (). Trim ())) {
  σχήμα = ιδιότητες.get (
  '- ΜΑΣΚ-Σχήμα'). Tostring (). Trim (); }

04. Αποφασίστε εάν θα αποκαλύψει

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

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

 Αφήστε να αποκαλύψετε = false;
αν (properties.get ('- αποκάλυψη μάσκας') & amp; & amp;
  Properties.get ('- Μάσκα-αποκαλύψτε ")
  .Τεστοποίηση (). Trim () == "TRUE") {
  Αποκαλύψτε = TRUE. }

05. Βρείτε το μικρότερο μήκος

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

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

 const maxlength =
  Math.min (geom.width, geom.height)?
ctx.linewidth = maxlength / 25;

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

Θέλετε να πάρετε περισσότερα κόλπα Houdini;

An image of generate New York speaker Sam Richard, promoting his talk 'Design System Magic with Houdini'. Generate New York runs from April 24 - 25. — Δημιουργία, το βραβευμένο συνέδριο για τους σχεδιαστές ιστοσελίδων, επιστρέφει στη Νέα Υόρκη στις 24-25 Απριλίου! Κάντε κλικ στην εικόνα για να κάνετε κράτηση εισιτηρίων

Ενδιαφέρεστε να μάθετε περισσότερα για το πώς η Houdini μπορεί να προσθέσει περισσότερα Oomph στα σχέδιά σας; Σαμ την απόδοση και τη συντήρηση αυτών των μοτίβων.

Δημιουργήστε τη Νέα Υόρκη Runs από τις 24-25 Απριλίου - Πάρτε τα εισιτήριά σας τώρα !

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

Δημιουργία της Νέας Υόρκης είναι πίσω για το 2019
14 από τα καλύτερα apis javascript
10 νέα εργαλεία σχεδιασμού ιστοσελίδων για τον Απρίλιο του 2019

Εργασία Mask Mask Magic με Houdini

Τι είναι το Houdini ικανό;

Χρησιμοποιήστε το Houdini για να αναμορφώσετε τις μάσκες εικόνας

01. Εφαρμόστε την κάλυψη CSS

02. Εφαρμόστε την ιδιότητα σχήματος μάσκας

03. Καθορίστε ποια μορφή χρήσης

04. Αποφασίστε εάν θα αποκαλύψει

05. Βρείτε το μικρότερο μήκος

Θέλετε να πάρετε περισσότερα κόλπα Houdini;

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

Πώς να ρυθμίσετε και να βελτιστοποιήσετε το smugmug storefront

Chiaroscuro Art: Ένας οδηγός βήμα προς βήμα

Πώς να εφαρμόσει φως ή σκοτεινές λειτουργίες στο CSS

Ελέγξτε το VR ART

Βάλτε ένα άτακτο λαγό σε ακουαρέλα

6 τρόποι να επιταχύνετε τη μοντελοποίηση

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

Μοντελοποίηση διαστημόπλοιο για το σχεδιασμό gameplay

Κατηγορίες