Kako stvoriti RSS Feed logotip s CSS3
RSS feed logo je jedan od najčešće korištenih logotipa u web dizajnu, zbog funkcije koju je uputio. Vidjeli ste mnoge tutoriale na crtanje RSS feed logo koristeći grafički softver kao što je Photoshop, ali kako o tome crtanje isključivo pomoću CSS3? Yeap, čuo si me :-)
U ovoj prilici želio bih vam pokazati jednostavan način stvaranja standardnog RSS logotipa sa samo CSS3, pa slijedite upute s opsežnim koracima i grafikom kako biste dobili svoj prvi CSS3 logo!
Evo pregleda onoga što ćete stvarati u minuti. Također možete preuzeti izvorne datoteke na kraju vodiča.
Korak 1
Napravite HTML datoteku, umetnite sljedeći kod u datoteku ako je potpuno prazan.
Moj prvi CSS3 RSS Feed Logo - Umetnite svoj HTML ovdje -
Korak 2
Umetnite donji kôd u HTML datoteku da biste napravili okvir feeda.
HTML za okvir Feed
CSS za okvir Feed
span.feed-box prikaz: blok; Širina: 200px; visina: 200px; margin: 0 auto; Pozadina: # F9A004; kutija-sjena: 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; granični polumjer: 20px; span.feed-box * float: desno; prikaz: blok;
To je rezultat koji ćete postići:
Korak 3
Nacrtat ćemo drugi okvir koji se nalazi unutar prvog okvira za unos, pa stavite HTML kôd u HTML kôd prvog feed-a. Također ćemo ovdje dodati granicu.
HTML za manji okvir feeda
CSS za mali okvir feeda
span.feed-box .feed-box-in granica: 4px solid # FFC563; širina: 184px; visina: 184px; marža: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; granični polumjer: 20px; / * preljev: skriven; * /
To je rezultat koji ćete postići:
4. korak
U ovom koraku napravit ćemo krug od 1/4. Postavite HTML kôd 1/4 kruga u HTML kôd manjeg okvira za feed, a ispod je njegov kôd:
HTML za 1/4 veliki krug
CSS za 1/4 veliki krug
span.feed-box .feed-box-in .feed-quarter-circle-big margin: 16px 16px 0 0; širina: 260px; visina: 260px; granica: 30px solid # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; granični radijus: 260px;
To je rezultat koji ćete postići:
Korak 5
Sada ćemo napraviti 1/4 mali krug, staviti HTML kôd ispod u HTML kôd velikog kruga.
HTML za 1/4 mali krug
CSS za 1/4 mali krug
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small margin: 16px 16px 0 0; širina: 176px; visina: 176px; granica: 26px solid # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; granični radijus: 176px
To je rezultat koji ćete postići:
Korak 6
U 6. koraku u malom krugu bit će stvoren najmanji krug, pa stavite njegov HTML kôd u HTML kôd malog kruga.
HTML za najmanji krug
CSS za najmanji krug
span.feed-box .feed-box-in .feed-quarter-circle-big .feed-quarter-circle-small .feed-circle margin: 24px 24px 0 0; pozadina: # FFDEA5; širina: 70px; visina: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; granični polumjer: 70px
To je rezultat koji ćete postići:
Dovršavanje Dodir
Pretražite kod, / * preljev: skriven; * / zatim zamijenite ovim kodom, preljev: skriven;, onda da! Upravo ste postigli CSS3 RSS Feed logo!
Bonus: Dodajte efekt lebdjenja
Nećete željeti da vaš RSS feed logo bez čarobnog efekta lebdi, zar ne? Samo dodajte CSS stil ispod kako biste ga postigli!
CSS za Hover učinak
span.feed-box: lebdi pozadina: # 07C103; kutija-sjena: 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: lebdjeti .feed-box-in border-color: # 58FC55; span.feed-box: hover .feed-box-in .feed-četvrt-krug-veliki, span.feed-box: hover .feed-box-in .feed-quarter-circle-large .feed-quarter-circle -malo granična boja: # B9FFB7; span.feed-box: lebdjeti .feed-box-in .feed-quarter-circle-large .feed-quarter-circle-small .feed-circle pozadina: # B9FFB7;
Pregledi i preuzimanja
Evo pregleda CSS3 logotipa feeda u različitim veličinama i drugačijem stilu. Ako ne možete postići određeni korak, možete preuzeti i izvorne datoteke.
- Pregled CSS3 RSS logotip (Veliki)
- Pregled CSS3 RSS logotip (srednji)
- Pregled CSS3 RSS logotip (mali)
- Pregled CSS3 RSS logotip (srednje, obrnuto)
- Preuzmite CSS3 RSS izvorne datoteke (.Zip)
Napomena urednika: Ovaj post je napisao / la Irham Kendeni za Hongkiat.com. Irham, također poznat kao Indaam, web dizajner i programer iz Indonezije. On također voli CSS i WordPress razvoj teme.
