Kuidas luua RSS-kanal Logo CSS3-ga

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

RSS-kanali logo on üks kõige sagedamini kasutatavatest logodest veebidisainis, mis on nimetatud funktsiooni tõttu. Sa nägid palju õpetusi RSS-voo logo joonistamiseks, kasutades näiteks tarkvaraprogrammi Photoshop, aga kuidas joonistades selle puhtalt CSS3 abil? Sa kuulsid mind :-)

Selles võimaluses tahaksin teile näidata lihtsat viisi, kuidas luua tavaline RSS-vooglogo vaid CSS3-ga, nii et järgige juhendit koos ulatuslike sammude ja graafikaga, et saada oma esimene CSS3-toite logo!

Siin on eelvaade sellest, mida te minuti pärast loote. Allikate faile saate alla laadida ka õpiku lõpus.

Samm 1

Looge HTML-fail, sisestage järgmine kood faili, kui see on täiesti tühi.

   Minu esimene CSS3 RSS-voog Logo    - Sisesta oma HTML siia -

2. etapp

Sisestage allolev kood HTML-faili, et teha söödakasti.

Söötekasti HTML

Söötekasti CSS

 span.feed-box display: block; laius: 200 px; kõrgus: 200 px; marginaal: 0 auto; taust: # F9A004; box-shadow: 1px 1tk 0 # C27C03, 2px 2x C # C27C03, 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 6x -moz-border-radius: 20 px; -webkit-border-radius: 20 px; raadius: 20 px;  span.feed-box * float: right; kuva: plokk;

See on tulemus, mida te saavutate:

3. etapp

Me joonistame veel ühe kasti, mis asub esimese söödakasti sees, nii et pane allolev HTML-kood esimesse söödakasti HTML-koodi. Siin lisame ka piiri piiriks.

Väiksema söödakasti HTML

Väiksema söödakasti CSS

 span.feed-box .feed-box-in border: 4px tahke # FFC563; laius: 184px; kõrgus: 184px; varu: 4px 4px 0 0; -moz-border-radius: 20 px; -webkit-border-radius: 20 px; raadius: 20 px; / * ülevool: peidetud; * /

See on tulemus, mida te saavutate:

4. etapp

Selles etapis teeme 1/4 suurt ringi. Pange 1/4 suure ringi HTML-kood väiksema söötekasti HTML-koodi alla ja allpool on selle kood:

HTML 1/4 Big Circle jaoks

CSS 1/4 Big Circle jaoks

 span.feed-box .feed-box-in .feed-quarter-circle-big marginaal: 16px 16px 0 0; laius: 260 pikslit; kõrgus: 260 pikslit; piir: 30px tahke # FFDEA5; -moz-border-radius: 260 pikslit; -webkit-border-radius: 260px; raadius: 260 pikslit;

See on tulemus, mida te saavutate:

5. etapp

Nüüd teeme 1/4 väikese ringi, paneme allpool oleva HTML-koodi suure ringi HTML-koodi.

HTML 1/4 väikese ringi jaoks

CSS 1/4 väikese ringi jaoks

 span.feed-box .feed-box-in .sööda-veerand-ringi-suur .jaotaja-veerand-ring-väike varu: 16px 16px 0 0; laius: 176px; kõrgus: 176x; piir: 26px tahke # FFDEA5; -moz-border-radius: 176px; -webkit-border-radius: 176px; raadius: 176px

See on tulemus, mida te saavutate:

6. etapp

6. etapis luuakse väikse ringi sees väikseim ring, nii et pane oma HTML-kood väikese ringi HTML-koodi.

HTML väikseima ringi jaoks

CSS väikseima ringi jaoks

 span.feed-box .feed-box-in .sööda-veerand-ringi-suur .jaotaja-veerand-väike -feed-ring marginaal: 24px 24px 0 0; taust: # FFDEA5; laius: 70px; kõrgus: 70px; -moz-border-radius: 70px; -webkit-border-radius: 70px; raadius: 70px

See on tulemus, mida te saavutate:

Viimistluskontakt

Otsige koodi, / * ülevool: peidetud; * / seejärel asenda see kood, ülevool: peidetud;, siis jah! Sa saavutasid just CSS3 RSS-voo logo!

Boonus: lisage hoverefekt

Sa ei taha oma RSS-voo logo ilma maagilise hover-efektita? Lihtsalt lisage selle saavutamiseks CSS-stiil!

CSS hoverefekti jaoks

 span.feed-box: hover background: # 07C103; box-shadow: 1px 1px 0 # 058E02, 2px 2x 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6x 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 4x 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. sööda-veerand-suur, span.feed-box: hover .feed-box-in. sööda-veerand-ringi-suur. -small äärevärv: # B9FFB7;  span.feed-box: hover .feed-box-in .sööda-veerand-ringi-suur. -veerand-väike ring. väike-rõngas taust: # B9FFB7;

Eelvaated ja allalaadimised

Siin on eelvaated CSS3 sööda logo erinevates suurustes ja erinevas stiilis. Kui te ei saa teatud sammu saavutada, saate alla laadida ka lähtefailid.

Eelvaade CSS3 RSS logo (suur)
Eelvaade CSS3 RSS logo (keskmine)
Eelvaade CSS3 RSS logo (väike)
Eelvaade CSS3 RSS logo (keskmine, tagurpidi)
Laadi alla CSS3 RSS-i logifaili failid (.zip)

Toimetaja märkus: See postitus on kirjutatud Irham Kendeni Hongkiat.com jaoks. Irham, tuntud ka kui Indaam, on Indoneesia veebidisainer ja arendaja. Ta armastab ka CSS ja WordPress teema arendamist.