Animations CSS3 et Media Queries

Bonjour à tous,

Je travaille depuis quelques temps dans le web, mais j'avoue que je n'avais jamais pris le temps de tester en profondeur les animations CSS3 et les medias queries. Je me suis amusé la semaine dernière à faire un test alliant les deux sur la page d'accueil d'un de mes anciens sites: rochmedia.



Comme c'est la première fois que je travaille ce type de technologies, j'aurai aimé avoir votre avis sur ce 1er essai.

J'aurais aussi aimé savoir si l'un d'entre vous saurait comment corriger l'un des défauts de ma page. Actuellement, mon background s'adapte parfaitement aux changements de taille de la fenêtre grâce à ces propriétés :

body {
  background: url(/temp/background4.jpg) no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;}

Mon souci est ensuite de réussir à caler parfaitement le cercle au bout de mon doigt, quelle que soit la taille de la fenêtre. Actuellement, j'ai utilisé (beaucoup) de media queries pour y parvenir mais c'est fait un peu "à l'arrache". Si quelqu'un a une solution propre pour cela, je lui serait vraiment reconnaissant.
Modifié par Confridin (27 Apr 2012 - 09:57)

Bonjour,

les médias queries ne sont pas une alternative au onresize en décrivant un media différent tous les 10 pixels, mais une manière de cibler des appareils qui ont des présentations très différentes afin d'offrir une mise en page adaptée.

Or, là c'est du jamais vu: Tu déclares une 50aine de médium différents mais le site n'est absolument pas consultable sur un mobile…

Pour le rond, le mieux est d'utiliser javascript. Pour calculer la position il faut faire quelques maths autour de l'algorithme de resize&crop qu'utilise le navigateur pour afficher l'image.

J'aime faire du jamais vu ^^

Pour la fonctionnalité de calcul en javascript, tu aurais des pistes de tutoriels ou de sites qui utilisent ce type de fonctions ?