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.

Tags

About: Chikori

Hi there! Welcome to my personal website. I'm Chokri, a musician, webdesigner and programmer. The Web is my passion. Followed by a graduate studies in Multimedia & technology it gave me the opportunity to make rich internet applications. Beyond web development, I am also interested in the graphic side of web interfaces to make use of GUI more attractive and more ergonomic.

You may also like...

My Github Profile