Codage de Kung-fu 35 graphiques construits purement avec CSS3

Regardez les graphiques ci-dessous, l’impressionnant Photoshop fonctionne bien? Non, ils sont créés par CSS3. Oui ils sont complètement “tiré” par CSS3! Quand nous avons vu suffisamment d’animations CSS3, nous avons pensé que c’est toutes les choses que CSS3 peut faire en tant que tueur potentiel Flash, mais nous nous trompons. Les développeurs ne satisfont peut-être pas avec le plaisir de l'animation, alors encore une fois, ils repoussent les limites de CSS3 pour défier le monde de l'éditeur graphique..

Cet article contient 35 graphiques CSS3 soigneusement élaborés, qui incluent même quelque chose que vous ne voudriez pas relier à CSS3, comme Iphone Apple, personnage de dessin animé Doraemon, et plus de surprises! Heck, certains d'entre eux viennent même avec un tutoriel détaillé qui vous apprend comment y parvenir! Alors, ne manquez pas la belle occasion d'apprendre à créer des graphiques en utilisant CSS3 et un peu de HTML, passons vilain avec CSS3!

Il est fortement recommandé d'afficher ces démonstrations à l'aide de la dernière version de Safari ou de la version pour développeurs de Google Chrome. La plupart des démos supportent la dernière version de Firefox et Google Chrome, bien que.

Icône de fil RSS

Icône de fil RSS construite avec CSS3, exclusivement de Hongkiat! Avec le lien vient un tutoriel que vous pouvez réellement apprendre à “dessiner” l'icône de flux RSS sans même utiliser une seule image. Créez le miracle CSS3 de vos propres mains!

Apple iMac

Ouais, mes yeux aussi ne peuvent pas y croire, mais c'est un iMac “assemblé” purement avec CSS3.

Clavier Apple

C'est Apple Keyboard construit avec CSS3! Heck, les boutons du clavier peuvent même être appuyés.

Iphone Apple

Oh, encore une chose: iPhoneCSS3.

fleur de cerisier

Le vrai côté génial de CSS3 est qu'il peut être utilisé pour construire n'importe quoi, y compris des plantes et des animaux!

Tasse à café

Une journée fatigante? Ayons un café CSS3, mieux servi avec Safari / Google Chrome.

Doraemon

Ce Doraemon est célèbre pour les tests de compatibilité CSS3. Essayez-le dans Internet Explorer 8 ou inférieur et passez une bonne journée.

Meowww!

Maintenant, vous regardez un chat construit complètement avec du code! Dommage que le CSS3 ne puisse générer d'effets sonores, du moins pour l'instant.

Champignon, Triforce, Poké Ball, Kirby

“Étant un nerd, j'ai créé quelques créations ringardes - un champignon Mario, la Triforce, un Pokéball et Kirby. Pour ceux qui utilisent des navigateurs de dinosaures, il y a une capture d'écran de ce à quoi il est censé ressembler.”

Chat nyan

“Il contient 81 éléments DOM, 688 lignes de CSS pur et une fonction JavaScript pour la boucle audio. Mon CSS échoue au test CSSLint et j'en suis vraiment fier.”

Les motifs

Le CSS3 est si performant qu'il peut également être utilisé pour constituer un atout fondamental pour la conception Web, tels que ces modèles..

BonBon

BonBon sont de jolis boutons CSS3 créés avec un objectif en tête: des boutons sexy, très flexibles avec le balisage le plus minimaliste possible.

Icônes iOS

Incroyable? Oui. Ces icônes sont construites par coins arrondis, ombres, les gradients, rgba, pseudo-éléments, et se transforme, à l'aide de certains outils tels que les outils de westciv et Border Radius.

Icônes de médias sociaux

Il est impossible pour un développeur Web de ne pas créer d'icônes de réseaux sociaux s'il peut créer un iPhone et Doraemon avec CSS3. Et ils ont vraiment bien construit ces icônes.

Icônes de médias sociaux

Un autre ensemble d'icônes de médias sociaux qui montrent les possibilités du CSS3 dans la création d'icônes utilisables.

Particulier

“Peculiar est un paquet d'icônes gratuit créé uniquement en CSS. Il a été créé pour les sites et les applications Web nécessitant le moins de demandes HTTP possible ou n'ayant pas besoin d'utiliser une image..”

Icônes graphiques

84 icônes graphiques simples utilisant uniquement CSS et HTML sémantique. Ceci est toujours considéré comme “prêt pour la production” icônes, mais ils ont l'air très prometteur.

Steve Jobs

Steve Jobs est non seulement l'icône de l'ère numérique, mais également le leader qui promeut grandement HTML5.

Twitter Fail Whale

Twitter fail whale ne manquera pas de vous surprendre, sauf dans Internet Explorer 8 ou inférieur.

parapluie

Les éléments de l'interface utilisateur sont rendus possibles avec CSS3, et le rendu est vraiment élégant!

Logo Adobe Photoshop

Un hommage à Photoshop sans utiliser Photoshop.

Logo Android

L’Android est composé de formes assez simples, mais il explique l’avantage de CSS3: vous pouvez créer des éléments simples et les modifier à votre guise en utilisant uniquement du code mais pas Photoshop..

Logo Apple

Le logo Apple rétro présenté avec CSS3, toujours aussi génial que l'époque de sa création.

Atari Logo

Des années auparavant, qui aurait pensé que le logo d'Atari serait recréé avec CSS3.

Logo BP

Un logo simple peut être facilement créé avec CSS3. La meilleure chose avec certains de ces logos présentés ici sont il y a du code fourni pour que vous puissiez essayer!

Logo Dribbble

Site de vitrine célèbre alimenté par l'utilisateur, logo Dribbble présenté avec CSS3.

Logo Magento

Le logo de Magento n'est pas trop difficile à dessiner mais le résultat est professionnel.

Logo McDonald

Je suis amoureux de CSS3!

Twitter Bird

Proportion parfaite, pointe du chapeau au créateur.

Logo Windows

Logo Windows! C'est vraiment génial, et c'est facile à créer!

Logo Internet Explorer

Vraiment super création! Cela fonctionne dans les principaux navigateurs sauf Internet Explorer 8 ou inférieur.

Logo Google Chrome

Je ne suis pas sûr que vous aimiez le nouveau logo de Google Chrome ou non, mais ce logo CSS3 Google Chrome a un look génial!

Logo Opera

Maintenant une pratique pour vous: quelles sont les différences entre cette pièce CSS3 et la vraie affaire?

Logo HTML5

HTML5 ne peut pas briller sans CSS3!

Logo Volkswagen

Excepté le jeu de couleurs, ce clone CSS3 semble identique à celui d'origine..

Réflexion

Avec le boom des logos et des graphiques en CSS3 pur, les discussions débattent en grande partie sur la convivialité des graphiques produits par CSS3 dans l'environnement de production réel..

En général, le graphique CSS3 est correct, mais il peut être agaçant surtout lorsque vous devez modifier la conception ou simplement redimensionner le graphique, Le plus gros problème, c’est que la technologie n’est pas encore totalement prise en charge par certains navigateurs comme Internet Explorer..

Qu'est-ce que tu penses? Utiliserez-vous le graphique créé avec CSS3 sur votre site? Avez-vous une solution pour ses inconvénients actuels? Faites-nous savoir votre pensée et partagez-la avec nous si vous venez de cuire un graphique CSS3!

Plus

Envie de faire quelque chose avec CSS3? Vous êtes arrivé au bon endroit! Vous trouverez ci-dessous des guides et des didacticiels destinés à vous aider grandement à maîtriser le CSS3..

CSS3: Créer un menu de navigation miettes de pain
CSS3: créer un logo de flux RSS
CSS3: Créer un champ de recherche
CSS3: Guide du débutant
CSS3 / HTML5: Créer des pages Web
CSS3 / HTML5: Créer un formulaire de contact basé sur AJAX