webkit 2.0 : transformations, transitions et gradients css

Allez à webkit par le menu Plugins.

Si le menu Plugins est vide, ou ne contient pas le plugin :

  • Vérifiez que le plugin « webkit.rev » se trouve bien dans le dossier de plugins « htmlstyles_plugins »; sinon placez-le à l'intérieur.
  • Cliquez l'icone « plugin update » plugin update en haut à droite de l'écran HTML Styles pour mettre à jour le menu en fonction des plugins installés.
htmlstyles.rev
htmlstyles_plugins
webkit.rev

bouton plugin Cliquez l'icone plugin version pour accéder à l'aide en ligne.

Transformations CSS 2D

éditeur de webkit-transforms
Boutons de commande
effacer tout Efface tout. copie dans le Presse-PapierCopie dans le Presse-Papier les instructions générées dans la forme attendue par les principaux navigateurs.
menu local de choix des transformations Activation et choix du point d'origine de la transformation. Peut-être saisie ou généré à partir du menu local à droite du champ. constantes de largeurmenu local origine.
Choix transformation Activation et choix de la transformation à saisir, reflété par une icone spécifique. champs de saisie champs de saisie d'un paramètre en x ou en y, avec menu d'unité pour les angles.unités d'angles
matrix mode Génère les commandes CSS en mode matrix, plus compact. page de test Crée une page de test permettant de visualiser l'effet.

Le point de transformation de l'élément est spécifié par la propriété CSS transform-origin.

Exemple :

transform-origin : center center;
transform-origin : 0 0;
transform-origin : 45px 45px;

La fonction rotate() permet d'effectuer la rotation d'un élément.

Exemple :

transform : rotate(20deg);
transform : rotate(-50deg);

Arguments :
angle : nombre suivi d'une unité CSS d'angle (deg, rad, grad, turn). La rotation est dans le sens horaire si l'angle est positif, en sens inverse s'il est négatif.

La fonction skew() permet d'incliner horizontalement et verticalement un élément.

Exemple :

transform : skew(20deg, 2deg);
transform : skew(20deg);

Arguments :
X,Y : X est un nombre représentant la distorsion horizontale suivi d'une unité d'angle CSS (deg, rad, grad, turn); Y est un nombre représentant la distorsion verticale suivi d'une unité CSS d'angle.
X : un nombre seul suivi d'une unité d'angle CSS. Revient à faire X,0.
Si la valeur de X ou Y est égale à 0 suivie d'une unité d'angle, c'est la forme d'origine.
X et Y est une valeur comprise (en degrés) entre -360deg et 360deg.

La fonction translate() déplace horizontalement et verticalement un élément par rapport à sa position d'origine.

Exemple :

transform : translate(20px, 2em);
transform : translate(20px);

Arguments :
X,Y : X est un nombre représentant la translation horizontale suivi d'une unité de longueur absolue (px,em) ou relative (%). Idem pour Y qui représente la translation verticale.

Calcul des valeurs en % :
Pour X, la valeur est calculée en fonction de la propriété «width» de son parent, pour Y, en fonction de la propriété «height» de son parent.

La fonction scale() permet de mettre à l'échelle d'un élément.

transform : scale(2, 2); /* Agrandissement */
transform : scale(2); /* Agrandissement */
transform : scale(1, 1); /* Pas de changement d'échelle */
transform : scale(0.5); /* Réduction */

Arguments :
X,Y : X est un nombre représentant le coefficient de dilatation de la longueur (width) et Y celui de la hauteur (height).
X nombre seul : s'applique à la longueur et à la hauteur.

Transitions css

éditeur de webkit-transitions

Syntaxe formelle

Une transition est composée d'une liste de transition élémentaires séparées par une virgule.

transition-élémentaire = [ propriété-changée ] | durée-transition | nomfonction-timing-transition | délai-transition
Toutes ces propriétés sont facultatives.

Exemple :

2018
vendredi 8
juin
20:45
.date { … display:block; float:left; transform:rotate(-4deg); transition: transform 0.6s; }    rotation après 0,6 secondes…
.date:hover { background: rgba(255,238,3,0.3); transform:rotate(0deg); }   rotation inverse immédiate…

Gradients css

Le gradient permet de créer un fond dégradé entre deux ou plusieurs couleurs.

Boutons communs à l'ensemble des gradients :

Choix du gradient :

type de gradient

Choisir un type linéaire ou radial, éventuellement répétitif.

Choix de couleurs à mélanger :

couleurs de dégradé

Choisir le nombre de couleurs (minimum 2).
Pour chaque couleur, un contrôle permet de sélectionner un couleur et, pour un dégradé radial, de préciser le pourcentage représenté par son rayon dans l'élément.

Gradient linéaire :

éditeur de gradient linéaire

Paramètres d'un linear-gradient :

Gradient radial :

éditeur de gradient radial

Syntaxe :

radial-gradient = radial-gradient([ [ shape || size ] [ at position ]? , | at position, ]? color-stop [ , color-stop ])

Arguments :