So erstellen Sie ein RSS-Feed-Logo mit CSS3
Das RSS-Feed-Logo ist aufgrund seiner Funktion eines der am häufigsten verwendeten Logos im Webdesign. Sie haben viele Tutorials zum Zeichnen des RSS-Feed-Logos mit einer Grafiksoftware wie Photoshop gesehen, aber wie wäre es damit rein mit CSS3 zeichnen? Ja, du hast mich gehört :-)
In dieser Gelegenheit möchte ich Ihnen zeigen, wie Sie mit CSS3 ein einfaches RSS-Feed-Logo erstellen können. Folgen Sie dem Tutorial mit umfassenden Schritten und Grafiken, um Ihr erstes CSS3-Feed-Logo zu erhalten!
Hier sehen Sie eine Vorschau auf das, was Sie in einer Minute erstellen werden. Sie können die Quelldateien auch am Ende des Tutorials herunterladen.
Schritt 1
Erstellen Sie eine HTML-Datei und fügen Sie den folgenden Code in die Datei ein, wenn sie vollständig leer ist.
Mein erstes CSS3-RSS-Feed-Logo - Fügen Sie hier Ihren HTML-Code ein -
Schritt 2
Fügen Sie den folgenden Code in die HTML-Datei ein, um ein Feed-Feld zu erstellen.
HTML für die Feedbox
CSS für Feedbox
span.feed-box display: block; Breite: 200px; Höhe: 200px; Marge: 0 auto; Hintergrund: # F9A004; Box-Schatten: 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-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-border-radius: 20px; Grenzradius: 20px; span.feed-box * float: right; Bildschirmsperre;
Dies ist das Ergebnis, das Sie erreichen werden:
Schritt 3
Wir werden eine weitere Box zeichnen, die sich in der ersten Feedbox befindet. Fügen Sie den unten stehenden HTML-Code in den HTML-Code der ersten Feedbox ein. Wir werden hier auch Grenze als Barriere hinzufügen.
HTML für kleinere Feedbox
CSS für kleinere Feedbox
span.feed-box .feed-box-in border: 4px solid # FFC563; Breite: 184px; Höhe: 184px; Marge: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; Grenzradius: 20px; /* Überlauf versteckt; * /
Dies ist das Ergebnis, das Sie erreichen werden:
Schritt 4
In diesem Schritt machen wir einen 1/4 großen Kreis. Fügen Sie den HTML-Code eines 1/4 großen Kreises in den HTML-Code des kleineren Feed-Felds ein. Nachfolgend finden Sie den Code:
HTML für 1/4 Big Circle
CSS für 1/4 Big Circle
span.feed-box .feed-box-in .feed-district-circle-big Marge: 16px 16px 0 0; Breite: 260px; Höhe: 260px; Grenze: 30px fest # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; Grenzradius: 260px;
Dies ist das Ergebnis, das Sie erreichen werden:
Schritt 5
Wir machen jetzt den 1/4 kleinen Kreis, fügen Sie den HTML-Code unten in den HTML-Code des großen Kreises ein.
HTML für 1/4 Small Circle
CSS für 1/4 Small Circle
span.feed-box .feed-box-in .feed-Viertelkreis-groß .feed-Viertelkreis-klein Marge: 16px 16px 0 0; Breite: 176px; Höhe: 176px; Grenze: 26px fest # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; Grenzradius: 176px
Dies ist das Ergebnis, das Sie erreichen werden:
Schritt 6
In Schritt 6 wird der kleinste Kreis innerhalb des kleinen Kreises erstellt. Fügen Sie also seinen HTML-Code in den HTML-Code des kleinen Kreises ein.
HTML für den kleinsten Kreis
CSS für kleinsten Kreis
span.feed-box .feed-box-in .feed-district-circle-big .feed-district-circle-small .feed-circle margin: 24px 24px 0 0; Hintergrund: # FFDEA5; Breite: 70px; Höhe: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; Grenzradius: 70px
Dies ist das Ergebnis, das Sie erreichen werden:
Feinschliff
Suchen Sie den Code, /* Überlauf versteckt; * / dann mit diesem Code ersetzen, Überlauf versteckt;, dann ja! Sie haben gerade ein CSS3-RSS-Feed-Logo erhalten!
Bonus: Hover-Effekt hinzufügen
Sie möchten Ihr RSS-Feed-Logo nicht ohne magischen Schwebeflug-Effekt haben, oder? Fügen Sie einfach den CSS-Stil unten hinzu, um dies zu erreichen!
CSS für den Hover-Effekt
span.feed-box: hover Hintergrund: # 07C103; Box-Schatten: 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: hover .feed-box-in border-color: # 58FC55; span.feed-box: Schwebeflug .feed-box-in .feed-Viertelkreis-Groß, span.feed-box: Schwebeflug .feed-Box-in .feed-Viertelkreis-großer .feed-Viertelkreis -kleine border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-district-circle-big .feed-district-circle-small .feed-circle background: # B9FFB7;
Vorschauen und Downloads
Hier finden Sie Vorschauen des CSS3-Feed-Logos in verschiedenen Größen und einem anderen Stil. Wenn Sie bestimmte Schritte nicht ausführen können, können Sie auch die Quelldateien herunterladen.
- Vorschau CSS3 RSS-Logo (groß)
- Vorschau CSS3 RSS-Logo (Mittel)
- Vorschau CSS3 RSS-Logo (klein)
- Vorschau CSS3 RSS-Logo (mittel, invertiert)
- CSS3 RSS Logo-Quelldateien herunterladen (.Postleitzahl)
Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Irham Kendeni für Hongkiat.com. Irham, auch bekannt als Indaam, ist ein Webdesigner und -entwickler aus Indonesien. Er liebt auch die CSS- und WordPress-Theme-Entwicklung.
