Πώς να δημιουργήσετε το λογότυπο Feed RSS με CSS3
Το λογότυπο τροφοδοσίας RSS είναι ένα από τα πιο συχνά χρησιμοποιούμενα λογότυπα στον σχεδιασμό ιστοσελίδων, λόγω της λειτουργίας που αναφέρθηκε. Είδατε πολλά μαθήματα σχετικά με την κατάρτιση του λογότυπου τροφοδοσίας RSS χρησιμοποιώντας λογισμικό γραφικών όπως το Photoshop, αλλά τι γίνεται αντλώντας το καθαρά χρησιμοποιώντας το CSS3? Ναι, με άκουσες :-)
Με αυτή την ευκαιρία, θα ήθελα να σας δείξω τον εύκολο τρόπο να δημιουργήσετε ένα τυποποιημένο λογότυπο τροφοδοσίας RSS με μόνο CSS3, γι 'αυτό ακολουθήστε το σεμινάριο με συνοπτικά βήματα και γραφικά για να πάρετε το πρώτο λογότυπο τροφοδοσίας CSS3!
Εδώ είναι μια προεπισκόπηση του τι θα δημιουργήσετε σε ένα λεπτό. Μπορείτε επίσης να κατεβάσετε τα αρχεία προέλευσης στο τέλος του σεμιναρίου.
Βήμα 1
Δημιουργήστε ένα αρχείο HTML, εισαγάγετε τον ακόλουθο κώδικα στο αρχείο εάν είναι εντελώς άδειο.
Το πρώτο μου CSS3 RSS Feed Logo - Εισαγάγετε το HTML σας εδώ -
Βήμα 2
Εισαγάγετε τον παρακάτω κώδικα στο αρχείο HTML για να δημιουργήσετε ένα πλαίσιο ροής.
HTML για το κιβώτιο τροφοδοσίας
CSS για το κιβώτιο τροφοδοσίας
span.feed-box εμφάνιση: μπλοκ? πλάτος: 200px; ύψος: 200px; περιθώριο: 0 αυτόματο; φόντο: # F9A004; box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # -moz-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -webkit-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-border-radius: 20px; -webkit-ακτίνα-ακτίνα: 20px; ακτίνα-ακτίνα: 20px; span.feed-box * float: right; εμφάνιση: μπλοκ?
Αυτό είναι το αποτέλεσμα που θα επιτύχετε:
Βήμα 3
Θα σχεδιάσουμε ένα άλλο κιβώτιο που βρίσκεται μέσα στο πρώτο κιβώτιο τροφοδοσίας, οπότε τοποθετήστε τον κώδικα HTML παρακάτω στον κώδικα HTML του πρώτου κιβωτίου. Θα προσθέσουμε επίσης σύνορα ως εμπόδιο εδώ.
HTML για μικρότερο κιβώτιο τροφοδοσίας
CSS για μικρότερη θήκη ζωοτροφών
span.feed-box.feed-box-in σύνορα: 4px στερεά # FFC563; πλάτος: 184px; ύψος: 184px; περιθώριο: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-ακτίνα-ακτίνα: 20px; ακτίνα-ακτίνα: 20px; / * υπερχείλιση: κρυφή; * /
Αυτό είναι το αποτέλεσμα που θα επιτύχετε:
Βήμα 4
Σε αυτό το βήμα θα κάνουμε 1/4 μεγάλο κύκλο. Τοποθετήστε τον κώδικα HTML του 1/4 μεγάλου κύκλου στον κώδικα HTML του μικρότερου κιβωτίου και κάτω είναι ο κωδικός του:
HTML για τον 1/4 Μεγάλο Κύκλο
CSS για το 1/4 Big Circle
span.feed-box.feed-box-in .feed-quarter-circle-μεγάλο περιθώριο: 16px 16px 0 0; πλάτος: 260px; ύψος: 260px; σύνορα: 30px στερεά # FFDEA5; -moz-ακτίνα-ακτίνα: 260px; -webkit-ακτίνα-ακτίνα: 260px; ακτίνα-ακτίνα: 260px;
Αυτό είναι το αποτέλεσμα που θα επιτύχετε:
Βήμα 5
Θα κάνουμε τον 1/4 μικρό κύκλο τώρα, βάλτε τον κώδικα HTML παρακάτω στον κώδικα HTML του μεγάλου κύκλου.
HTML για τον 1/4 Μικρό Κύκλο
CSS για 1/4 Μικρό Κύκλο
span.feed-box.feed-box-in .feed-τρίμηνο-κύκλο-μεγάλο .feed-τρίμηνο-κύκλος-μικρό περιθώριο: 16px 16px 0 0; πλάτος: 176px; ύψος: 176px; σύνορα: 26px στερεά # FFDEA5; -moz-ακτίνα-ακτίνα: 176px; -webkit-ακτίνα-ακτίνα: 176px; ακτίνα-ακτίνα: 176px
Αυτό είναι το αποτέλεσμα που θα επιτύχετε:
Βήμα 6
Στο βήμα 6 ο μικρότερος κύκλος θα δημιουργηθεί μέσα στον μικρό κύκλο, οπότε τοποθετήστε τον κώδικα HTML στον κώδικα HTML του μικρού κύκλου.
HTML για τον μικρότερο κύκλο
CSS για τον μικρότερο κύκλο
span.feed-box.feed-box-in .feed-quarter-circle-μεγάλο .feed-quarter-circle-μικρό .feed-circle margin: 24px 24px 0 0; φόντο: # FFDEA5; πλάτος: 70px; ύψος: 70px; -moz-ακτίνα-ακτίνα: 70px; -webkit-ακτίνα-ακτίνα: 70px; ακτίνα-ακτίνα: 70px
Αυτό είναι το αποτέλεσμα που θα επιτύχετε:
Τελικές πινελιές
Αναζήτηση στον κώδικα, / * υπερχείλιση: κρυφή; * / τότε αντικαταστήστε με αυτόν τον κωδικό, υπερχείλιση: κρυφή;, τότε ναι! Μόλις πετύχατε ένα λογότυπο RSS Feed CSS3!
Μπόνους: Προσθέστε το εφέ κίνησης
Δεν θα θέλετε το λογότυπο RSS feed σας χωρίς μαγικό φαινόμενο αιωρήσεως, θα μπορούσατε; Απλά προσθέστε το στυλ CSS παρακάτω για να το επιτύχετε!
CSS για επίδραση αιωρήματος
span.feed-box: τοποθετήστε το δείκτη background: # 07C103; box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; span.feed-box: μετακινήστε το .feed-box-in border-color: # 58FC55; span.feed-box: hover .feed-box-in .feed-quarter-circle-μεγάλο, span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle -μικρό χρώμα-περιγράμματος: # B9FFB7; span.feed-box: μετακινήστε το .feed-box-in .feed-quarter-circle-μεγάλο .feed-quarter-circle-μικρό .feed-circle background: # B9FFB7;
Προεπισκόπηση και λήψεις
Εδώ είναι προεπισκοπήσεις του λογότυπου τροφοδοσίας CSS3 σε ποικίλα μεγέθη και διαφορετικό στυλ. Αν δεν μπορείτε να επιτύχετε κάποιο βήμα, μπορείτε επίσης να κάνετε λήψη των αρχείων προέλευσης.
- Προεπισκόπηση CSS3 RSS logo (μεγάλο)
- Προεπισκόπηση CSS3 RSS logo (Μεσαίο)
- Προεπισκόπηση CSS3 RSS logo (μικρό)
- Προεπισκόπηση CSS3 RSS logo (μεσαία, ανεστραμμένη)
- Κατεβάστε τα αρχεία προέλευσης του λογότυπου RSS CSS3 (.φερμουάρ)
Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Ο Irham Kendeni για το Hongkiat.com. Ο Irham, επίσης γνωστός ως Indaam, είναι σχεδιαστής και προγραμματιστής ιστοσελίδων από την Ινδονησία. Αγαπά επίσης την ανάπτυξη θεμάτων CSS και WordPress.
