Jak utworzyć Logo kanału RSS z CSS3
Logo kanału RSS jest jednym z najczęściej używanych logo w projektowaniu stron internetowych, ze względu na funkcję, do której się odnosi. Widziałeś wiele samouczków na temat rysowania logo kanału RSS za pomocą oprogramowania graficznego, takiego jak Photoshop, ale co powiesz rysowanie go wyłącznie za pomocą CSS3? Yeap, słyszałeś mnie :-)
W ramach tej okazji chciałbym pokazać Wam prosty sposób na stworzenie standardowego logo kanału RSS za pomocą CSS3, więc postępuj zgodnie z samouczkiem z kompleksowymi krokami i grafiką, aby uzyskać pierwsze logo kanału CSS3!
Oto podgląd tego, co będziesz tworzyć za minutę. Możesz również pobrać pliki źródłowe na końcu samouczka.
Krok 1
Utwórz plik HTML, wstaw następujący kod do pliku, jeśli jest całkowicie pusty.
My First CSS3 RSS Feed Logo - Wstaw tutaj swój kod HTML -
Krok 2
Wstaw poniższy kod do pliku HTML, aby utworzyć pole podawania.
HTML dla pola Feed
CSS dla pola Feed
span.feed-box display: block; szerokość: 200px; wysokość: 200px; margin: 0 auto; tło: # 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; -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; border-radius: 20px; span.feed-box * float: right; Blok wyświetlacza;
Oto rezultat, który osiągniesz:
Krok 3
Będziemy rysować kolejne pudełko, które znajduje się w pierwszym polu podawania, więc umieść poniższy kod HTML w kodzie HTML pierwszego pola kanału. Dodamy również granicę jako barierę.
HTML dla mniejszego pola podawania
CSS dla mniejszego podajnika
span.feed-box .feed-box-in border: 4px solid # FFC563; szerokość: 184px; wysokość: 184px; margines: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; / * overflow: hidden; * /
Oto rezultat, który osiągniesz:
Krok 4
W tym kroku zrobimy 1/4 dużego koła. Umieść kod HTML 1/4 dużego koła w kodzie HTML mniejszego pola danych, a poniżej jego kod:
HTML dla 1/4 Big Circle
CSS dla 1/4 Big Circle
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; szerokość: 260px; wysokość: 260px; granica: 30px bryła # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; border-radius: 260px;
Oto rezultat, który osiągniesz:
Krok 5
Zrobimy teraz małe kółko 1/4, umieść poniższy kod HTML w kodzie HTML wielkiego koła.
HTML dla 1/4 małego okręgu
CSS dla 1/4 małego okręgu
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin: 16px 16px 0 0; szerokość: 176px; wysokość: 176px; granica: 26px bryła # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; border-radius: 176px
Oto rezultat, który osiągniesz:
Krok 6
W kroku 6 najmniejszy okrąg zostanie utworzony wewnątrz małego okręgu, więc umieść jego kod HTML w kodzie HTML małego okręgu.
HTML dla najmniejszego okręgu
CSS dla najmniejszego okręgu
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle margin: 24px 24px 0 0; tło: # FFDEA5; szerokość: 70px; wysokość: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px
Oto rezultat, który osiągniesz:
Finishing Touch
Przeszukaj kod, / * overflow: hidden; * / następnie zastąp ten kod, przepełnienie: ukryte;, w takim razie tak! Właśnie otrzymałeś logo kanału RSS CSS3!
Bonus: Add Hover Effect
Nie chcesz, aby Twoje logo kanału RSS było pozbawione magicznego efektu zawisu? Po prostu dodaj poniższy styl CSS, aby to osiągnąć!
CSS dla efektu Hover
span.feed-box: hover background: # 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; -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: hover .feed-box-in border-color: # 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 -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle background: # B9FFB7;
Podgląd i pliki do pobrania
Oto podgląd logo kanału CSS3 w różnych rozmiarach i innym stylu. Jeśli nie możesz osiągnąć określonego kroku, możesz również pobrać pliki źródłowe.
- Podgląd logo RSS CSS3 (duży)
- Podgląd logo RSS CSS3 (średni)
- Podgląd logo RSS CSS3 (mały)
- Podgląd logo RSS CSS3 (średnie, odwrócone)
- Pobierz CSS3 RSS Pliki źródłowe logo (.zamek błyskawiczny)
Nota redaktora: Ten wpis jest napisany przez Irham Kendeni dla Hongkiat.com. Irham, znany również jako Indaam, jest projektantem stron internetowych i deweloperem z Indonezji. Uwielbia także tworzenie motywów CSS i WordPress.
