Kako ustvariti RSS Feed Logo z CSS3
Logotip RSS je eden od najpogosteje uporabljenih logotipov v spletnem oblikovanju zaradi funkcije, ki jo je navedel. Videli ste veliko vaj za risanje logotipa RSS z uporabo grafične programske opreme, kot je Photoshop, ampak kako risanje zgolj z uporabo CSS3? Yeap, slišal si me :-)
V tej priložnosti vam želim pokazati preprost način za ustvarjanje standardnega logotipa RSS s samo CSS3, zato sledite navodilom s celovitimi koraki in grafiko, da dobite svoj prvi logo CSS3 vira!
Predogled tega, kar boste ustvarili v minuti. Izvirne datoteke lahko prenesete tudi na koncu vadnice.
Korak 1
Ustvarite datoteko HTML, vnesite naslednjo kodo v datoteko, če je popolnoma prazna.
Moj prvi CSS3 RSS novice - Tukaj vstavite HTML -
2. korak
Spodnjo kodo vstavite v datoteko HTML, da ustvarite polje za vir.
Polje HTML za vir
CSS za polje Feed
span.feed-box prikaz: blok; širina: 200px; višina: 200px; margin: 0 auto; ozadje: # 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; obrobni polmer: 20px; span.feed-box * float: desno; prikaz: blok;
To je rezultat, ki ga boste dosegli:
3. korak
Risali bomo še eno polje, ki se nahaja znotraj prvega polja, tako da spodnjo kodo HTML vnesite v HTML kodo prvega polja. Dodali bomo tudi mejo kot oviro.
HTML za manjši vir
CSS za manjši vir
span.feed-box .feed-box-in border: 4px solid # FFC563; širina: 184px; višina: 184px; marža: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; obrobni polmer: 20px; / * overflow: hidden; * /
To je rezultat, ki ga boste dosegli:
4. korak
V tem koraku bomo naredili 1/4 velik krog. HTML kodo 1/4 velikega kroga vstavite v HTML kodo manjšega vira in spodaj je koda:
HTML za velik krog 1/4
CSS za velik krog 1/4
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; širina: 260px; višina: 260px; meja: 30px trdna # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; obrobni polmer: 260px;
To je rezultat, ki ga boste dosegli:
Korak 5
Zdaj bomo naredili 1/4 majhen krog, postavili spodnjo kodo HTML v HTML kodo velikega kroga.
HTML za 1/4 majhnega kroga
CSS za 1/4 majhen krog
span.feed-box .feed-box-in .feed-Četrt-krog-velik .feed-četrt-krog-majhen margin: 16px 16px 0 0; širina: 176px; višina: 176px; meja: 26px trdna # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; meji s polmerom: 176px
To je rezultat, ki ga boste dosegli:
6. korak
V 6. koraku bo v majhnem krogu ustvarjen najmanjši krog, zato vtaknite svojo HTML kodo v HTML kodo majhnega kroga.
HTML za najmanjši krog
CSS za najmanjši krog
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle margin: 24px 24px 0 0; ozadje: # FFDEA5; širina: 70px; višina: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; obrobni polmer: 70px
To je rezultat, ki ga boste dosegli:
Dokončanje Dotaknite se
Preiščite kodo, / * overflow: hidden; * / nato zamenjajte s to kodo, overflow: hidden;, potem da! Pravkar ste dosegli logo CSS3 RSS Feed!
Bonus: Dodaj učinek premikanja
Ne boste želeli, da vaš logo RSS brez čarobnega hover učinka, bi si? Da bi to dosegli, dodajte spodnji slog CSS!
CSS za učinek Hover
span.feed-box: hover ozadje: # 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: lebdenje .feed-box-in border-color: # 58FC55; span.feed-box: hover .feed-box-in .feed-Četrt-krog-velik, span.feed-box: hover .feed-box-in .feed-Četrt-krog-velik .feed-Četrt-krog -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .feed-Četrt-krog-velik .feed-četrt-krog-majhen .feed-krog ozadje: # B9FFB7;
Predogledi in prenosi
Tukaj so predogledi logotipa krme CSS3 v različnih velikostih in drugačnem slogu. Če ne morete doseči določenega koraka, lahko prenesete tudi izvorne datoteke.
- Predogled CSS3 RSS logotip (velika)
- Predogled CSS3 RSS logotip (srednje)
- Predogled CSS3 RSS logotip (majhno)
- Predogled CSS3 RSS logotip (srednje, obrnjeno)
- Prenesite izvirne datoteke CSS3 RSS Logo (.zip)
Opomba urednika: To objavo je napisal Irham Kendeni za Hongkiat.com. Irham, znan tudi kot Indaam, je spletni oblikovalec in razvijalec iz Indonezije. Prav tako ima rad CSS in WordPress temo razvoj.
