Kā izveidot RSS plūsmas logotipu ar CSS3
RSS plūsmas logotips ir viens no visbiežāk izmantotajiem logotipiem tīmekļa dizainā, ņemot vērā tā norādīto funkciju. Jūs redzējāt daudzas konsultācijas par RSS plūsmas logotipa izmantošanu, izmantojot grafisko programmatūru, piemēram, Photoshop, bet kā par to izmantojot to tikai izmantojot CSS3? Yeap, tu dzirdi mani :-)
Ar šo iespēju es vēlos jums parādīt vienkāršu veidu, kā izveidot standarta RSS plūsmas logotipu tikai ar CSS3, tāpēc sekojiet apmācībai ar visaptverošiem soļiem un grafiku, lai iegūtu pirmo CSS3 plūsmas logotipu!
Lūk, priekšskatījums par to, ko jūs izveidosiet pēc minūtes. Jūs varat arī lejupielādēt avota failus apmācības beigās.
1. solis
Izveidojiet HTML failu, ievietojiet failā šādu kodu, ja tas ir pilnīgi tukšs.
Mans pirmais CSS3 RSS plūsmas logotips - Ievietojiet savu HTML šeit -
2. solis
Ievietojiet kodu zemāk HTML failā, lai izveidotu plūsmas lodziņu.
Atbildes lodziņa HTML
CSS plūsmas lodziņam
span.feed-box display: block; platums: 200px; augstums: 200px; starpība: 0 auto; fons: # F9A004; kaste-ēna: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6xx # -moz-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6 piks. -webkit-box-shadow: 1px 1px 0 # C27C03, 2px 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6 piks. -moz-border-rādiuss: 20px; -webkit-robežu rādiuss: 20px; robežu rādiuss: 20px; span.feed-box * float: right; displejs: bloks;
Tas ir rezultāts, ko jūs sasniegsiet:
3. solis
Mēs zīmēsim vēl vienu lodziņu, kas atrodas pirmās plūsmas lodziņā, tāpēc ievietojiet HTML kodu zemāk pirmajā barošanas kastes HTML kodā. Šeit mēs arī pievienosim robežu kā barjeru.
HTML mazākajam padevei
CSS mazākajai barības kastei
span.feed-box .feed-box-in border: 4px cietie # FFC563; platums: 184px; augstums: 184px; starpība: 4px 4px 0 0; -moz-border-rādiuss: 20px; -webkit-robežu rādiuss: 20px; robežu rādiuss: 20px; / * pārplūde: slēpta; * /
Tas ir rezultāts, ko jūs sasniegsiet:
4. solis
Šajā solī mēs veiksim 1/4 lielu apli. Ievietojiet 1/4 lielā apļa HTML kodu mazākā plūsmas lodziņa HTML kodā un zemāk ir tās kods:
HTML 1/4 lielajam lokam
CSS 1/4 lielajam lokam
span.feed-box .feed-box-in .barība-ceturtdaļa aplis-liels starpība: 16px 16px 0 0; platums: 260px; augstums: 260px; robeža: 30px cietais # FFDEA5; -moz-border-rādiuss: 260px; -webkit-robežu rādiuss: 260px; robežu rādiuss: 260px;
Tas ir rezultāts, ko jūs sasniegsiet:
5. solis
Tagad mēs izveidosim 1/4 mazo apli, ievietosim HTML kodu lielā apļa HTML kodā.
HTML 1/4 mazajam lokam
CSS 1/4 maziem lokiem
span.feed-box .feed-box-in .barība-ceturtdaļas aplis-liels .barības ceturtdaļas aplis-mazs robeža: 16px 16px 0 0; platums: 176px; augstums: 176px; robeža: 26px cietais # FFDEA5; -moz-border-rādiuss: 176px; -webkit-robežu rādiuss: 176px; robežu rādiuss: 176px
Tas ir rezultāts, ko jūs sasniegsiet:
6. solis
6. solī mazākā apļa iekšpusē tiks izveidots mazākais aplis, tāpēc ievietojiet HTML kodu mazā apļa HTML kodā.
HTML mazākajam lokam
CSS par mazāko apli
span.feed-box .feed-box-in .barības-ceturtdaļas aplis-liels .zv. ceturtdaļas aplis-neliels. plūsmas aplis starpība: 24px 24px 0 0; fons: # FFDEA5; platums: 70px; augstums: 70px; -moz-border-rādiuss: 70px; -webkit-robežu rādiuss: 70px; robežu rādiuss: 70px
Tas ir rezultāts, ko jūs sasniegsiet:
Pabeidziet pieskārienu
Meklēt kodu, / * pārplūde: slēpta; * / pēc tam nomainiet ar šo kodu, pārplūde: slēpta;, tad jā! Jūs tikko sasniedzāt CSS3 RSS barotnes logotipu!
Bonuss: pievienojiet hover efektu
Jūs nevēlaties, lai jūsu RSS barotnes logotips bez burvju lidojuma efekta, vai ne? Vienkārši pievienojiet CSS stilu, lai to sasniegtu!
CSS Hover efektam
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 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 6xx # -webkit-box-shadow: 1px 1px 0 # 058E02, 2px 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6 piks. span.feed-box: hover .feed-box-in border-color: # 58FC55; span.feed-box: hover .feed-box-in .barības-ceturtdaļas aplis-liels, span.feed-box: hover .feed-box-in. -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .barības-ceturtdaļas aplis-liels. ceturtdaļas aplis-mazs .feed-aplis fons: # B9FFB7;
Priekšskatījumi un lejupielādes
Šeit ir CSS3 plūsmas logotipa priekšskatījumi dažādos izmēros un citā stilā. Ja nevarat sasniegt noteiktu soli, varat lejupielādēt arī avota failus.
- Priekšskatīt CSS3 RSS logotipu (liels)
- Priekšskatīt CSS3 RSS logotipu (vidēja)
- Priekšskatīt CSS3 RSS logotipu (mazs)
- Priekšskatīt CSS3 RSS logotipu (vidējs, apgriezts)
- Lejupielādēt CSS3 RSS logotipa avota failus (.zip)
Redaktora piezīme: Šo ziņu raksta Irham Kendeni par Hongkiat.com. Irham, pazīstams arī kā Indaam, ir web dizainers un attīstītājs no Indonēzijas. Viņš arī mīl CSS un WordPress tēmas izstrādi.
