Codering Kung-fu 35 Graphics puur opgebouwd met CSS3
Kijk naar de onderstaande afbeeldingen, geweldige Photoshop werkt goed? Nee, ze zijn gemaakt door CSS3. Ja zij zijn hier helemaal “getrokken” door CSS3! Toen we genoeg CSS3-animaties zagen, dachten we dat CSS3 dit allemaal kan als een potentiële Flash-moordenaar, maar we hebben het mis. Ontwikkelaars voldoen misschien niet met het plezier van animatie, dus nogmaals, ze verleggen de grenzen van CSS3 om het rijk van de grafische redacteur uit te dagen.
Met dit bericht komen 35 zorgvuldig vervaardigde CSS3-afbeeldingen die zelfs iets bevatten dat je niet zou willen vergelijken met CSS3-achtig Apple iPhone, stripfiguur Doraemon, en meer verrassingen! Hé, sommigen van hen komen zelfs met een gedetailleerde zelfstudie die je leert hoe je dit kunt bereiken! Dus mis niet de grote kans om te leren om grafisch te maken met behulp van CSS3 en een beetje HTML, laten we stout worden met CSS3!
We raden u ten zeerste aan om deze demo's te bekijken met de nieuwste versie van Safari of de ontwikkelaarversie van Google Chrome. De meeste demo's ondersteunen echter de nieuwste versie van Firefox en Google Chrome.
RSS-feedpictogram
RSS Feed Icon gebouwd met CSS3, exclusief van Hongkiat! Samen met de link komt een tutorial die je echt kunt leren “trek” het pictogram voor RSS-feeds zonder zelfs maar één afbeelding te gebruiken. Maak het CSS3-wonder met je eigen handen!
Apple iMac
Ja, mijn ogen kunnen dat ook niet geloven, maar het is iMac “geassembleerd” puur met CSS3.
Apple-toetsenbord
Het is een Apple-toetsenbord gebouwd met CSS3! Heck, de toetsenbordknoppen kunnen zelfs worden ingedrukt.
Apple iPhone
Oh, nog een ding: iPhoneCSS3.
kersenbloesem
De echte awesomeness van CSS3 is dat het kan worden gebruikt om alles te bouwen, inclusief planten en dieren!
Koffiekop
Een vermoeiende dag? Laten we een CSS3-koffie gebruiken, het best bediend met Safari / Google Chrome.
Doraemon
Deze Doraemon is beroemd om zijn compatibiliteitstests met CSS3. Probeer het in Internet Explorer 8 of lager en beleef een mooie dag.
Meowww!
Nu kijk je naar een kat die volledig is gebouwd met code! Jammer dat de CSS3 geen geluidseffecten kan genereren, althans voorlopig.
Mushroom, Triforce, Poké-bal, Kirby
“Omdat ik een nerd ben, heb ik een aantal nerdy creaties gemaakt - een Mario-paddenstoel, de Triforce, een Pokéball en Kirby. Voor degenen die dinosaurusbrowsers gebruiken, is er een screenshot van hoe het eruit zou moeten zien.”
Nyan Cat
“Het bevat 81 DOM-elementen, 688 regels pure CSS en één JavaScript-functie voor het herhalen van audio. Mijn CSS lukt de CSSLint-test niet en daar ben ik erg trots op.”
patronen
De CSS3 is zo geweldig dat hij ook kan worden gebruikt om een fundamenteel goed te bouwen voor webdesign, zoals deze patronen.
Bonbon
BonBon zijn leuke CSS3-knoppen gemaakt met een doel voor ogen: sexy ogende, echt flexibele knoppen met de meest minimalistische opmaak als mogelijk.
iOS-pictogrammen
Verbazingwekkend? Ja. Deze pictogrammen zijn gebouwd door afgeronde hoeken, schaduwen, gradiënten, RGBA, pseudo-elementen, en transformaties, met behulp van bepaalde tools zoals westciv's tools en Border Radius.
Social Media-pictogrammen
Dat is voor webontwikkelaars niet mogelijk om sociale media-iconen te bouwen als ze iPhone en Doraemon met CSS3 kunnen bouwen. En zij hebben deze pictogrammen heel goed gebouwd.
Social Media-pictogrammen
Een andere set socialemediapictogrammen die de mogelijkheden van de CSS3 toont bij het maken van bruikbare pictogrammen.
eigenaardig
“Eigenaardig is een gratis pictogrampakket dat alleen in CSS is gemaakt. Het is gemaakt voor sites en webtoepassingen die afhankelijk zijn van minder HTTP-aanvragen mogelijk of helemaal geen afbeeldingen hoeven te gebruiken.”
GUI-pictogrammen
84 eenvoudige GUI-pictogrammen met alleen CSS en semantische HTML. Dit wordt nog steeds beschouwd als “klaar voor niet-productie” pictogrammen, maar ze zien er veelbelovend uit.
Steve Jobs
Steve Jobs is niet alleen het icoon van het digitale tijdperk, maar ook de leider die HTML5 enorm promoot.
Twitter Fail Whale
De Twitter-fail-walvis zal je niet teleurstellen, behalve in Internet Explorer 8 of lager.
umbrUI
Gebruikersinterface-elementen mogelijk gemaakt met CSS3, en het ziet er echt gestroomlijnd uit!
Adobe Photoshop-logo
Een eerbetoon aan Photoshop zonder Photoshop te gebruiken.
Android-logo
De Android is gemaakt van vrij eenvoudige vormen, maar het verklaart het voordeel van CSS3: je kunt eenvoudige dingen maken en deze op elke gewenste manier aanpassen door alleen code te gebruiken, maar niet Photoshop.
Apple-logo
Retro Apple-logo gepresenteerd met CSS3, nog steeds zo geweldig als de tijd waarop het werd gemaakt.
Atari-logo
Jaren geleden, wie had gedacht dat het Atari-logo opnieuw zou worden gemaakt met behulp van CSS3.
BP-logo
Eenvoudig logo kan eenvoudig worden gemaakt met CSS3. Het beste ding met sommige van deze logo's hier getoond zijn er code die u kunt uitproberen!
Dribbble-logo
Beroemde door gebruikers aangedreven showcase-site Dribbble's logo met CSS3.
Magento-logo
Het logo van Magento is niet te moeilijk om te tekenen, maar het resultaat ziet er professioneel uit.
McDonald-logo
Ik hou van CSS3!
Twitter Bird
Perfecte verhouding, hat-tip voor de maker.
Windows-logo
Windows-logo! Ziet er echt geweldig uit, en het is eenvoudig om te maken!
Internet Explorer-logo
Echt een geweldige creatie! Het werkt in grote browsers behalve Internet Explorer 8 of lager.
Google Chrome-logo
Ik weet niet zeker of je dol bent op het nieuwe logo van Google Chrome of niet, maar dit CSS3 Google Chrome-logo ziet er geweldig uit!
Opera-logo
Nu een oefening voor jou: wat zijn de verschillen tussen dit CSS3-stuk en de real deal?
HTML5-logo
HTML5 kan niet schijnen zonder CSS3!
Volkswagen-logo
Afgezien van het kleurenschema, ziet deze CSS3-kloon er hetzelfde uit als de oorspronkelijke.
Reflectie
Met de boom van de logo's en afbeeldingen gemaakt van pure CSS3 komen de discussies die een groot debat voeren over de bruikbaarheid van de door CSS3 geproduceerde grafische afbeeldingen in de productieomgeving in de echte wereld..
Over het algemeen is de CSS3-afbeelding prima, maar wel kan vervelend worden, vooral wanneer u het ontwerp moet wijzigen of de afbeelding eenvoudigweg moet verkleinen, ook de grootste pijn hier is dat de technologie nog niet volledig wordt ondersteund door bepaalde browsers zoals Internet Explorer.
Wat denk je? Gebruik je de afbeelding gemaakt met CSS3 op je site? Heeft u een oplossing voor de huidige nadelen? Laat ons je gedachten kennen en deel het met ons als je net een CSS3-afbeelding hebt gemaakt!
Meer
Wil je echt iets met CSS3 doen? Je bent hier aan het juiste adres! Hieronder staan handleidingen en tutorials geschreven om je enorm te helpen op weg naar het beheersen van de CSS3.
- CSS3: maak een breadcrumb-navigatiemenu
- CSS3: maak een RSS-feedlogo
- CSS3: maak een zoekvak aan
- CSS3: Beginnershandleiding
- CSS3 / HTML5: webpagina's maken
- CSS3 / HTML5: maak een op AJAX gebaseerd contactformulier
