Ako vytvoriť RSS Feed Logo s CSS3
Logo RSS feed je jedným z najčastejšie používaných loga v webovom dizajne, kvôli funkcii, ktorú sme uviedli. Videli ste veľa návodov na kreslenie log RSS kanálu pomocou grafického softvéru, ako je Photoshop, ale čo kreslenie čisto pomocou CSS3? Jo, počul si ma :-)
V tejto príležitosti by som vám chcel ukázať jednoduchý spôsob, ako vytvoriť štandardné logo RSS feed s iba CSS3, a preto postupujte podľa tutoriálu s komplexnými krokmi a grafikou, aby ste získali prvé logo kanála CSS3!
Tu je náhľad toho, čo vytvoríte za minútu. Môžete si tiež stiahnuť zdrojové súbory na konci tutoriálu.
Krok 1
Vytvorte súbor HTML, do súboru vložte nasledujúci kód, ak je úplne prázdny.
Môj prvý CSS3 RSS Feed Logo - Vložte svoje HTML tu -
Krok 2
Vložte kód nižšie do súboru HTML, aby sa vytvoril informačný kanál.
HTML for Feed box
CSS for Feed box
span.feed-box zobrazenie: blok; šírka: 200px; výška: 200px; marža: 0 auto; background: # F9A004; box-tieň: 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-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; -webkit-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-border-radius: 20px; -webkit-border-radius: 20px; polomer okrajov: 20 pixlov; span.feed-box * float: vpravo; zobrazenie: blok;
To je výsledok, ktorý dosiahnete:
Krok 3
Budeme nakresliť ďalšiu škatuľu, ktorá sa nachádza vo vnútri prvého podávača, takže vložte HTML kód do HTML kódu prvého príspevkového poľa. Tiež pridáme hranicu ako bariéru.
HTML pre menšie krabice
CSS pre menšie krabice
span.feed-box.feed-box-in okraj: 4px solid # FFC563; šírka: 184px; výška: 184px; okraj: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; polomer okrajov: 20 pixlov; / * pretečenie: skryté; * /
To je výsledok, ktorý dosiahnete:
Krok 4
V tomto kroku urobíme 1/4 veľkého kruhu. Vložte HTML kód 1/4 veľkého kruhu do HTML kódu menšieho príspevkového poľa a nižšie je jeho kód:
HTML pre 1/4 veľký kruh
CSS pre 1/4 veľký kruh
span.feed-box.feed-box-in.feed štvrť-kruh-veľké margin: 16px 16px 0 0; šírka: 260px; výška: 260px; okraj: 30px masívny # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; polomer okraja: 260 pixlov;
To je výsledok, ktorý dosiahnete:
Krok 5
Budeme robiť 1/4 malý kruh teraz, vložte HTML kód nižšie do veľkého kruhu HTML kód.
HTML pre 1/4 malý kruh
CSS pre 1/4 malý kruh
span.feed-box.feed-box-in.feed štvrť-kruh-veľký .feed štvrť-kruh-malý (rozpätie: 16px 16px 0 0; šírka: 176px; výška: 176px; hranica: 26px masívna # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; okraj okraja: 176px
To je výsledok, ktorý dosiahnete:
Krok 6
V kroku 6 sa v malom kruhu vytvorí najmenší kruh, tak vložte jeho HTML kód do HTML kódu malého kruhu.
HTML pre najmenší kruh
CSS pre najmenší kruh
span.feed-box.feed-box-in.feed štvrť-kruh-veľký.feed štvrť-kruh-malý. kŕmenie-kruh margin: 24px 24px 0 0; pozadie: # FFDEA5; šírka: 70px; výška: 70px; -moz-okraj-polomer: 70px; -webkit-border-radius: 70px; polomer okrajov: 70px
To je výsledok, ktorý dosiahnete:
Dokončovanie Touch
Vyhľadajte kód, / * pretečenie: skryté; * / potom ho nahraďte kódom, pretečenie: skryté;, potom áno! Práve ste dosiahli logo RSS kanálu CSS3!
Bonus: Pridať efekt presunu
Nechcete, aby vaše logo RSS kanálu bez magického vznášať sa efekt, či nie? Stačí len pridať štýl CSS, aby ste to dosiahli!
CSS pre efekt vznášania
span.feed-box: hover background: # 07C103; box-tieň: 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-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; -webkit-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; span.feed-box: presuňte .feed-box-in border-color: # 58FC55; span.feed-box: hover.feed-box-in.funded-circle-veľký, span.feed-box: hover.feed-box-in.feed štvrť-kruh-veľký.feed štvrť-kruh -small border-color: # B9FFB7; span.feed-box: hover.feed-box-in .pred štvrť-kruh-veľký.feed-štvrť-kruh-malý .feed-kruh background: # B9FFB7;
Ukážky a súbory na prevzatie
Tu sú náhľady loga kanála CSS3 v rôznych veľkostiach a inom štýle. Ak nemôžete dosiahnuť určitý krok, môžete si tiež stiahnuť zdrojové súbory.
- Preview CSS3 RSS logo (veľký)
- Preview CSS3 RSS logo (Stredná)
- Preview CSS3 RSS logo (Malý)
- Preview CSS3 RSS logo (stredné, obrátené)
- Stiahnite si CSS3 RSS zdrojové súbory (ZIP)
Poznámka redaktora: Tento príspevok je napísaný používateľom Irham Kendeni pre Hongkiat.com. Irham, tiež známy ako Indaam, je webový dizajnér a vývojár z Indonézie. On tiež miluje CSS a WordPress tému vývoj.
