AccueilActualitésRessourcesLa 3D dans le web design ressources et tutoriels Ressources La 3D dans le web design ressources et tutoriels Publié le 07/02/2014 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest Les techniques de développement évoluent rapidement au niveau du web design entre le CSS3 et le Javascript qui permettent aujourd'hui de réaliser énormément d'effets visuels. On voit de plus en plus rarement de sites conçus avec Flash, qui disparaît progressivement. Aujourd'hui, nous vous proposons une petite introduction autour de la 3D et du web design avec différents exemples que nous avons recueillis et des ressources pour réaliser de beaux effets visuels. L'interaction du web design par la 3D Actuellement la tendance du Flat Design touche l'ensemble du web. Cela amène un très grand nombre de sites à être similaire dans leur structure et leur design, donnant ainsi une faible diversité visuelle. Mais on trouve quelques fois de vraies pépites qui jouent sur l'interactivité et amène une autre dimension à l'expérience utilisateur, notamment avec la 3D et les propriétés transform du CSS3. Quand on parle de 3D dans le web design, nous ne voulons pas parler d'images de synthèse ou d'univers semblable aux jeux vidéo, mais simplement de techniques d'animations ou de mises en pages qui amènent une profondeur et une interaction au web design. Si vous souhaitez voir des univers en 3D réalisés en CSS et HTML je vous conseille cet article : – Creating 3D worlds with HTML and CSS Quelques exemples pour illustrer le sujet Pour vous citer un exemple sur ce qu'on entend par 3D et web design, nous vous avions présenté dans notre dernier numéro des navigations originales, le site Creaktif. Par un simple effet d'accordéon en 3D, on obtient une profondeur sur l'ensemble du contenu, une expérience intéressante qui permet de plier ou déplier la page. Nous pouvons également vous présenter le site History Timeline » Toyota Hall of Fame qui fonctionne au scroll et qui utilise également des effets de 3D. Le principe est de donner de la profondeur en jouant sur différents plans et sur l'arrivée des éléments avec des mouvements de rotations et d'échelles. Un dernier exemple avec le portfolio du vidéaste Manuel Rueda qui dispose ses projets à plat pour les relever durant la navigation au scroll. On reste dans un effet simple mais très efficace. Des ressources pour vos réalisations web Pour terminer cette petite introduction, nous vous proposons de découvrir une liste de ressources et tutoriels qui pourront vous aider à réaliser des effets en 3D avec quelques lignes de CSS3 et Javascript. La plupart des exemples provient du site Tympanus.net qui est l'une des meilleures ressources en matière de tutoriels récent et de qualité en web design. Si vous avez des exemples ou des sites innovants sur le principe de la 3D, n'hésitez pas à les partager avec nous en laissant un commentaire. Nous espérons que cet article est pu nourrir votre imagination et vous donner plein d'idées innovantes pour vos projets web ! 3D Shading With Box Shadows 3D Effect Mobile Showcase Slicebox Makisu Stack Slider jQuery Tip Cards: Navigation Animated Opening Type 3D Timeline Scattered Polaroids Gallery By Vincent Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.
Ressources L’été est là ! 20 nouvelles ressources gratuites pour démarrer vos projets Publié le 21/06/2018
Ressources 16 templates, mockups et icônes à télécharger librement en PSD – mars 2017 Publié le 16/03/2017