Catégories
Plugin et site web

Architecture célèbre recréée avec CSS et JavaScript

L'architecture est l'une des formes d'art les plus immédiatement reconnaissables. Montrez une image d'une structure célèbre et il y a de fortes chances qu'une pluralité de personnes l'identifie immédiatement.

C'est aussi une source de fierté et d'inspiration. Par exemple, des gens du monde entier rêvent de visiter la Tour Eiffel. Mais l'expérience ne consiste pas seulement à se tenir devant et à prendre un selfie. L'architecture représente également un moment et un lieu spécifiques, ce qui la rend encore plus spéciale.

Nous ne devrions donc pas être surpris que les concepteurs Web soient de grands fans de la conception architecturale. Tout comme une structure peut à la fois avoir une apparence et un fonctionnement parfaits, un site Web le peut aussi. Ils sont plus liés qu'on ne le pense à première vue.

Aujourd'hui, nous allons vous présenter quelques exemples convaincants de concepteurs Web rendant hommage aux structures les plus célèbres du monde. Dans de nombreux cas, l'attention portée aux détails est remarquable – ce qui en fait un véritable hommage.

La boîte à outils Web Designer

Téléchargements illimités: plus de 1 000 000 modèles Web, thèmes, plug-ins, éléments de conception et bien plus encore!

Taj Mahal

Achevé en 1643, le Taj Mahal est connu pour sa beauté complexe et son paysage luxuriant. Ce rendu CSS et JavaScript est résolument minimal, mais toujours instantanément reconnaissable. La silhouette de la structure sur un ciel doré, ainsi que la voie navigable en mouvement doux au premier plan sont tout ce dont on a vraiment besoin.

Voir le stylo
Taj Minimal par Chris Gannon

Château de Cendrillon

La vue du château de conte de fées de Disney World attire les enfants de tous âges – et de tous les coins du monde. Ici, nous avons une réplique CSS pure qui capture son essence. En regardant à travers ses 500 lignes de styles, celui-ci était clairement un travail d'amour.

Voir le stylo
Château magique par Alvaro Montoro

tour Eiffel

Pour beaucoup, la Tour Eiffel représente la romance dans la Ville Lumière. C’est une attraction à ne pas manquer, au sens propre comme au figuré. Cette animation CSS se démarque également, offrant une vue à 360 degrés.

Voir le stylo
Paix pour Paris par David Khourshid

Pyramides égyptiennes

Un spectacle impressionnant dans le désert occidental en Égypte, les pyramides font partie des sept merveilles du monde antique. Cette vision artistique des pyramides est également interactive. Survolez la scène pour regarder le soleil se lever.

Voir le stylo
Desert Sunrise (survolez l'image) par Karen

Mesurer des gratte-ciel emblématiques

Les bâtiments les plus hauts du monde définissent les toits de la ville comme rien d’autre. Vous voyez l'Empire State Building et New York City vient immédiatement à l'esprit. Vous voulez voir comment vos favoris se comparent les uns aux autres? Ce tableau magnifiquement conçu vous aidera à comparer le Burj Khalifa au Taipei 101.

Voir le stylo
amCharts 4: histogramme illustré par l'équipe amCharts

La Grande Muraille de Chine

D'une longueur de près de 22 000 kilomètres, la Grande Muraille de Chine est probablement trop grande pour être entièrement recréée avec CSS. Par conséquent, il est compréhensible que cet extrait de code ne donne qu’un aperçu de ses paysages à couper le souffle. Nous comprenons l'image.

Voir le stylo
CSS Puns – Grande Muraille de Chine par Katarzyna Marcinkiewicz

Aiguille de l'espace

La Space Needle de Seattle domine la ville de l'ouest des États-Unis et offre aux visiteurs des vues spectaculaires. Une grande partie du monde peut également reconnaître une version animée qui a été utilisée dans l'ouverture minimaliste de l'émission de télévision des années 1990, Frasier. Ce rendu CSS ultra-haut chevauche la ligne entre réalisme et simplicité.

Voir le stylo
Space Needle CSS par Alyssa Williams

Repères de morphing

Vous voulez voyager vers les monuments les plus célèbres du monde en quelques secondes? Cette magnifique animation morphing vous emmènera dans des endroits tels que Rio, Pise, Paris et Pékin. Encore une fois, l'utilisation de silhouettes démontre à quel point ces lieux sont reconnaissables – même sans toutes les minuties.

Voir le stylo
Monuments morph par Mikael Ainalem

Comment la conception Web s'inspire de l'architecture

Que vous conceviez un bâtiment ou un site Web, certains des mêmes thèmes universels s'appliquent. Prenons la beauté, par exemple. Les looks exceptionnels doivent être soutenus par une structure sous-jacente soigneusement pensée. Ignorer ce composant critique entraînera une certaine défaillance.

De plus, la complexité n’est pas nécessairement une garantie de succès. Le code le plus complexe n’est pas toujours le meilleur chemin, et il en va de même pour une structure. La simplicité peut souvent être l'approche la plus efficace.

Nous espérons que ces rendus de certains des monuments architecturaux les plus célèbres du monde vous ont inspiré! Si vous souhaitez voir encore plus d'exemples, consultez notre collection CodePen.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *