⏱ Time to read: 1 min 57 secs

Astuces pour des fans du CSS3

Cet article est destinĂ© aux designers web, j’y prĂ©sente quelques astuces concernant les gĂ©nĂ©rateurs de CSS3 que nous les dĂ©veloppeurs utilisons souvent pour nous faciliter le travail.

Générateur de Flex

Il faut bien connaĂźtre le terme Flex dans le CSS, c’est un nouvel Ă©lĂ©ment qui nous permet de placer des contenus dans une div (BoĂźte) de diffĂ©rentes façons et bien alignĂ©s. Vous pouvez accĂ©der au site pour mieux comprendre le principe http://the-echoplex.net/flexyboxes donc il vous faut principalement avoir les bases des HTML5/CSS3 quand mÍme afin d’intĂ©grer ces astuces dans votre page web.
Capture d'Ă©cran de 2016-05-16 11:41:31

Générateur du CSS3

Capture d'Ă©cran de 2016-05-16 11:43:51
Évidemment Ă©crire un code CSS3 pour rĂ©aliser des effets de dĂ©gradĂ©s et d’ombres nĂ©cessite un processeur de CSS pour avoir du CSS compatible sur tous les navigateurs comme SASS et COMPASS. Malheureusement, les navigateurs ne fonctionnent pas de la mĂȘme maniĂšre, c’est pour ça qu’il faut toujours tester sur tous les navigateurs mĂȘme sur les smartphones et les tablettes.

Les animations CSS

GĂ©nĂ©ralement, il faut un codeur assez expert pour rĂ©aliser des animations captivantes. Sinon il faut comprendre les bases d’une animation en gĂ©nĂ©ral. Une animation est un ensemble d’images liĂ©es par des images-clĂ©s (keyframes) en CSS l’animation commence par 0% et termine en 100% et chaque keyframe doit Ítre dĂ©crite entre 0 et 100 %. l’ensemble des keyframes se regroupent dans une animation
On peut définir une animation de quatre Keyframes par exemple:

  • 0% Ă©tat initiale
  • 25% on ajoute Top 50px
  • 50% on change de background
  • 75% on diminue l’opacitĂ©
  • 100 %on revient Ă  l’Ă©tat initiale

en CSS:

C’est simple à dĂ©crire mais pour coder ça c’est un peu lourd donc il existe un gĂ©nĂ©rateur graphique menĂ© par des exemples pour rĂ©aliser des animations un peu poussĂ©es et qui nous gĂ©nĂšre un code compatible sur tous les navigateurs.
Voici son lien http://cssanimate.com/
Capture d'Ă©cran de 2016-05-16 11:56:18
Merci d’avoir pris du temps Ă  lire cet article, si vous avez l’aimĂ©, n’hĂ©sitez pas Ă  le partager ou bien si vous avez un gĂ©nĂ©rateur vous pouvez le laisser en commentaire.