Hoe maak je RSS Feed Logo met CSS3

Dit artikel maakt deel uit van onze "HTML5 / CSS3 Tutorials-serie" - speciaal bedoeld om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

RSS-feedlogo is een van de meest gebruikte logo's in webdesign, vanwege de functie waarnaar het verwijst. Je zag veel tutorials over het tekenen van het RSS-feedlogo met grafische software zoals Photoshop, maar hoe zit het met puur tekenen met CSS3 ? Yeap, je hoorde me :-)

In deze gelegenheid wil ik je de eenvoudige manier tonen om een ​​standaard RSS-feedlogo te maken met alleen CSS3, dus volg de zelfstudie met uitgebreide stappen en afbeeldingen om je eerste CSS3-feedlogo te krijgen!

Hier is een voorbeeld van wat u in een minuut zult maken. Je kunt ook de bronbestanden downloaden aan het einde van de tutorial.

Stap 1

Maak een HTML-bestand, voeg de volgende code in het bestand als het volledig leeg is.

 - Voer hier uw HTML in - 

Stap 2

Voeg de onderstaande code in het HTML-bestand in om een ​​feedbox te maken.

HTML for Feed box

CSS voor Feed box

 span.feed-box {weergave: blok; Breedte: 200px; Hoogte: 200px, marge: 0 auto; background: # F9A004; vakschaduw: 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-doos-schaduw: 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-doos-schaduw: 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; grensradius: 20px; } span.feed-box * {float: right; weergave: blok; } 

Dit is het resultaat dat u zult bereiken:

Stap 3

We tekenen nog een vak dat zich in de eerste feedbox bevindt, dus zet de HTML-code hieronder in de HTML-code van de eerste feedbox. We zullen hier ook grens als barrière toevoegen.

HTML voor kleinere feed box

CSS voor kleinere voerbak

 span.feed-box. feed-box-in {border: 4px solid # FFC563; breedte: 184 px; hoogte: 184 px; marge: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; grensradius: 20px; /* overloop verborgen; * /} 

Dit is het resultaat dat u zult bereiken:

Stap 4

In deze stap maken we 1/4 grote cirkel. Zet de HTML-code van 1/4 grote cirkel in de HTML-code van de kleinere feed box en hieronder staat de code:

HTML voor 1/4 Big Circle

CSS voor 1/4 Big Circle

 span.feed-box. feed-box-in. feed-quarter-circle-big {margin: 16px 16px 0 0; breedte: 260 px; hoogte: 260 px; rand: 30px vast # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260 px; grensradius: 260 px; } 

Dit is het resultaat dat u zult bereiken:

Stap 5

We maken nu de 1/4 kleine cirkel, zetten de HTML-code hieronder in de HTML-code van de grote cirkel.

HTML voor 1/4 kleine cirkel

CSS voor 1/4 kleine cirkel

 span.feed-box. feed-box-in. feed-quarter-circle-big .feed-quarter-circle-small {margin: 16px 16px 0 0; breedte: 176 px; hoogte: 176 px; rand: 26px vast # FFDEA5; -moz-border-radius: 176 px; -webkit-border-radius: 176 px; grensradius: 176 px} 

Dit is het resultaat dat u zult bereiken:

Stap 6

In stap 6 wordt de kleinste cirkel in de kleine cirkel gemaakt, dus zet de HTML-code in de HTML-code van de kleine cirkel.

HTML voor Smallest Circle

CSS voor de kleinste cirkel

 span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle {margin: 24px 24px 0 0; achtergrond: # FFDEA5; breedte: 70 px; hoogte: 70 px; -moz-border-radius: 70px; -webkit-border-radius: 70px; grensradius: 70px} 

Dit is het resultaat dat u zult bereiken:

Kers op de taart

Zoek in de code, /* overflow: hidden; */ /* overflow: hidden; */ vervang dan door deze code, overflow: hidden;, dan ja! U heeft net een CSS3 RSS Feed-logo bereikt!

Bonus: voeg zweeffout toe

U wilt uw RSS-feedlogo niet zonder een magisch zweefeffect, toch? Voeg eenvoudig de onderstaande CSS-stijl toe om dit te bereiken!

CSS voor zweefeffect

 span.feed-box: hover {background: # 07C103; vakschaduw: 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-doos-schaduw: 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-vak-schaduw: 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-colour: # 58FC55; } span.feed-box: hover. feed-box-in. feed-quarter-circle-big, span.feed-box: hover. feed-box-in. feed-quarter-circle-big .feed-quarter-circle -klein {border-colour: # B9FFB7; } span.feed-box: hover. feed-box-in. feed-quarter-circle-big. feed-quarter-circle-small .feed-circle {background: # B9FFB7; } 

Voorvertoningen en downloads

Hier zijn voorbeelden van het CSS3-feedlogo in verschillende formaten en in een andere stijl. Als u bepaalde stappen niet kunt uitvoeren, kunt u ook de bronbestanden downloaden.

• Voorbeeld CSS3 RSS-logo (groot)
• Voorbeeld CSS3 RSS-logo (gemiddeld)
• Voorbeeld CSS3 RSS-logo (klein)
• Voorbeeld CSS3 RSS-logo (gemiddeld, omgekeerd)
• Download CSS3 RSS Logo bronbestanden (.zip)

Noot van de redacteur: dit bericht is geschreven door Irham Kendeni voor Hongkiat.com. Irham, ook bekend als Indaam, is een webontwerper en -ontwikkelaar uit Indonesië. Hij houdt ook van CSS en WordPress thema-ontwikkeling. Bezoek de website van Indaam.

Wat te overwegen bij het lokaliseren van uw website in het Engels

Voor veel bedrijven is de gedachte aan uitbreiding aantrekkelijk, maar de verhuizing kan gepaard gaan met bezorgdheid over de kosten en het afdwalen naar het onbekende. Het komt maar al te vaak voor dat bedrijven in een catch-22-situatie terechtkomen; de ROI van lokalisatie is een onbekende, maar deze blijft onbekend tenzij u een sprong van vertrouwen neemt

(Technische en ontwerptips)

20 Tech-knock-ups die u versteld doen staan

Denk nu meteen aan alle populaire hardwaremerken in technologie . De appels en Sonys hebben de duidelijke eer om als een luxe merk te worden beschouwd. Iedereen wil er een en iedereen die iemand is, zou ze kopen en met hun collega's pronken, wat een aantrekkingskracht zou creëren. Helaas kan niet iedereen het zich veroorloven en dat is de reden waarom knockoffs te hulp komen.

(Technische en ontwerptips)