webkit 2.02 : transformations, transitions, gradients et filter

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
Boutons communs à toutes les cartes
helpAide en ligne. collerImporte depuis le Presse-Papier les instructions css.
effacer toutEfface tout. copie dans le Presse-PapierCopie dans le Presse-Papier les instructions générées.
page de testCrée une page de test permettant de visualiser l'effet.

Transformations CSS 2D

éditeur de webkit-transforms
Boutons de commande
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. visualiseur transformation Pseudo-block visualisant les transformations saisies hors translates.

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 :


Filter

propriété CSS Filter

filter applique des effets visuels (comme le flou et la saturation) à un élément (généralement une image). On peut combiner autant de fonctions que nécessaire pour obtenir le rendu désiré.
Pour tester une série d'effets, glisser une image sur la dropzone à gauche des contrôles.

Syntaxe CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Fonctions gérées

Les fonctions attendant des valeurs en % sont gérées avec une barre de défilement horizontale.

Effet géréFonctionDescription
Luminositébrightness(%)Règle la luminosité de l'image.
0% rend l'image complètement noire.
100% est la valeur par défaut représentant l'état originel.
Une valeur supérieure à 100% donnera un effet plus brillant.
Contrastecontrast(%)Règle le contraste de l'image.
0% rendra l'image complètement grise.
100% est la valeur par défaut représentant l'état originel.
Une valeur supérieure à 100% donnera un effet plus contrasté.
Grisgrayscale(%)Convertit l'image en niveaux de gris.
0% est la valeur par défaut représentant l'état originel.
100% passe l'image complètement en niveaux de gris (noir et blanc).
Les valeurs négatives sont interdites.
Inverserinvert(%)Inverse les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion.
Une valeur de 100% inversera complètement les couleurs (négatif) et une valeur 0% (valeur par défaut) conservera l'image d'entrée telle quelle.
Les valeurs négatives sont interdites.
Saturationsaturate(%)Sature l'image.
0% désature complètement l'image.
100% est la valeur par défaut représentant l'état originel.
Une valeur supérieure à 100% augmente la saturation.
Les valeurs négatives sont interdites.
Sépiasepia(%)Convertit l'image en sépia.
0% est la valeur par défaut représentant l'état originel.
100% rend l'image complètement sépia.
Les valeurs négatives sont interdites.
Opacitéopacity(%)Le niveau d'opacité correspond à la transparence, où 0% est complètement transparent et 100% (valeur par défaut) représentant l'état originel.
Les valeurs négatives sont interdites.
Teintehue-rotate(deg)Applique à l'image une rotation de teinte sur le cercle des couleurs.
Entrer un nombre de degrés.
Floublur(px)Applique un flou gaussien à l'image avec un rayon de flou. Entrez un nombre de px.
Ombre portéedrop-shadow(h-shadow v-shadow blur spread color)Applique un effet d'ombre portée à l'image. Similaire à la propriété box-shadow.
exemple : filter: drop-shadow(8px 8px 10px red);
Cliquer la zone pour faire apparaître un dialogue de saisie.