Popov Orlov | Le site de Pierre JURKIEWICZ

Créations 3D, Modélisations 3D, Dessins, Vidéos, Multimédia... Mes créations

Aller au contenu | Aller au menu | Aller à la recherche

16mar

Une ombre sur un texte en CSS ( text-shadow )

Après avoir vu comment mettre une ombre portée à des éléments de notre site, nous allons voir comment en mettre sur du texte.

Text-shadow


 Voila un petit exemple tout simple, le calque (div) ci-dessous avec une ombre.
Voici certains navigateurs compatibles: Firefox, Safari/Chrome, Opera et IE9.
Et ici le code qui va avec :
text-shadow: 5px 5px 3px #789;
La propriété text-shadow attend au minimum quatre paramètres.

Le premier étant le décalage horizontale avec l'élément en question. Une valeure positive déplacera l'ombre vers la droite alors qu'une négative vers la gauche.
text-shadow: -5px 5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le second étant le décalage vertical avec l'élément en question. Une valeure positive déplacera l'ombre vers le bas alors qu'une négative vers le haut.
text-shadow: -5px -5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le troisième sert à définir la distance de dégradé dans l'ombre. Seules des valeurs positivent sont acceptées.
text-shadow: -5px -5px 0px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Enfin la quatrième est pour la couleur de l'ombre.
text-shadow: -5px -5px 8px #ff0000;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.


Plusieurs ombres

Comme pour le box-shadow, on peut avoir plusieurs ombre différentes sur le texte. Pour cela, il suffit de les séparer par une virgule. L'ordre qui est alors pris en compte, est l'inverse de l'ordre d'écriture. En effet la première ombre renseigné sera au premier et les autres suivront.


#Example_A {
width: 20px;
height: 25px;
margin: 5px;
padding: 20px;
text-shadow: 0 0 5px yellow, 10px -5px #FFFF00, 10px 10px 6px blue, -12px 12px 1px #F600FF, -10px -5px 2px red;
}

A


Pourquoi mettre plusieurs ombres à un texte? Bien utilisé le résultat donne des effets très convaincant sans passer par des logiciels de dessin.
3D

#Example_3D {
color: white;
font-size: 100px;
margin: 5px;
padding: 5px;
text-shadow: 0 1px 0 rgb(204, 204, 204), 0 2px 0 rgb(201, 201, 201), 0 3px 0 rgb(187, 187, 187), 0 4px 0 rgb(185, 185, 185), 0 5px 0 rgb(170, 170, 170), 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

Au feu!!

#Example_Feu {
color: white;
font-size: 50px;
margin: 5px;
padding: 5px;
text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}

31aoû

Effectuer des transformations en CSS ( transform )

Nous allons découvrir la propriété transform en css. Celle-ci permet d'effectuer des rotation, translation, etc... . Attention, pour le moment pour que cette propriété soit interprété par tous les navigateurs il faut pour le moment mettre le préfixe '-moz-' et '-webkit-'.


Transform translate


La fonction `translate` attend deux paramètres. Le premier indiquant la valeur en pixel de la translation sur l'axe horizontal, et le second sur l'axe vertical. Si le second n'est pas renseigné, la valeur 0 sera interprété par défaut.

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: translate(50px, 50px);
-webkit-transform: translate(50px, 50px);
}

A
B

Pour obtenir ce résultat nous aurions aussi pu utiliser les deux autres fonctions, qui sont `translateX` et `translateY` qui permettent d'effectuer une translation suivant un seul axe. Ces fonctions attendent un seul paramètre. 


Transform scale


Comme pour la fonction `translate`, la fonction `scale` attend deux paramètres. Le premier renseignant une valeur d'échelle horizontal, et le second sur l'axe vertical. Si le second n'est pas renseigné, la première valeur sera interprété par défaut. 
Les valeurs inférieures à 1 permettront une réduction alors que les valeurs supérieures feront une augmentation. Les valeurs négatives sont acceptées, et simuleront des effets miroirs.

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: scale(1.7,1.7);
-webkit-transform: scale(1.7,1.7);
}

#exampleC {
 width:30px;
 height30px;
-moz-transform: scale(0.5,0.5);
-webkit-transform: scale(
0.5,0.5);
}

#exampleD {
 width:30px;
 height30px;
-moz-transform: scale(0.5,1.5);
-webkit-transform: scale(
0.5,1.5);
}

#exampleT {
 width:30px;
 height30px;
-moz-transform: scale(-1,-1);
-webkit-transform: scale(-1
,-1);
}

A
B
C
D
T

Comme pour la translation; il existe les fonctions `scaleX` et `scaleY`.


Transform rotate


La fonction `rotate` quand à elle prend en paramètre une valeur d'un angle en degrés et par défaut la rotation sera effectuée à partir du milieu du bloc. 

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: rotate(45deg);
-webkit-transform: 
rotate(45deg);
}

A
B

Pour changer l'axe de rotation, nous allons devoir voir une autre propriété du css, qui est `transform-origin`. Celle-ci attend deux paramètres qui peuvent être une valeur en pourcentage, une valeur en pixel ou les mots clés left, center, right pour l'axe horizontal et top, center, bottom pour l'axe vertical. Les valeurs négatives sont admises.

#exampleC {
 width:30px;
 height30px;
}

#exampleD {
 width:30px;
 height30px;
-moz-transform: rotate(45deg);
-webkit-transform: 
rotate(45deg);
-webkit-transform-origin:top left;
-moz-transform-origin:top left;
}

C
D



Transform skew


La fonction `skew` permet de jouer sur la perspective, et comme les deux premières fonctions que nous avons vues, elle prend en paramètre deux valeurs.  La première indiquant la valeur en degrés de la modification sur l'axe horizontal, et la seconde sur l'axe vertical. Si la seconde n'est pas renseignée, la valeur 0 sera interprété par défaut.
Les fonctions `skewX` et `skewY` existe aussi pour jouer sur un seul axe.

#exampleA {
 width:30px;
 height30px;
}

#exampleB {
 width:30px;
 height30px;
-moz-transform: skew(30deg, 30
deg);
-webkit-transform: skew(30deg, 30deg);
}

#exampleC {
 width:30px;
 height30px;
-moz-transform: skewX(30deg
);
-webkit-transform: skewX(30deg);
}

#exampleD {
 width:30px;
 height30px;
-moz-transform: skewY(30deg
);
-webkit-transform: skewY(30deg);
}

A
B
C
D

Nous avons maintenant vu les principales façons de transformer des bloc en CSS. Vous allez me demander à quoi ça sert. Coupler avec une seconde propriété css que nous verront bientôt, nous arriverons à faire des rendus assez sympas.
Mais avant, regardons comment coupler des transformations, et le résultat que cela peut donner.

Top
Left
Face
#Top{
 width:200px;
 height200px;
-moz-transform: rotate(60deg) skewY(-30deg) scaleY(1.16) translateX(100px);
-webkit-transform: rotate(60deg) skewY(-30deg) scaleY(1.16) translateX(100px);
}

#Left{
 width:200px;
 height200px;
-moz-transform: skewY(30deg) translateY(16px);
-webkit-transform: skewY(30deg) translateY(16px);
}

#Face{
 width:200px;
 height200px;
-moz-transform: skewY(-30deg) translate(200px,-69px);
-webkit-transform: skewY(-30deg) translate(200px,-69px);
}

Transform matrix


Toutes les transformations que l'on vient de voir peuvent être effectuer simultanément avec une seule fonction : `matrix` qui permet de donner une matrice de transformation 2D. Nous n'allons pas voir comment marche les matrice de transformation. mais plutôt comment l'utiliser en CSS.
Cette fonction attend six paramètre [a, b, c, d, e, f]. Les exemple suivant sont des matrices simples. Les quatre premières valeur sont sans unités. Les deux dernières servent à effectuer un décalage(translation) et sont exprimés en pixel. Libre à vous par la suite de laisser libre court à votre imagination.

#A (matrice d'identité, rien ne bouge){
 width:30px;
 height30px;
-moz-transform: matrix(1, 0, 0, 1, 0px, 0px);
-webkit-transform: matrix(1, 0, 0, 1, 0px, 0px);
}

#B (échelle horizontale x2){
 width:30px;
 height30px;
-moz-transform: matrix(2, 0, 0, 1, 0px, 0px);
-webkit-transform: matrix(2, 0, 0, 1, 0px, 0px);
}

#C (réflection horizontale){
 width:30px;
 height30px;
-moz-transform: matrix(-1, 0, 0, 1, 0px, 0px);
-webkit-transform: matrix(-1, 0, 0, 1, 0px, 0px);
}

#D (perspective  horizontale){
 width:30px;
 height30px;
-moz-transform: matrix(1, 0, 1, 1, 0px, 0px);
-webkit-transform: matrix(1, 0, 1, 1, 0px, 0px);
}

#E (rotation et échelle){
 width:30px;
 height30px;
-moz-transform: matrix(0.433, 0.25, -0.25, 0.433, 0px, 0px);
-webkit-transform: matrix(0.433, 0.25, -0.25, 0.433, 0px, 0px);
}
A
B
C
D
E
Le plus grand avantage des matrices c'est le fait de pouvoir les combiner. En effet en multipliant les matrices (plusieurs transformations) on obtient une seule matrice pouvant regrouper plusieurs modifications. Exemple :

Transformation 1 = matrice(a1, b1, c1, d1, e1, f1)
Transformation 2 = matrice(a2, b2, c2, d2, e2, f2)
Transformation 1 + 2 = matrix(a2*a1 + b2*c1, a2*b1 + b2*d1, c2*a1 + d2*c1, c2*b1 + d2*d1, e2*a1 + f2*c1 + e1, e2*b1 + f2*d1 + f1)

26aoû

Faire un ombre portée en CSS ( box-shadow )

Une autre nouveauté pour les Web designer en Css est la possibilité de mettre des ombres à différents éléments via le css, et non plus dans des logiciels d'édition d'image. Ces ombres sont paramétrables de plusieurs façon, la couleur, la taille, le flou ainsi que la distance. 
Attention tout de même certains navigateurs arriérés ne comprennent pas cette syntaxe.

Box-shadow


 Voila un petit exemple tout simple, le calque (div) ci-dessous avec une ombre.
Voici certains navigateurs compatibles: Firefox, Safari/Chrome, Opera et IE9.
Et ici le code qui va avec :
box-shadow: 5px 5px 3px #789;
La propriété box-shadow attend au minimum quatre paramètres.

Le premier étant le décalage horizontale avec l'élément en question. Une valeure positive déplacera l'ombre vers la droite alors qu'une négative vers la gauche.
box-shadow: -5px 5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le second étant le décalage vertical avec l'élément en question. Une valeure positive déplacera l'ombre vers le bas alors qu'une négative vers le haut.
box-shadow: -5px -5px 3px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Le troisième sert à définir la distance de dégradé dans l'ombre. Seules des valeurs positivent sont acceptées.
box-shadow: -5px -5px 0px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Enfin la quatrième est pour la couleur de l'ombre.
box-shadow: -5px -5px 8px #268;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Un autre paramètre optionnel peut être rajouté avant de définir la couleur, il représente l'agrandissement de l'élément en question.
box-shadow: 0 0 8px 5px #789;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Ombre interne (inset)


Pour rajouter une ombre à l'intérieur d'un élément, il suffit de rajouter le mot clef 'inset' en premier paramètre. Les exemples ci-dessous vous détaillent différents rendu :

#Example_A {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px #888;
}

#Example_B {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px 5px #888;
}

#Example_C {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px 0 5px #888;
}

#Example_D {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset -5px -5px 5px 5px #888;
}

#Example_E {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset 0 0 5px #888;
}

#Example_F {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: inset 0px 0px 5px 5px #888;
}

A
B
C
D
E
F

Plusieurs ombres

On a vu que comment appliquer une ombre à des éléments, mais il faut savoir qu' l'on peut avoir plusieurs ombre différentes par éléments. Pour cela, il suffit de les séparer par une virgule. L'ordre qui est alors pris en compte, est l'inverse de l'ordre d'écriture. En effet la première ombre renseigné sera au premier et les autres suivront.

#Example_A {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 0 0 10px 5px yellow, 40px -30px rgb(255, 153, 0), 40px 30px 50px blue, -40px 30px #f600ff, -40px -30px 50px red;
}

A

Transparence et coins arrondis

Il est possible de gérer l'opacité de l'ombre grâce à la composante alpha d'une couleur. Les exemples ci-dessous nous montrent bien l'utilisation de cette composante :

#Example_A {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 5px 5px rgb(0,0,0);
}

#Example_B {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 5px 5px rgba(0,0,0,0.7);
}

#Example_C {
height: 45px;
width:140px;
background-color:#AABBCC;
margin:5px;
padding:5px;
box-shadow: 5px 5px rgba(0,0,0,0.3);
}

A
B
C

Et rien ne nous empêche de le combiner avec les coins arrondis que nous avons vu précédemment.
box-shadow: 0 0 8px 5px #789;
border-radius:15px;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

30juin

Créer des coins arrondis en CSS (border-radius)

Le blog change un peu d'orientation avec des articles orientés WebMaster. Le premier concerne donc le CSS3 et l'une de ses caractéristiques, border-radius. Comme vous pouvez vous en douter, en utilisant ce paramètre vous pouvez arrondir les coins des éléments HTML sans utiliser des images. Attention tout de même certains navigateurs arriérés ne comprennent pas cette syntaxe.

Border-radius


 Voila un petit exemple tout simple, le calque (div) ci-dessous à ces coins arrondis de 15px.
Voici certains navigateurs compatibles: Firefox, Safari/Chrome, Opera et IE9.
Et ici le code qui va avec :
#example1 { border-radius: 15px; }
Pour Firefox < 5 vous devrez utiliser le préfixe -moz- :
#example1 { -moz-border-radius: 15px; }

Border-*-radius


La propriété border-radius permet de gérer les quatres coins en même temps, vous pouvez gérer les coins indépendamment grâce à d’autres expressions (border-bottom-left-radius, border-top-left-radius, etc.)

Les propriétés border-*-radius acceptent deux valeurs qui peuvent être définies en px ou en %
Si une seule valeur est renseigné, elle sera utilisé pour définir le rayon horizontal et vertical du coin.
Si les deux valeurs sont présente, alors la première correspondra au rayon horizontal alors que le second le vertical.
Si la valeur est égale à 0, alors le coin ne sera pas arrondi.

Voici un exemple de syntaxe :
border-top-right-radius: 20px;
border-top-left-radius: 10px 30px;
border-bottom-right-radius: 10% 5%;
border-bottom-left-radius: 0px;
Pour un résultat :
div compatibles: Firefox, Safari/Chrome, Opera et IE9.

Quelques illustrations pour mieux comprendre :
div
border-top-left-radius: 15px;
div
border-top-left-radius: 15px 15px;
div
border-top-left-radius: 40px 15px;
div
border-top-left-radius: 15px 40px;

Border-radius : *px / *px


La propriété border-radius permet aussi de gérer séparément les quatres coins d'un élément. Pour cela, il faut définir deux jeux de valeurs séparés par un <i>/</i>. Le premier jeu qui peu être composer de une à quatre valeurs défini le rayon horizontal de tous les quatres coins. Le second qui est optionnel permet de donner des valeurs verticales aux coins.

Voici un exemple de syntaxe :
#Example_A { border-radius: 12px 16px 12px 16px / 16px 12px 16px 12px; }
#Example_B {border-radius: 12px; }
#Example_C {border-radius: 12px 16px / 16px; }

Et le résultat :
A
B
C

Différents exemples :

#Example_A {
height: 45px;
width:140px;
border-bottom-right-radius: 30px;
}

#Example_B {
height: 45px;
width:140px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 45px;
width:140px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 45px;
width:140px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
border-radius: 35px;
}

A
B
C
D
E
F