Kung-fu 35 kódolása tisztán CSS3-mal
Nézd meg az alábbi grafikákat, a félelmetes Photoshop jól működik? Nah, ezeket a CSS3 hozta létre. Igen, ők teljesen “húzott” a CSS3 által! Amikor már elég CSS3 animációt láttunk, úgy gondoltuk, hogy ezek az összes CSS3 képesek lehetnek Flash-gyilkosként, de tévedünk. Előfordulhat, hogy a fejlesztők nem elégítik ki az animáció élvezetét, így ismét a CSS3 határait vetik ki a grafikus szerkesztő birodalmának kihívására.
Ezzel a bejegyzéssel 35 gondosan megtervezett CSS3 grafika található, amely még olyan dolgot is tartalmaz, amelyet nem szeretne a CSS3-hoz kötni Apple iPhone, rajzfilmfigura Doraemon, és több meglepetés! Heck, némelyikük még részletes bemutatóval is rendelkezik, amely megtanítja, hogyan kell elérni! Tehát ne hagyja ki a nagyszerű lehetőséget arra, hogy megtanuljunk grafikát létrehozni a CSS3 és a kis HTML-ek használatával.!
Erősen ajánlott, hogy ezeket a bemutatókat a Google Chrome Safari vagy fejlesztői verziójának legújabb verziójával nézze meg. A legtöbb demó azonban támogatja a Firefox és a Google Chrome legújabb verzióját.
RSS hírcsatorna ikon
RSS Feed Icon CSS3-val épült, kizárólag Hongkiat! A hivatkozással együtt egy olyan oktatóanyag jelenik meg, amelyet ténylegesen megtanulhat “húz” az RSS Feed ikonját egyetlen kép használata nélkül. Hozza létre a CSS3 csodát saját kezével!
Apple iMac
Igen, a szemem is nem hiszem el, de ez az iMac “összeszerelt” tisztán a CSS3-mal.
Apple billentyűzet
Ez az Apple Keyboard CSS3-val készült! Heck, a billentyűzet gombjai még megnyomhatók.
Apple iPhone
Még egy dolog: iPhoneCSS3.
cseresznyevirág
A CSS3 igazi látványa az, hogy bármit is magában foglalhat, beleértve a növényeket és az állatokat!
Kávéscsésze
Fárasztó nap? Legyen CSS3 kávé, melyet legjobban Safari / Google Chrome szolgáltat.
Doraemon
Ez a Doraemon híres a CSS3 kompatibilitási teszteléséről. Próbálja ki az Internet Explorer 8-ban vagy az alatt, és töltsön egy szép napot.
Meowww!
Most már a kóddal teljesen felépített macskát nézel! Túl rossz a CSS3 nem képes generálni hanghatásokat, legalábbis mostanáig.
Gomba, Triforce, Poké labda, Kirby
“Nercsként készítettem néhány nerdy alkotást - egy Mario gomba, a Triforce, a Pokéball és a Kirby. Azok számára, akik dinoszaurusz böngészőket használnak, van egy képernyőkép arról, hogy mit kell kinéznie.”
Nyan Cat
“81 DOM elemet, 688 sor tiszta CSS-t és egy JavaScript funkciót tartalmaz a hang hurokolásához. A CSS-én a CSSLint teszt sikertelen, és nagyon büszke vagyok erre.”
minták
A CSS3 annyira nagy, hogy a webes tervezés alapvető eszközeit is felhasználhatja, mint például ezek a minták.
Bonbon
A BonBon olyan édes CSS3 gombok, amelyek célja a szem előtt tartva: szexi megjelenésű, nagyon rugalmas gombok a lehető legkisebb minimalista jelöléssel.
iOS ikonok
Elképesztő? Igen. Ezeket az ikonok az lekerekített sarok, árnyékok, színátmenetek, RGBA, pszeudo-elemek, és transzformáció, bizonyos eszközök, például a westciv eszközök és a Border Radius segítségével.
Szociális média ikonok
Lehetetlen, hogy a webes fejlesztő ne építsen szociális média ikonokat, ha iPhone-t és Doraemon-ot építhet a CSS3-mal. És ezek az ikonok igazán jól épültek.
Szociális média ikonok
Egy másik olyan szociális média ikon, amely bemutatja a CSS3 lehetőségeit a használható ikonok létrehozásában.
Különös
“A Peculiar egy ingyenes ikoncsomag, amely csak a CSS-ben készült. Olyan webhelyek és webalkalmazások számára készült, amelyek kevesebb HTTP kéréstől függenek, vagy nem kell semmilyen képet használni.”
GUI ikonok
84 egyszerű GUI ikon, amely csak CSS-t és szemantikus HTML-t használ. Ezt még mindig úgy tekintik “készen áll a nem termelésre” ikonok, de nagyon ígéretesek.
Steve Jobs
Steve Jobs nem csak a digitális korszak ikonja, hanem a HTML5-t nagyban támogató vezető is.
Twitter Fail Whale
A Twitter sikertelen bálna nem fogja meglepni Önt, kivéve az Internet Explorer 8 vagy az alábbiakat.
umbrUI
A CSS3 segítségével lehetővé tett felhasználói felületelemek, és nagyon elegánsan néz ki!
Adobe Photoshop logó
A Photoshop használata a Photoshop használata nélkül.
Android logó
Az Android meglehetősen egyszerű formájú, de magyarázza a CSS3 előnyét: egyszerű kódokat készíthet, és csak a kódot használva módosíthatja, de nem Photoshopot..
Apple logó
A Retro Apple logót a CSS3 használatával bemutatták, még mindig olyan fantasztikus, mint az elkészítésének ideje.
Atari logó
Évekkel korábban, akik azt hitték, hogy az Atari logót újra létrehozzák a CSS3 segítségével.
BP logó
Az egyszerű logó könnyen elkészíthető a CSS3 segítségével. Néhány itt bemutatott emblémával a legjobb dolog van, hogy kipróbálhassuk a kódot!
Dribbble logó
Híres, felhasználó által vezérelt bemutatóhely, a Dribbble logója a CSS3 használatával.
Magento logó
A Magento logója nem túl nehéz rajzolni, de az eredmény profi.
McDonald logó
CSS3 vagyok!
Twitter madár
Tökéletes arány, kalapot tipp az alkotóhoz.
Windows logó
Windows logó! Nagyon fantasztikusnak tűnik, és könnyen létrehozható!
Internet Explorer logó
Tényleg nagy teremtés! Főbb böngészőkben működik, kivéve az Internet Explorer 8-at vagy az alábbiakat.
Google Chrome logó
Nem biztos benne, hogy szereted a Google Chrome új logóját, de ez a CSS3 Google Chrome logó félelmetesnek tűnik!
Opera logó
Most egy gyakorlat az Ön számára: milyen különbségek vannak a CSS3 darab és az igazi üzlet között?
HTML5 logó
A HTML5 nem ragyoghat CSS3 nélkül!
Volkswagen logó
A színsémát kivéve ez a CSS3 klón azonos az eredetivel.
Visszaverődés
A tiszta CSS3 logóinak és grafikájának fellendülésével jöttek a megbeszélések, amelyek nagymértékben vitatták a CSS3 által előállított grafikák felhasználhatóságát a valós világ termelési környezetében.
Általában a CSS3 grafika jó, de bosszantó lehet, különösen akkor, ha meg kell változtatnia a tervezést, vagy egyszerűen át kell méreteznie a grafikát, itt is a legnagyobb fájdalom a technológia, amelyet bizonyos böngészők, például az Internet Explorer még nem támogatnak.
Mit gondolsz? Használja a webhelyén a CSS3-al készített grafikát? Van-e megoldása a jelenlegi hátrányaira? Tudassa velünk a gondolatát, és ossza meg velünk, ha csak egy CSS3 grafikát sült!
Több
Hajlandó valamit tenni a CSS3-al? Jöttél a megfelelő helyre! Az alábbiakban útmutatókat és útmutatókat írtunk, amelyek segítséget nyújtanak a CSS3 elsajátításához.
- CSS3: A Breadcrumb navigációs menü létrehozása
- CSS3: RSS hírcsatorna logó létrehozása
- CSS3: A keresőmező létrehozása
- CSS3: Kezdő útmutató
- CSS3 / HTML5: Weboldalak létrehozása
- CSS3 / HTML5: Hozzon létre egy AJAX alapú kapcsolati űrlapot
