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.
Générateur du CSS3
É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:
@keyframes animationFrames{
0% {
// CSS de la div en état simple
}
25% {
top:50px;
// ou bien transform: translate(0px,50px) ;
}
50% {
background: #eaeaea;
}
75% {
opacity: .7;
}
100% {
// état initiale dont le même code
}
}
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/
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.
