Sådan oprettes RSS Feed Logo med CSS3
RSS feed logo er et af de mest almindeligt anvendte logo i webdesign på grund af den funktion, den refererede til. Du så mange tutorials om tegning af RSS-feed-logoet ved hjælp af grafisk software som Photoshop, men hvad med tegner det rent ved hjælp af CSS3? Yeap, du hørte mig :-)
I denne lejlighed vil jeg gerne vise dig den nemme måde at oprette et standard RSS-feed-logo på med bare CSS3. Følg vejledningen med omfattende trin og grafik for at få din første CSS3-feedlogo!
Her er et eksempel på, hvad du vil oprette om et minut. Du kan også downloade kildefilerne i slutningen af vejledningen.
Trin 1
Opret en HTML-fil, indsæt følgende kode i filen, hvis den er helt tom.
Min første CSS3 RSS Feed Logo - Indsæt din HTML her -
Trin 2
Indsæt koden nedenfor i HTML-filen for at lave en feed box.
HTML til Feed box
CSS til Feed Box
span.feed-box display: block; bredde: 200 pixel; højde: 200 pixel; margin: 0 auto; baggrund: # F9A004; box-shadow: 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-skygge: 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-skygge: 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-grænse-radius: 20px; -webkit-grænse-radius: 20px; grænse-radius: 20px; span.feed-box * float: højre; display: blok;
Dette er resultatet du opnår:
Trin 3
Vi tegner en anden boks, som er placeret i den første feed-boks, så sæt HTML-koden nedenfor i den første feedboks HTML-kode. Vi vil også tilføje grænsen som barriere her.
HTML for mindre feed boks
CSS for mindre feed boks
span.feed-box .feed-box-in grænse: 4px solid # FFC563; bredde: 184px; højde: 184px; margin: 4px 4px 0 0; -moz-grænse-radius: 20px; -webkit-grænse-radius: 20px; grænse-radius: 20px; / * overløb: skjult; * /
Dette er resultatet du opnår:
Trin 4
I dette trin vil vi lave 1/4 stor cirkel. Indsæt HTML-koden for 1/4 storcirkel i den mindre feedboksens HTML-kode, og nedenfor er dens kode:
HTML til 1/4 Big Circle
CSS for 1/4 Big Circle
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; bredde: 260px; højde: 260px; grænse: 30px fast # FFDEA5; -moz-grænse-radius: 260px; -webkit-grænse-radius: 260px; grænse-radius: 260px;
Dette er resultatet du opnår:
Trin 5
Vi skal lave 1/4 lille cirkel nu, læg HTML-koden nedenfor i storcirkelens HTML-kode.
HTML til 1/4 lille cirkel
CSS for 1/4 lille cirkel
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin: 16px 16px 0 0; bredde: 176px; højde: 176px; grænse: 26px fast # FFDEA5; -moz-grænse-radius: 176px; -webkit-grænse-radius: 176px; grænse-radius: 176px
Dette er resultatet du opnår:
Trin 6
I trin 6 oprettes den mindste cirkel inde i den lille cirkel, så sæt HTML-koden i den lille cirkels HTML-kode.
HTML for mindste cirkel
CSS for mindste cirkel
span.feed-box .feed-box-in .feed-quarter-cirkel-stor .feed-quarter-circle-small .feed-circle margin: 24px 24px 0 0; baggrund: # FFDEA5; bredde: 70px; højde: 70px; -moz-grænse-radius: 70px; -webkit-grænse-radius: 70px; border-radius: 70px
Dette er resultatet du opnår:
Afslutning Touch
Søg i koden, / * overløb: skjult; * / Udskift derefter med denne kode, overløb: skjult;, så ja! Du har netop opnået et CSS3 RSS Feed logo!
Bonus: Tilføj Hover Effect
Du vil ikke have dit RSS feed logo uden magisk svæveffekt, ville du? Bare tilføj CSS stilen nedenfor for at opnå det!
CSS for Hover Effect
span.feed-box: svever baggrund: # 07C103; box-shadow: 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-skygge: 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-skygge: 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ævning .feed-box-in border-farve: # 58FC55; span.feed-box: hover.feed-box-in .feed-quarter-cirkel-big, span.feed-box: svømning .feed-box-in .feed-quarter-cirkel-stor .feed-quarter-cirkel -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-cirkel baggrund: # B9FFB7;
Forhåndsvisninger og downloads
Her er forhåndsvisninger af CSS3 feed-logoen i forskellige størrelser og en anden stil. Hvis du ikke kan opnå et bestemt trin, kan du også downloade kildefilerne.
- Forhåndsvisning CSS3 RSS logo (stor)
- Forhåndsvisning CSS3 RSS logo (medium)
- Forhåndsvisning CSS3 RSS logo (lille)
- Forhåndsvisning CSS3 RSS logo (medium, inverteret)
- Download CSS3 RSS Logo kildefiler (.Zip)
Redaktørens note: Dette indlæg er skrevet af Irham Kendeni til Hongkiat.com. Irham, også kendt som Indaam, er webdesigner og udvikler fra Indonesien. Han elsker også CSS og WordPress tema udvikling.
