Kung-fu 35 n grafiikka rakennettu puhtaasti CSS3 lla
Katso alla olevat grafiikat, mahtava Photoshop toimii oikein? Nah, ne on luonut CSS3. Kyllä, he ovat täysin “drawn” CSS3! Kun olemme nähneet tarpeeksi CSS3-animaatioita, ajattelimme, että kaikki CSS3 voi tehdä mahdolliseksi Flash-tappajaksi, mutta olemme väärässä. Kehittäjät eivät ehkä täytä animaation hauskaa, joten he taas painavat CSS3: n rajoja haastamaan graafisen editorin valtakunnan.
Tämän viestin mukana tulee 35 huolella muotoiltua CSS3-grafiikkaa, jotka sisältävät jopa jotain, jota et ole CSS3: n kanssa Apple iPhone, sarjakuvahahmo Doraemon, ja enemmän yllätyksiä! Heck, jotkut heistä edes tulevat yksityiskohtaisen opetusohjelman avulla, joka opettaa sinulle, miten se saavutetaan! Joten älä missaa suurta mahdollisuutta oppia luomaan grafiikkaa CSS3: n ja vähän HTML: n avulla.!
Suosittelemme, että tarkastelet näitä demoja Google Chromen Safarin tai kehittäjän version uusimman version avulla. Useimmat demot tukevat kuitenkin Firefoxin ja Google Chromen uusinta versiota.
RSS-syötteen kuvake
RSS-syötteen kuvake, joka on rakennettu CSS3: lla, yksinomaan Hongkiatilta! Linkin mukana tulee opetusohjelma, jota voit itse oppia “piirtää” RSS-syötteen kuvaketta käyttämättä edes yhtä kuvaa. Luo CSS3-ihme omin käsin!
Apple iMac
Niin silmäni eivät myöskään voi uskoa sitä, mutta se on iMac “koolla” puhtaasti CSS3: n kanssa.
Apple-näppäimistö
Se on CSS3: lla rakennettu Apple Keyboard -näppäimistö! Heck, näppäimistön painikkeet voidaan jopa painaa.
Apple iPhone
Vielä yksi asia: iPhoneCSS3.
kirsikankukka
CSS3: n todellinen mahtavuus on, että sitä voidaan käyttää rakentamaan mitä tahansa, myös kasveja ja eläimiä!
Kahvikuppi
Väsyttävä päivä? Otetaan CSS3-kahvi, joka tarjoillaan parhaiten Safarin / Google Chromen avulla.
Doraemon
Tämä Doraemon on tunnettu CSS3-yhteensopivuuden testauksesta. Kokeile sitä Internet Explorer 8: ssa tai alla ja pidä siitä mukava päivä.
Meowww!
Nyt katsot kissaa, joka on rakennettu täysin koodilla! Liian huono CSS3 ei voi tuottaa äänitehosteita ainakin toistaiseksi.
Sieni, Triforce, Poké-pallo, Kirby
“Olen nerd, olen tehnyt joitakin nerdy luomuksia - Mario sieni, Triforce, Pokéball ja Kirby. Niille, jotka käyttävät dinosaurus-selaimia, on kuvakaappaus siitä, mitä sen pitäisi näyttää.”
Nyan Cat
“Se sisältää 81 DOM-elementtiä, 688 riviä puhdasta CSS: ää ja yhden JavaScript-toiminnon äänen silmukointiin. CSS ei onnistu CSSLint-testillä, ja olen todella ylpeä tästä.”
Kuviot
CSS3 on niin suuri, että sitä voidaan käyttää myös rakentamaan perustarpeita web-suunnitteluun, kuten näihin kuvioihin.
BonBon
BonBon ovat suloisia CSS3-painikkeita, jotka on luotu tavoitteella: seksikäs näköinen, todella joustava painike, jolla on mahdollisimman minimalistinen merkintä.
iOS-kuvakkeet
Hämmästyttävä? Joo. Nämä kuvakkeet on rakennettu pyöristetyt kulmat, varjot, kaltevuudet, RGBA, pseudo-elementit, ja muunnokset, joidenkin työkalujen, kuten westciv-työkalujen ja Border Radius -työkalun avulla.
Sosiaalisen median kuvakkeet
Web-kehittäjä ei voi rakentaa sosiaalisen median kuvakkeita, jos he voivat rakentaa iPhonen ja Doraemonin CSS3: lla. Ja he rakensivat nämä kuvakkeet todella hyvin.
Sosiaalisen median kuvakkeet
Toinen joukko sosiaalisen median kuvakkeita, jotka osoittavat CSS3: n mahdollisuuksia luoda käyttökelpoisia kuvakkeita.
Erikoinen
“Peculiar on ilmainen CSS-paketti. Se luotiin sivustoille ja web-sovelluksille, jotka riippuvat vähemmän HTTP-pyynnöistä tai ei tarvitse käyttää mitään kuvaa.”
GUI-kuvakkeet
84 yksinkertaista GUI-kuvaketta, jotka käyttävät vain CSS: ää ja semanttista HTML-koodia. Tätä pidetään edelleen “ei-tuotannollinen valmis” kuvakkeet, mutta ne näyttävät hyvin lupaavilta.
Steve Jobs
Steve Jobs ei ole vain digitaalisen aikakauden kuvake, vaan myös johtaja, joka suuresti edistää HTML5: ää.
Twitter Fail Whale
Twitter epäonnistuu valas ei yllätä sinua, paitsi Internet Explorer 8 tai alla.
umbrUI
Käyttöliittymän elementit CSS3: n avulla, ja se näyttää todella tyylikäs!
Adobe Photoshop -logo
Kunnianosoitus Photoshopille ilman Photoshopia.
Android-logo
Android on tehty melko yksinkertaisista muodoista, mutta se selittää CSS3: n edun: voit tehdä yksinkertaisia tavaroita ja muokata sitä haluamallasi tavalla käyttämällä vain koodia, mutta ei Photoshopia.
Apple-logo
Retro Apple -logo, joka on esitetty CSS3: n avulla.
Atari-logo
Vuotta aiemmin, jotka olisivat ajatelleet Atarin logon uudelleen luomista CSS3: lla.
BP-logo
Yksinkertainen logo voidaan tehdä helposti CSS3: n avulla. Parasta, jos jotkut näistä logoista esitellään tässä on olemassa koodi, jonka avulla voit kokeilla!
Dribbble-logo
Kuuluisa käyttäjän käyttämä esityspaikka Dribbblein logo esittelee CSS3: n avulla.
Magento-logo
Magenton logo ei ole liian vaikea piirtää, mutta lopputulos näyttää ammattimaiselta.
McDonald-logo
Olen rakastava CSS3!
Twitter Bird
Täydellinen osuus, hatun kärki luojalle.
Windows-logo
Windows-logo! Näyttää todella mahtavan, ja se on helppo luoda!
Internet Explorerin logo
Todella suuri luomus! Se toimii suurimmissa selaimissa paitsi Internet Explorer 8: ssa tai sen alapuolella.
Google Chrome -logo
En ole varma, että rakastat uutta Google Chromen logoa tai ei, mutta tämä CSS3 Google Chrome -logo näyttää mahtavalta!
Opera-logo
Nyt käytäntö sinulle: mitä eroja tämän CSS3-kappaleen ja todellisen kaupan välillä?
HTML5-logo
HTML5 ei voi loistaa ilman CSS3: ta!
Volkswagen-logo
Väripohjaa lukuun ottamatta tämä CSS3-klooni näyttää samanlaiselta kuin alkuperäinen.
Heijastus
Puhtaasta CSS3: sta tehtyjen logojen ja grafiikkojen nousulla tulevat keskustelut, jotka keskustelivat suuresti CSS3-tuotetun grafiikan käytettävyydestä todellisessa tuotantoympäristössä.
Yleensä CSS3-grafiikka on hyvä, mutta se on saattaa saada ärsyttävää varsinkin silloin, kun haluat muuttaa muotoilua tai muuttaa sen kokoa, myös suurin kipu tässä on, että tietyt selaimet kuten Internet Explorer eivät vielä tue tekniikkaa.
Mitä mieltä sinä olet? Käytätkö CSS3: n grafiikkaa sivustossasi? Onko sinulla ratkaisua sen nykyisiin haittoihin? Kerro meille ajattelustasi ja jaa kanssamme, jos olet juuri paistanut CSS3-grafiikkaa!
Lisää
Haluatko todella tehdä jotain CSS3: n kanssa? Olet tullut oikeaan paikkaan! Alla on oppaita ja opetusohjelmia, jotka on kirjoitettu auttamaan sinua suuresti CSS3: n hallitsemisessa.
- CSS3: Luo Breadcrumb-navigointivalikko
- CSS3: Luo RSS-syötteen logo
- CSS3: Luo hakukenttä
- CSS3: Aloittelijan opas
- CSS3 / HTML5: Luo Web-sivuja
- CSS3 / HTML5: Luo AJAX-pohjainen yhteyslomake
