Kaip sukurti RSS kanalo logotipą su CSS3
RSS kanalo logotipas yra vienas iš dažniausiai naudojamų logotipų žiniatinklio dizaine, atsižvelgiant į jos nurodytą funkciją. Jūs matėte daug pamokų apie RSS srauto logotipo piešimą naudojant grafinę programinę įrangą, pavyzdžiui, „Photoshop“, bet kaip apie tai piešiant jį tik naudojant CSS3? Yeap, girdėjote mane :-)
Šia proga norėčiau parodyti jums paprastą būdą sukurti standartinį RSS kanalo logotipą tik su CSS3, todėl vadovaukitės pamoka su išsamiais žingsniais ir grafika, kad gautumėte pirmąjį „CSS3“ kanalo logotipą!
Štai ką jūs sukuriate per minutę. Taip pat galite atsisiųsti šaltinio failus pamokos pabaigoje.
1 žingsnis
Sukurkite HTML failą, įdėkite šį failą į failą, jei jis yra visiškai tuščias.
Mano pirmasis CSS3 RSS srauto logotipas - Įdėkite savo HTML čia -
2 žingsnis
Įdėkite toliau pateiktą kodą į HTML failą, kad padarytumėte pašarų dėžutę.
„HTML for Feed“ laukelis
CSS for Feed dėžutė
span.feed-box display: block; plotis: 200px; aukštis: 200px; paraštė: 0 auto; fonas: # F9A004; dėžutės šešėlis: 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-spindulys: 20px; -webkit-border-spindulys: 20px; pasienio spindulys: 20px; span.feed-box * float: right; ekranas: blokas;
Tai yra rezultatas, kurį pasieksite:
3 žingsnis
Mes piešiame kitą dėžutę, kuri yra pirmojo tiekimo dėžutės viduje, taigi į pirmąjį informacijos sklaidos dėžutės HTML kodą įdėkite toliau pateiktą HTML kodą. Čia taip pat pridedame sieną kaip barjerą.
HTML mažesniems tiekimo laukams
CSS mažesniems tiekimo laukams
span.feed-box .feed-box-in border: 4px kietas # FFC563; plotis: 184px; aukštis: 184px; paraštė: 4px 4px 0 0; -moz-border-spindulys: 20px; -webkit-border-spindulys: 20px; pasienio spindulys: 20px; /* perteklius paslėptas; * /
Tai yra rezultatas, kurį pasieksite:
4 žingsnis
Šiame žingsnyje mes padarysime 1/4 didelį ratą. Į mažesnio padavimo dėžutės HTML kodą įdėkite 1/4 didelio apskritimo HTML kodą ir žemiau yra jo kodas:
HTML 1/4 didžiojo rato
CSS 1/4 didelis ratas
span.feed-box .feed-box-in .feed-quarter-circle-didelis parašas: 16px 16px 0 0; plotis: 260px; aukštis: 260px; siena: 30px kietas # FFDEA5; -moz-border-spindulys: 260px; -webkit-border-radius: 260px; pasienio spindulys: 260px;
Tai yra rezultatas, kurį pasieksite:
5 veiksmas
Dabar mes padarysime 1/4 mažą apskritimą, įdėti HTML kodą į didžiojo rato HTML kodą.
HTML 1/4 mažo rato
CSS 1/4 mažo rato
„span.feed-box .feed-box-in .feed-quarter-circle-big .paskutinio ketvirčio apskritimas mažas parašas: 16px 16px 0 0; plotis: 176px; aukštis: 176px; siena: 26px kietas # FFDEA5; -moz-border-spindulys: 176px; -webkit sienos spindulys: 176px; pasienio spindulys: 176px
Tai yra rezultatas, kurį pasieksite:
6 veiksmas
6 žingsnyje mažiausias apskritimas bus sukurtas mažiausio apskritimo viduje, todėl įdėkite savo HTML kodą į mažo apskritimo HTML kodą.
HTML mažiausiam ratui
CSS mažiausiam ratui
„span.feed-box .feed-box-in .feed-quarter-circle-big .feed-ketvirčio apskritimas-mažas .feed-circle margin: 24px 24px 0 0; fonas: # FFDEA5; plotis: 70px; aukštis: 70px; -moz-border-spindulys: 70px; -webkit-border-radius: 70px; pasienio spindulys: 70px
Tai yra rezultatas, kurį pasieksite:
Apdailos liesti
Ieškoti kodo, /* perteklius paslėptas; * / tada pakeiskite šiuo kodu, perteklius paslėptas;, tada taip! Jūs ką tik pasiekėte „CSS3 RSS“ logotipą!
Premija: pridėti „Hover Effect“
Jūs nenorite, kad jūsų RSS kanalo logotipas nebūtų stebimas stebuklingu efektu? Tiesiog norėdami pasiekti, pridėkite žemiau pateiktą CSS stilių!
CSS už Hover efektą
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 .prieš ketvirčio apskritimas didelis, span.feed-box: hover .feed-box-in. -small sienos spalva: # B9FFB7; span.feed-box: hover .feed-box-in .prašymo-ketvirčio apskritimo didelio .kvėpavimo-ketvirčio apskritimo mažas .pagrindinis ratas fonas: # B9FFB7;
Peržiūra ir atsisiuntimai
Čia yra CSS3 informacijos santraukos logotipo dydžių ir skirtingo stiliaus peržiūros. Jei negalite pasiekti tam tikro žingsnio, galite atsisiųsti šaltinio failus.
- Peržiūrėti „CSS3 RSS“ logotipą (didelis)
- Peržiūrėti „CSS3 RSS“ logotipą (vidutinė)
- Peržiūrėti „CSS3 RSS“ logotipą (mažas)
- Peržiūrėti „CSS3 RSS“ logotipą (vidutinė, apversta)
- Atsisiųskite CSS3 RSS logotipo šaltinio failus (.zip)
Redaktoriaus pastaba: Šį įrašą parašė Irham Kendeni už Hongkiat.com. Irham, taip pat žinomas kaip Indaam, yra interneto dizaineris ir kūrėjas iš Indonezijos. Jis taip pat mėgsta CSS ir WordPress temos kūrimą.
