Cum de a crea RSS Feed Logo cu CSS3
Logo-ul RSS feed este unul dintre cele mai des folosite logo-uri în designul web, datorită funcției pe care a făcut-o. Ați văzut multe tutoriale despre desenarea siglei de feed RSS folosind software grafic, cum ar fi Photoshop, dar ce zici tragându-l pur și simplu folosind CSS3? Da, m-ai auzit :-)
Cu această ocazie aș vrea să vă arăt o modalitate ușoară de a crea un logo standard de feed RSS cu doar CSS3, așa că urmați tutorialul cu pași cuprinzători și grafică pentru a obține primul dvs. logo CSS3 feed!
Iată o previzualizare a ceea ce veți crea într-un minut. De asemenea, puteți descărca fișierele sursă la sfârșitul tutorialului.
Pasul 1
Creați un fișier HTML, introduceți în fișier următorul cod dacă acesta este complet gol.
Primul meu CSS3 RSS Feed Logo - Introduceți codul HTML aici -
Pasul 2
Introduceți codul de mai jos în fișierul HTML pentru a crea o casetă de feed.
HTML pentru caseta Feed
CSS pentru caseta de alimentare
span.feed-box afișare: bloc; lățime: 200px; height: 200px; marja: 0 auto; fundal: # 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; raza de graniță: 20 pixeli; span.feed-box * float: dreapta; afișare: bloc;
Acesta este rezultatul pe care îl veți realiza:
Pasul 3
Vom desena o altă cutie situată în interiorul primei casete de alimentare, așadar plasați codul HTML de mai jos în codul HTML al primei casete de alimentare. Vom adăuga, de asemenea, granița ca barieră aici.
HTML pentru o cutie de alimentare mai mică
CSS pentru o cutie de alimentare mai mică
span.feed-box.feed-box-in frontieră: 4px solid # FFC563; lățime: 184px; înălțime: 184px; margine: 4px 4px 0 0; -moz-border-radius: 20px; -webkit-border-radius: 20px; raza de graniță: 20 pixeli; / * Overflow: ascuns; * /
Acesta este rezultatul pe care îl veți realiza:
Pasul 4
În acest pas vom face 1/4 cerc mare. Puneți codul HTML cu un cerc mare în codul HTML al cutiei de alimentare mai mică, iar codul de mai jos este codul:
HTML pentru 1/4 Big Circle
CSS pentru 1/4 Big Circle
span.feed-box .feed-box-in .feed-quarter-circle-big margine: 16px 16px 0 0; lățime: 260px; înălțime: 260px; frontieră: 30px solid # FFDEA5; -moz-border-radius: 260px; -webkit-border-radius: 260px; raza de graniță: 260px;
Acesta este rezultatul pe care îl veți realiza:
Pasul 5
Vom face cercul 1/4 mic, puneți codul HTML de mai jos în codul HTML al cercului mare.
HTML pentru cercul mic 1/4
CSS pentru Cercul mic 1/4
span.feed-box.feed-box-in .feed-sfert-cerc-mare .feed-quarter-circle-mici marja: 16px 16px 0 0; lățime: 176px; înălțime: 176px; frontieră: 26px solid # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; raza de graniță: 176px
Acesta este rezultatul pe care îl veți realiza:
Pasul 6
În pasul 6 cel mai mic cerc va fi creat în interiorul cercului mic, așa că puneți codul HTML în codul HTML al cercului mic.
HTML pentru cel mai mic cerc
CSS pentru cel mai mic cerc
span.feed-box .feed-box-in .feed-quarter-circle-mare .feed-quarter-circle-small circle feed margin: 24px 24px 0 0; fundal: # FFDEA5; lățime: 70px; înălțime: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; raza de graniță: 70px
Acesta este rezultatul pe care îl veți realiza:
Finisare Atingeți
Căutați codul, / * Overflow: ascuns; * / apoi înlocuiți cu acest cod, overflow: ascuns;, atunci da! Tocmai ați obținut un logo CSS3 RSS Feed!
Bonus: Adăugați efectul Hover
Nu veți dori sigla dvs. de feed RSS fără un efect de mișcare magic, nu? Trebuie doar să adăugați stilul CSS de mai jos pentru ao atinge!
CSS pentru efectul de hover
span.feed-box: hover fundal: # 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 frontieră-culoare: # 58FC55; span.feed-box: hover .feed-box-in .feed-quarter-circle-big, span.feed-box: hover .feed-box-in .feed-quarter-circle-big. -simul culoare-limită: # B9FFB7; span.feed-box: hover .feed-box-in .feed-quarter-circle-mare .feed-quarter-circle-small circle feed background: # B9FFB7;
Previzualizări și Descărcări
Aici sunt previzualizări ale logo-ului de alimentare CSS3 în variază dimensiuni și un stil diferit. Dacă nu puteți realiza un anumit pas, puteți descărca și fișierele sursă.
- Preview CSS3 RSS logo (mare)
- Preview CSS3 RSS logo (mediu)
- Preview CSS3 RSS logo (mic)
- Preview CSS3 RSS logo (mediu, inversat)
- Descărcați fișierele sursă Logo CSS3 RSS (.Zip)
Nota editorului: Această postare este scrisă de Irham Kendeni pentru Hongkiat.com. Irham, cunoscut și ca Indaam, este un designer și dezvoltator de web din Indonezia. De asemenea, iubește dezvoltarea temelor pentru CSS și WordPress.
