Jak vytvořit RSS Feed Logo s CSS3
RSS feed logo je jedním z nejpoužívanějších loga v designu webu, vzhledem k funkci, na kterou odkazuje. Viděli jste mnoho tutoriálů o kreslení loga RSS kanálu pomocí grafického softwaru, jako je Photoshop, ale jak to kreslení pouze pomocí CSS3? Jo, slyšeli jste mě :-)
V této příležitosti bych vám chtěl ukázat jednoduchý způsob, jak vytvořit standardní logo RSS kanálu s pouhým CSS3, takže se můžete řídit výukovým programem s rozsáhlými kroky a grafikou, abyste získali své první logo kanálu CSS3!
Zde je náhled toho, co vytvoříte za minutu. Zdrojové soubory můžete také stáhnout na konci výuky.
Krok 1
Vytvořit soubor HTML, vložte následující kód do souboru, pokud je zcela prázdný.
Moje první CSS3 RSS Feed Logo - Vložte zde HTML -
Krok 2
Vložte kód níže do souboru HTML, abyste vytvořili pole pro podávání.
Pole HTML pro informační kanál
CSS pro pole Feed
span.feed-box zobrazit: blok; šířka: 200px; výška: 200px; okraj: 0 auto; pozadí: # 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-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, 6px 6px 0 # C27C03, 6px 6px 0 # C27C03; -webk-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, 6px 6px 0 # C27C03; -moz-border-radius: 20px; -webk-border-radius: 20px; hraniční rádius: 20px; span.feed-box * float: right; zobrazení: blok;
To je výsledek, kterého dosáhnete:
Krok 3
Budeme kreslit další krabici, která je umístěna uvnitř prvního podávacího pole, takže vložte HTML kód níže do HTML kódu prvního boxu. Také zde přidáme hranici jako bariéru.
HTML pro menší vstupní box
CSS pro menší vstupní box
span.feed-box .feed-box-in hranice: 4px pevné # FFC563; šířka: 184px; výška: 184px; okraj: 4px 4px 0 0; -moz-border-radius: 20px; -webk-border-radius: 20px; hraniční rádius: 20px; / * přetečení: skryté; * /
To je výsledek, kterého dosáhnete:
Krok 4
V tomto kroku uděláme 1/4 velkého kruhu. Vložte HTML kód 1/4 velkého kruhu do HTML kódu menšího boxu a níže je jeho kód:
HTML pro 1/4 velký kruh
CSS pro 1/4 velký kruh
span.feed-box .feed-box-in .feed-quarter-circle-big okraj: 16px 16px 0 0; šířka: 260px; výška: 260px; okraj: 30px pevná # FFDEA5; -moz-hraniční rádius: 260px; -webk-hraniční rádius: 260px; hraniční hrana: 260px;
To je výsledek, kterého dosáhnete:
Krok 5
Nyní uděláme 1/4 malý kruh, vložíme níže uvedený HTML kód do HTML kódu velkého kruhu.
HTML pro 1/4 malý kruh
CSS pro 1/4 malý kruh
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small okraj: 16px 16px 0 0; šířka: 176px; výška: 176px; hranice: 26px pevná # FFDEA5; -moz-hraniční rádius: 176px; -webk-border-radius: 176px; poloměr hranic: 176px
To je výsledek, kterého dosáhnete:
Krok 6
V kroku 6 bude vytvořen nejmenší kruh uvnitř malého kruhu, takže HTML kód vložte do HTML kódu malého kruhu.
HTML pro nejmenší kruh
CSS pro nejmenší kruh
span.feed-box .feed-box-in .feed-quarter-circle-velký .feed-quarter-circle-small-small .feed-circle okraj: 24px 24px 0 0; pozadí: # FFDEA5; šířka: 70px; výška: 70px; -moz-hraniční rádius: 70px; -webk-hraniční rádius: 70px; poloměr hranic: 70px
To je výsledek, kterého dosáhnete:
Dokončovací dotyk
Vyhledejte kód, / * přetečení: skryté; * / pak nahraďte tímto kódem, přetečení: skryté;, pak ano! Právě jste dosáhli loga CSS3 RSS Feed!
Bonus: Přidat efekt vznášení
Nebudete chtít logo RSS kanálu bez magického vznášejícího se efektu, že? Chcete-li toho dosáhnout, přidejte níže uvedený styl CSS!
CSS pro Hover efekt
span.feed-box: hover pozadí: # 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-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; -webk-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: hover .feed-box-in border-color: # 58FC55; span.feed-box: vznášet se .feed-box-in .feed-quarter-circle-large, span.feed-box: vznášet se .feed-box-in .feed-quarter-circle-big .feed-quarter-circle -small border-color: # B9FFB7; span.feed-box: vznášet se .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle background: # B9FFB7;
Náhledy a soubory ke stažení
Zde jsou náhledy loga CSS3 feed v různých velikostech a jiném stylu. Pokud nemůžete dosáhnout určitého kroku, můžete také stáhnout zdrojové soubory.
- Náhled CSS3 RSS logo (velký)
- Náhled CSS3 RSS logo (střední)
- Náhled CSS3 RSS logo (malý)
- Náhled CSS3 RSS logo (střední, obrácené)
- Stáhněte si zdrojové soubory loga CSS3 RSS (.zip)
Poznámka editora: Tento příspěvek je napsán Irham Kendeni pro Hongkiat.com. Irham, také známý jako Indaam, je web designer a vývojář z Indonésie. Také miluje vývoj CSS a WordPress.
