Hoe maak je RSS Feed Logo met CSS3
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 teken het puur met behulp van CSS3? Yeap, je hoorde me :-)
In deze gelegenheid wil ik je de eenvoudige manier laten zien om een standaard RSS-feedlogo met alleen CSS3 te maken, dus volg de zelfstudie met uitgebreide stappen en afbeeldingen om je eerste CSS3-feedlogo te krijgen!
Hier is een voorbeeld van wat u zo snel mogelijk gaat maken. U kunt de bronbestanden ook downloaden aan het einde van de zelfstudie.
Stap 1
Maak een HTML-bestand, voeg de volgende code in het bestand als het volledig leeg is.
Mijn eerste CSS3 RSS Feed-logo - Voer hier uw HTML in -
Stap 2
Voeg de onderstaande code in het HTML-bestand in om een feedbox te maken.
HTML voor Feed box
CSS voor Feed box
span.feed-box weergave: blok; width: 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 zullen nog een vak tekenen 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 kleinste cirkel
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
Doorzoek de code, /* overloop verborgen; * / vervang dan door deze code, overloop verborgen;, 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-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; 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 bereiken, kunt u ook de bronbestanden downloaden.
- Voorbeeld CSS3 RSS-logo (groot)
- Voorbeeld CSS3 RSS-logo (medium)
- Voorbeeld CSS3 RSS-logo (klein)
- Voorbeeld CSS3 RSS-logo (medium, omgekeerd)
- Download CSS3 RSS Logo bronbestanden (ZIP)
Opmerking van de uitgever: Dit bericht is geschreven door Irham Kendeni voor Hongkiat.com. Irham, ook bekend als Indaam, is een webdesigner en -ontwikkelaar uit Indonesië. Hij houdt ook van CSS en WordPress thema-ontwikkeling.
