Wie man RSS Feed Logo mit CSS3 erstellt

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen.

RSS-Feed-Logo ist eines der am häufigsten verwendeten Logo im Web-Design, aufgrund der Funktion, die es bezeichnet. Sie haben viele Tutorials über das Zeichnen des RSS-Feed-Logos mit Grafiksoftware wie Photoshop gesehen, aber wie wäre es , es mit CSS3 zu zeichnen ? Yeap, du hast mich gehört :-)

In dieser Gelegenheit möchte ich Ihnen die einfache Möglichkeit zeigen, ein Standard-RSS-Feed-Logo nur mit CSS3 zu erstellen. Folgen Sie dem Tutorial mit umfassenden Schritten und Grafiken, um Ihr erstes CSS3-Feed-Logo zu erhalten!

Hier sehen Sie eine Vorschau dessen, was Sie in einer Minute erstellen werden. Sie können die Quelldateien auch am Ende des Lernprogramms herunterladen.

Schritt 1

Erstellen Sie eine HTML-Datei, fügen Sie den folgenden Code in die Datei ein, wenn sie vollständig leer ist.

 - Fügen Sie Ihren HTML-Code hier ein - 

Schritt 2

Fügen Sie den folgenden Code in die HTML-Datei ein, um eine Feed-Box zu erstellen.

HTML für Feedbox

CSS für die Feedbox

 span.feed-box {Anzeige: Block; Breite: 200px; Höhe: 200px; Rand: 0 automatisch; Hintergrund: # F9A004; Kastenschatten: 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-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; -Webkit-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-border-radius: 20px; -webkit-border-radius: 20px; Rand-Radius: 20px; } span.feed-box * {float: rechts; Bildschirmsperre; } 

Dies ist das Ergebnis, das Sie erreichen werden:

Schritt 3

Wir werden eine weitere Box zeichnen, die sich in der ersten Feedbox befindet, also fügen Sie den HTML-Code unten in den HTML-Code der ersten Feedbox ein. Wir werden hier auch die Grenze als Barriere hinzufügen.

HTML für kleinere Feed-Box

CSS für kleinere Feed-Box

 span.feed-box.feed-box-in {Rahmen: 4px solid # FFC563; Breite: 184px; Höhe: 184px; Rand: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; Rand-Radius: 20px; /* Überlauf versteckt; * /} 

Dies ist das Ergebnis, das Sie erreichen werden:

Schritt 4

In diesem Schritt werden wir 1/4 großen Kreis machen. Setzen Sie den HTML-Code von 1/4 großen Kreis in den HTML-Code der kleineren Feed-Box, und darunter ist der Code:

HTML für 1/4 großer Kreis

CSS für 1/4 großen Kreis

 span.feed-box.feed-box-in.feed-viertelkreis-groß {margin: 16px 16px 0 0; Breite: 260px; Höhe: 260px; Grenze: 30px fest # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; Rand-Radius: 260px; } 

Dies ist das Ergebnis, das Sie erreichen werden:

Schritt 5

Wir werden jetzt den 1/4 kleinen Kreis machen, den HTML-Code unten in den HTML-Code des großen Kreises einfügen.

HTML für 1/4 kleiner Kreis

CSS für 1/4 kleiner Kreis

 span.feed-box.feed-box-in.feed-viertelkreis-gross .feed-viertelkreis-klein {margin: 16px 16px 0 0; Breite: 176 px; Höhe: 176px; Grenze: 26px fest # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; Umrandungsradius: 176px} 

Dies ist das Ergebnis, das Sie erreichen werden:

Schritt 6

In Schritt 6 wird der kleinste Kreis innerhalb des kleinen Kreises erstellt. Geben Sie den HTML-Code in den HTML-Code des kleinen Kreises ein.

HTML für den kleinsten Kreis

CSS für den kleinsten Kreis

 span.feed-box.feed-box-in.feed-viertelkreis-groß .feed-viertelkreis-klein .feed-circle {margin: 24px 24px 0 0; Hintergrund: # FFDEA5; Breite: 70px; Höhe: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; Umrandungsradius: 70px} 

Dies ist das Ergebnis, das Sie erreichen werden:

Feinschliff

Suchen Sie den Code, /* overflow: hidden; */ /* overflow: hidden; */ dann mit diesem Code ersetzen, overflow: hidden;, dann ja! Du hast gerade ein CSS3 RSS Feed Logo erreicht!

Bonus: Fügen Sie den Hover-Effekt hinzu

Sie werden nicht Ihr RSS-Feed-Logo ohne magischen Hover-Effekt wollen, oder? Fügen Sie einfach den CSS-Stil hinzu, um es zu erreichen!

CSS für den Hover-Effekt

 span.feed-box: schweben {Hintergrund: # 07C103; Kastenschatten: 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-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; -Webkit-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; } span.feed-box: schweben .feed-box-in {border-color: # 58FC55; } span.feed-box: schweben .feed-box-in .feed-viertelkreis-groß, span.feed-box: schweben .feed-box-in .feed-viertelkreis-groß .feed-viertelkreis -klein {border-color: # B9FFB7; } span.feed-box: schweben .feed-box-in .feed-viertelkreis-groß .feed-viertelkreis-klein .feed-circle {background: # B9FFB7; } 

Vorschau und Downloads

Hier sind Vorschaubilder des CSS3-Feed-Logos in verschiedenen Größen und einem anderen Stil. Wenn Sie einen bestimmten Schritt nicht erreichen 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)
• Download CSS3 RSS Logo Quelldateien (.zip)

Anmerkung der Redaktion: Dieser Beitrag wurde von Irham Kendeni für Hongkiat.com geschrieben. Irham, auch bekannt als Indaam, ist ein Webdesigner und Entwickler aus Indonesien. Er liebt auch CSS und WordPress Theme-Entwicklung. Besuchen Sie die Website von Indaam.

Warum Sie als Angestellter besser sein können als ein Manager

Während meiner Tätigkeit im Finanzsektor stieß ich auf viele hoch talentierte Mitarbeiter, die brillante Mitarbeiter waren . Sie haben gearbeitet, Ergebnisse geliefert und hoch gelobte Jobs in ihren Projekten geleistet. Einige von ihnen wurden sogar als der nächste Manager oder Leiter des Unternehmens angepriesen. Ta

(Tech- und Design-Tipps)

So erstellen Sie Ihre eigenen WordPress Shortcodes

Shortcodes sind eine sehr mächtige Funktion von WordPress. Im Wesentlichen ist ein Shortcode ein Platzhalter für andere Inhalte. Ein bekannter Shortcode ist der eingebaute Gallery-Shortcode. Schreib einfach in den WordPress-Editor und es wird durch eine Galerie von Bildern aus Medien auf den Beitrag hochgeladen ersetzt werden.O

(Tech- und Design-Tipps)