Hur man skapar RSS Feed Logo med CSS3
RSS-logotypen är en av de vanligaste logotyperna i webbdesign, på grund av den funktion som den hänvisade till. Du såg många handledningar om att rita RSS-flödeslogotypen med grafisk programvara som Photoshop, men hur är det med ritar det rent med CSS3? Yeap, du hörde mig :-)
I detta tillfälle skulle jag vilja visa dig det enkla sättet att skapa en vanlig RSS-feedslogo med bara CSS3, följ såhär handledningen med omfattande steg och grafik för att få din första CSS3-matlogotyp!
Här är en förhandsgranskning av vad du skapar om en minut. Du kan också ladda ner källfilerna i slutet av handledningen.
Steg 1
Skapa en HTML-fil, sätt in följande kod i filen om den är helt tom.
Min första CSS3 RSS Feed Logo - Sätt in din HTML här -
Steg 2
Sätt in koden nedan i HTML-filen för att skapa en matruta.
HTML för flödesfältet
CSS för matningsbox
span.feed-box display: block; bredd: 200px; höjd: 200px; marginal: 0 auto; Bakgrund: # F9A004; boxskugga: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px O # C27C03, 6px 6px O # C27C03; -moz-box-skugga: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px O # C27C03; -webkit-box-skugga: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px O # C27C03; -moz-gränsen-radien: 20px; -webkit-gräns-radie: 20px; gränsstråle: 20px; span.feed-box * float: right; display: block;
Detta är resultatet du kommer att uppnå:
Steg 3
Vi kommer att rita en annan ruta som ligger i den första matningsrutan, så sätt HTML-koden nedan i den första matningsfältets HTML-kod. Vi kommer också att lägga till gränsen som hinder här.
HTML för mindre flödesfält
CSS för mindre matare
span.feed-box .feed-box-in border: 4px solid # FFC563; bredd: 184px; höjd: 184px; marginal: 4px 4px 0 0; -moz-gränsen-radien: 20px; -webkit-gräns-radie: 20px; gränsstråle: 20px; / * översvämning: gömd; * /
Detta är resultatet du kommer att uppnå:
Steg 4
I detta steg kommer vi att göra 1/4 stor cirkel. Sätt HTML-koden på 1/4 stor cirkel i den mindre matningsfältets HTML-kod, och nedan är dess kod:
HTML för 1/4 Big Circle
CSS för 1/4 Big Circle
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; bredd: 260px; höjd: 260px; gräns: 30px fast # FFDEA5; -moz-gränsen-radien: 260px; -webkit-gränsen-radien: 260px; gränsstråle: 260px;
Detta är resultatet du kommer att uppnå:
Steg 5
Vi kommer att göra den 1/4 småkretsen nu, sätt HTML-koden nedan i storcirkelens HTML-kod.
HTML för 1/4 Small Circle
CSS för 1/4 liten cirkel
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin: 16px 16px 0 0; bredd: 176px; höjd: 176px; gräns: 26px solid # FFDEA5; -moz-gränsen-radien: 176px; -webkit-gräns-radien: 176px; gränslinjen: 176px
Detta är resultatet du kommer att uppnå:
Steg 6
I steg 6 skapas den minsta cirkeln inuti den lilla cirkeln, så sätt HTML-koden i den lilla cirkelens HTML-kod.
HTML för Smallest Circle
CSS för minsta cirkel
span.feed-box .feed-box-in .feed-quarter-circle-stor .feed-quarter-circle-liten .feed-circle margin: 24px 24px 0 0; bakgrund: # FFDEA5; bredd: 70px; höjd: 70px; -moz-gränsen-radien: 70px; -webkit-gränsen-radien: 70px; gränslinjen: 70px
Detta är resultatet du kommer att uppnå:
Avsluta Touch
Sök koden, / * översvämning: gömd; * / ersätt sedan med den här koden, översvämning: gömd;, I så fall, ja! Du har precis uppnått en CSS3 RSS Feed-logotyp!
Bonus: Lägg till Hover Effect
Du vill inte ha din RSS-feedslogotyp utan magisk svävaffekt, skulle du? Lägg bara till CSS-stilen nedan för att uppnå den!
CSS för Hover Effect
span.feed-box: svävar (bakgrund: # 07C103; boxskugga: 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-skugga: 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-skugga: 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: svävar.feed-box-in border-color: # 58FC55; span.feed-box: svävar.feed-box-in .feed-quarter-circle-big, span.feed-box: svävar.feed-box-in .feed-quarter-circle-big .feed-quarter-circle -small border-color: # B9FFB7; span.feed-box: svävar.feed-box-in .feed-quarter-circle-stor .feed-quarter-circle-liten .feed-circle background: # B9FFB7;
Förhandsgranskningar och nedladdningar
Här är förhandsvisningar av CSS3-foderlogotypen i olika storlekar och en annan stil. Om du inte kan nå vissa steg kan du ladda ner källfilerna också.
- Förhandsgranska CSS3 RSS-logotyp (stor)
- Förhandsgranska CSS3 RSS-logotyp (medium)
- Förhandsgranska CSS3 RSS-logotyp (små)
- Förhandsgranska CSS3 RSS-logotyp (medium, inverterad)
- Hämta CSS3 RSS Logo källfiler (.blixtlås)
Redaktörens anteckning: Det här inlägget är skrivet av Irham Kendeni för Hongkiat.com. Irham, även känd som Indaam, är webbdesigner och utvecklare från Indonesien. Han älskar också CSS och WordPress temat utveckling.
