09 décembre Les actus du web

Comment donner du dynamisme à mon site internet grâce au css3 ?

CSS3 nous permet d’appliquer des effets que seulement la technologie flash nous autorisait. Nous connaissons tous les désavantages de cette technologie, nous ne nous y attarderons pas.

Tous les navigateurs, notamment les versions les plus anciennes ne prennent pas en compte css3 c’est pourquoi n’utilisez ces techniques que pour l’aspect esthétique et non pas ergonomique et cela pour ne pas perdre quelques pourcentages d’internautes.

J’utilise ces feuilles de styles depuis déjà quelques temps. Je vous propose une étude de cas sur un site que nous avons sortie depuis déjà pas mal de temps : Modern Pool Alpes.

Nous allons voir les effets mis en place sur le menu haut, tout d’abord il faut préciser qu’aucune image n’a été utilisée, seul le CSS a été employé.

Tout d’abord, nous pouvons appliquer la transition. Elle permet d’avoir un effet doux pour le passage du roll hover du blanc au bleu. Pour cela il faut utiliser « transition ».

ul li{

transition: all 0.4s linear;

}

  • Sur les éléments de liste nous appliquons la transition, la all signifie que l’effet va être appliqué sur plusieurs styles css de la liste (fonctionnent background, color, height, weight et outline)
  • 0.4s : vous pouvez écrire sous forme de millisecondes également, il faudra alors mettre « ms » au lieu de « s » (pour info 0.4s = 400ms)
  • linear correspond au easing, l’effet élastique : par exemple accélération au début, décélération puis accélération sur la fin de l’animation. Ici linear signifie qu’il n’y a aucune accélération décélération dans l’animation ; elle est linéaire (fonctionnent ease, linear, ease-in, ease-out et ease-in-out)

En mettant un « background-color » différent sur le hover de la « li » vous aurez ainsi un magnifique changement de couleur.

 

Maintenant attardons-nous sur l’effet oblique du fond des éléments de liste. Pour faire cela nous utilisons « transform ». Nous allons transformer le fond des li en le rendant oblique et cela tout simplement.

Dans notre cas, il faut écrire :

ul li{

transform: skew(-20deg);

}

Et voilà nous avons un joli effet sur le menu. Cependant tout n’est pas fini… Il faut prendre en compte les anciens navigateurs… Et oui ! Nous allons appliquer des préfixes sur ces « propriétés propriétaires », nous contournerons ainsi le problème… Pas de problèmes que des solutions !

 

Les préfixes nominés aux oscars sont :

  • -webkit- pour le Webkit de Chrome, Safari et Android
  • -moz- pour le Gecko de Mozilla
  • -o- de Opera
  • -ms- pour Microsoft de Internet Explorer (ils font des efforts… si si)

 

On peut rajouter aussi -khtml- pour KHTML de Konqueror… moui bon on peut on peut.

Il faudra ainsi noter, par exemple, -webkit-transform: etc etc.

Nota bene qu’il faut toujours commencer par les « propriétés propriétaires » pour finir par la propriété générique : un jour tous les navigateurs utiliseront ces propriétés génériques. Elles « écraseront » ainsi les « propriétés propriétaires » (dans le code !)

 

Pour finir cet article je ne peux pas ne pas vous parler de ce site excellentissime qui vous permettra de gagner beaucoup de temps : CSS3Generator

Grâce à lui, vous pourrez connaître les compatibilités navigateurs ; quelles versions pour quels styles ? De plus, vous aurez tout le code concernant tous les navigateurs (-webkit- -moz- -ms- -o-)

Et pour connaître le CSS à fond, n’hésitez pas à consulter cette très bonne adresse : W3schools
Bonne intégration à tous !

Tags:
Accessibility by WAH