Tilt Hover Effects | Demo 2 | Codrops
▻http://tympanus.net/Development/TiltHoverEffects/index2.html
Tilt Hover Effects | Demo 2 | Codrops
▻http://tympanus.net/Development/TiltHoverEffects/index2.html
Isometric Grids | Demo 1 | Codrops
▻http://tympanus.net/Development/IsometricGrids/index.html
Heat Distortion Effect | Demo 4: Water
▻http://tympanus.net/Tutorials/HeatDistortionEffect/index4.html
#WebGL_démo_wow_effet
CSS Reference | Codrops
▻http://tympanus.net/codrops/css_reference/#section_css-data-type
An extensive CSS reference with all the important properties and info to learn CSS from the basics
CSS Reference | Codrops
▻http://tympanus.net/codrops/css_reference
An extensive CSS reference with all the important properties and info to learn CSS from the basics
Super ressource de Codrops, qui est en passe de devenir une très sérieuse référence et plus seulement un laboratoire d’expérimentations et de démos qui en jettent mais impraticables « dans la vraie vie ».
#css
Si seulement tous ceux capables d’écrire de si jolie docs pouvaient se rassembler, plutôt que multiplier les projets concurrents… :-/
MDN, WebPlatform.org, W̶3̶S̶c̶h̶o̶o̶l̶… ah non pardon…
Maintenant Codrops…
Ouais, je suis d’accord @nhoizey… Mais bon : « il y a 15 projets différents qui font ça, on va en démarrer un mieux qui va rassembler tout le monde… il y a 16 projets différents qui font ça, on va… »
Voilà, c’est à ça que je pensais mais je n’arrivais plus à le retrouver. :)
Premier résultat Google sur « xkcd standards »… ;-)
#Hover Effect Ideas | Set 1
▻http://tympanus.net/Development/HoverEffectIdeas
An inspirational collection of subtle hover effects
Le hover a-t-il encore un sens de nos jours, avec tous ces appareils tactiles ?
Enfin, en décoration oui, pour signifier que la souris passe sur un élément ayant une interaction (lien, bouton, essentiellement).
Mais pas pour faire apparaître autre chose : on voit que dans certains exemples ça fait apparaître des liens ou boutons en plus (favoris, télécharger, etc), et dans presque tous du contenu textuel supplémentaire.
La logique qui fait qu’en tactile, un truc en hoover apparait au premier clic, et qu’une deuxième clic déclenche ce qui serait un clic dans un appareil « normal », n’est pas plus ou moins universelle ?
Je n’ai pas de statistiques mais ce n’est pas du tout une fonctionnalité reconnue et documentée, au départ c’est juste un ajout sur le Safari de iOS :
▻http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem
▻http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices
▻http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices
À chaque fois c’est « on Apple », « on iOS ». D’autres peuvent avoir copié mais au départ c’est ça.
Fullscreen Form Interface | Codrops
►http://tympanus.net/codrops/2014/07/30/fullscreen-form-interface
An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.
Inspiration for Custom #Select Elements | Codrops
▻http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements
Some inspiration for styling a custom version of the select element. There are many possibilities and today we are exploring some ideas of how to let the user select a choice in style.
#Morphing_Buttons Concept | Codrops
▻http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept
Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.
#Fullscreen #Overlay Effects | Codrops
▻http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects
Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.
Creative Loading Effects
▻http://tympanus.net/Development/CreativeLoadingEffects
Loading animations don’t have to be restricted to a tiny indicator.
Here is some inspiration for some creative loading effects.
Circular Navigation - Demo 2 | Codrops
▻http://tympanus.net/Tutorials/CircularNavigation/index2.html
#Menu_de_navigation sympa, circulaire
Via ▻http://www.lafermeduweb.net/veille/une-navigation-de-menu-circulaire-originale-avec-transitions-css-37260 (again)
Creative Link Effects
▻http://tympanus.net/Development/CreativeLinkEffects
Subtle and modern effects for links or menu items
Troubleshooting #css
▻http://tympanus.net/codrops/2013/07/17/troubleshooting-css
“Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them.” Tags: css
Tutorials | Codrops
▻http://tympanus.net/codrops/category/tutorials
“In this section you will find in-depth how-tos involving common web development and web design techniques.”
Nifty Modal Window Effects
▻http://tympanus.net/Development/ModalWindowEffects
There are many possibilities for modal overlays to appear. Here are some modern ways of showing them using CSS transitions and animations.
A Collection of Page Transitions | Codrops
▻http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions
We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.