Τρόπος δημιουργίας CSS3 χριστουγεννιάτικο δέντρο στολίδια

Σε αυτόν τον οδηγό, εμείς θα εμφανίσει την εξουσία της CSS3 στο σχεδίασης σύνθετων σχημάτων. Θα δημιουργήσουμε μαγικά στολίδια χριστουγεννιάτικο δέντρο χρησιμοποιώντας μόνο CSS3 και HTML (δεν εικόνες). Ειδικότερα, θα σχεδίασης πούλιες, το οποίο είναι το σήμα κατατεθέν ΝΕΚΡΟΤΑΦΕΙΩΝ χριστουγεννιάτικα δένδρα.

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

Προβολή DemoDownload SourceCSS συστατικά

Πριν ξεκινήσετε, ας μόλις μεταβείτε γρήγορα σε ό, τι εμείς να χρησιμοποιούν.

: πριν και: μετά την pseudo-elements: χρήση pseudo-elements θα μας βοηθήσει στη μείωση του ποσού των περιττών HTML πρέπει να χρησιμοποιήσουμε. Εάν έχετε εργαστεί με στρογγυλεμένες γωνίες στο CSS2 πριν, πιθανότατα γνωρίζετε ότι, προκειμένου να παράγουν ευέλικτη στρογγυλεμένες γωνίες που χωρούν διαφόρων μεγεθών του περιεχομένου, έπρεπε να χρησιμοποιήσετε πολλά κενά divs και τέτοια. Χρησιμοποιώντας αυτά τα στοιχεία, θα έχουμε ελάχιστες επισημάνσεις. Στην περίπτωση αυτή, ένα μόνο κενό div ανά bauble, η οποία, εάν ήταν δραστήριων, θα μπορείτε να συμπληρώσετε με κάποιο περιεχόμενο κειμένου. Σημειώστε ότι αυτές οι pseudo-elements βρίσκονται σε CSS2 specs.CSS3 γραμμική και Ακτινικό ντεγκραντέ: για να λάβετε τα μεταλλικά χρώματος γεμισμάτων και λάμψει της το πούλιες, θα χρησιμοποιήσουμε χρώμα gradients.Box σκιές, μετασχηματισμούς, συνόρων ακτίνα, κ.λπ.: για να δημιουργήσετε τα σχήματα, εμείς θα χρησιμοποιούν ένα συνδυασμό πλαίσιο-σκιά, μετασχηματισμό και συνόρων-ακτίνα (για στρογγυλεμένες γωνίες) .HTML

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

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

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

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