RSS-syötteen logon luominen CSS3 lla
RSS-syötteen logo on yksi yleisimmin käytetystä logosta web-suunnittelussa mainitsemansa toiminnon vuoksi. Näet monia opetusohjelmia RSS-syötteen logon piirtämisestä käyttämällä grafiikkaohjelmistoa, kuten Photoshopia, mutta miten piirtäminen puhtaasti käyttäen CSS3: ta? Yeap, kuulit minua :-)
Tässä tilaisuudessa haluaisin näyttää helpon tavan luoda tavallinen RSS-syötteen logo vain CSS3: lla, joten seuraa opetusohjelmaa kattavilla vaiheilla ja grafiikoilla saadaksesi ensimmäisen CSS3-syötteen logosi!
Tässä on esikatselu siitä, mitä luodaan minuutissa. Voit myös ladata lähdetiedostot opetusohjelman lopussa.
Vaihe 1
Luo HTML-tiedosto, aseta seuraava koodi tiedostoon, jos se on täysin tyhjä.
Ensimmäinen CSS3-RSS-syötteen logo - Lisää HTML-koodi tähän -
Vaihe 2
Syötä alla oleva koodi HTML-tiedostoon ja tee syötepakkaus.
HTML for Feed -ruutuun
CSS for Feed -ruutuun
span.feed-box display: block; leveys: 200px; korkeus: 200px; marginaali: 0 auto; tausta: # F9A004; laatikko-varjo: 1kpl 1kpl 0 # C27C03, 2kpl 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-box-shadow: 1kpl 1kpl 0 # C27C03, 2kpl 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -webkit-box-shadow: 1kpl 1kpl 0 # C27C03, 2kpl 2px 0 # C27C03, 3px 3px 0 # C27C03, 4px 4px 0 # C27C03, 5px 5px 0 # C27C03, 6px 6px 0 # C27C03; -moz-border-säde: 20px; -webkit-border-radius: 20px; raja-säde: 20px; span.feed-box * float: oikea; näyttö: lohko;
Tämä on tulos, jonka saavutat:
Vaihe 3
Piirrämme toisen ruudun, joka sijaitsee ensimmäisen syötekentän sisällä, joten laita alla oleva HTML-koodi ensimmäiseen syötepakkauksen HTML-koodiin. Täällä lisätään myös rajana esteenä.
HTML pienemmille syötteille
CSS pienemmille syötteille
span.feed-box .feed-box-in border: 4px kiinteä # FFC563; leveys: 184px; korkeus: 184px; marginaali: 4px 4px 0 0; -moz-border-säde: 20px; -webkit-border-radius: 20px; raja-säde: 20px; /* ylivuoto piilotettu; * /
Tämä on tulos, jonka saavutat:
Vaihe 4
Tässä vaiheessa teemme 1/4 ison ympyrän. Laita 1/4 ison ympyrän HTML-koodi pienempään syötekentän HTML-koodiin, ja alla on sen koodi:
HTML 1/4 suurelle ympyrälle
CSS 1/4 suurelle ympyrälle
span.feed-box .feed-box-in .siirto-neljännes-ympyrä-iso marginaali: 16px 16px 0 0; leveys: 260px; korkeus: 260px; raja: 30px kiinteä # FFDEA5; -moz-border-säde: 260px; -webkit-border-radius: 260px; raja-säde: 260px;
Tämä on tulos, jonka saavutat:
Vaihe 5
Teemme nyt 1/4 pienen ympyrän, laita alla oleva HTML-koodi ison ympyrän HTML-koodiin.
HTML 1/4 pienelle ympyrälle
CSS 1/4 pienelle ympyrälle
span.feed-box .feed-box-in .siirto-neljännes-ympyrä-iso .virta-neljännes-ympyrä-pieni marginaali: 16px 16px 0 0; leveys: 176px; korkeus: 176px; raja: 26px kiinteä # FFDEA5; -moz-border-säde: 176px; -webkit-border-radius: 176px; raja-säde: 176px
Tämä on tulos, jonka saavutat:
Vaihe 6
Vaiheessa 6 pienin ympyrä luodaan pienen ympyrän sisällä, joten laita sen HTML-koodi pieneen ympyrän HTML-koodiin.
HTML pienimmälle ympyrälle
CSS pienimmälle ympyrälle
span.feed-box .feed-box-in .siirto-neljännes-ympyrä-iso .siirto-neljännes-ympyrä-pieni .virta marginaali: 24px 24px 0 0; tausta: # FFDEA5; leveys: 70px; korkeus: 70px; -moz-border-säde: 70px; -webkit-border-radius: 70px; raja-säde: 70px
Tämä on tulos, jonka saavutat:
Viimeistely
Etsi koodi, /* ylivuoto piilotettu; * / korvaa sitten tämä koodi, ylivuoto piilotettu;, sitten kyllä! Sait juuri CSS3 RSS-syötteen logon!
Bonus: Lisää Hover Effect
Etkö halua RSS-syötteen logoa ilman maagista hover-tehoa? Lisää vain CSS-tyyli alla!
CSS Hover Effectille
span.feed-box: hover background: # 07C103; box-shadow: 1kpl 1kpl 0 # 058E02, 2kpl 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -moz-box-shadow: 1kpl 1px 0 # 058E02, 2kpl 2px 0 # 058E02, 3px 3px 0 # 058E02, 4px 4px 0 # 058E02, 5px 5px 0 # 058E02, 6px 6px 0 # 058E02; -webkit-box-shadow: 1kpl 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 .syöttökortti-ympyrä-iso, span.feed-box: hover .feed-box-in .syöttökortti-ympyrä-iso. -small border-color: # B9FFB7; span.feed-box: hover .feed-box-in .syöttökortti-ympyrä-iso .siirto-neljännes-ympyrä-pieni .virta-ympyrä tausta: # B9FFB7;
Esikatselut ja lataukset
Tässä ovat CSS3-syötteen logon esikatselut eri koot ja erilainen tyyli. Jos et pysty saavuttamaan tiettyä vaihetta, voit ladata myös lähdetiedostot.
- Esikatsele CSS3 RSS -logoa (suuri)
- Esikatsele CSS3 RSS -logoa (Väliaine)
- Esikatsele CSS3 RSS -logoa (pieni)
- Esikatsele CSS3 RSS -logoa (keskikokoinen, käänteinen)
- Lataa CSS3 RSS -logon lähdetiedostot (.postinumero)
Toimittajan huomautus: Tämä viesti on kirjoittanut Irham Kendeni varten Hongkiat.com. Irham, joka tunnetaan myös nimellä Indaam, on web-suunnittelija ja kehittäjä Indonesiasta. Hän rakastaa myös CSS- ja WordPress-teeman kehitystä.
