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.

Run & Share Snippets mit Glot.io

Es gibt Dutzende von browserbasierten IDEs, aber die meisten konzentrieren sich auf Frontend-Sprachen : HTML, CSS und JavaScript.Glot.io ist ein neuer Anwärter, der sich auf Dutzende von Programmiersprachen konzentriert, für die normalerweise Runtime-Software benötigt wird . Diese Sprachen gehen weit über das Internet hinaus, einschließlich C #, Java, Swift, Haskell und vieles mehr.Glot

(Tech- und Design-Tipps)

Erstellen Sie Ihre eigene Seite Scrollen Effekte mit Roll.js

Sie können Dutzende von Scroll-Bibliotheken im gesamten Web finden. Die meisten sind in JavaScript geschrieben und haben ihre eigenen Effekte, die Sie für einzelne Seitenlayouts, On-Scroll-Animationen und vieles mehr neu gestalten können.Aber was ist mit der Codierung eigener Scroll-Effekte ? Oder was ist, wenn Sie nur eine einfache Möglichkeit haben möchten, zu verfolgen, wie weit die Seite, auf der ein Benutzer gescrollt hat, ist?Roll

(Tech- und Design-Tipps)