Après avoir passé plusieurs heures sur facebook à contrôler mes troupes dans ce jeu. J'en ai tiré de l'inspiration pour une réalisation 3D. ( 1er trimestre 20102)
19mar 2012
Empires & Allies fan Art
19:29 - Par Popov Orlov - 3D - aucun commentaire
16mar 2012
Une ombre sur un texte en CSS ( text-shadow )
07:59 - Par Popov Orlov - CSS - aucun commentaire
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.
Voila un petit exemple tout simple, le calque (div) ci-dessous avec une ombre.
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.
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.
Le troisième sert à définir la distance de dégradé dans l'ombre. Seules des valeurs positivent sont acceptées.
Enfin la quatrième est pour la couleur de l'ombre.
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;
}
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);
}
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;
}
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;
}
22sep 2011
Campagne économie d'énergie CALEO
14:47 - Par Popov Orlov - 3D - 4 commentaires
Les dernières affiche pour Caleo, où Egen combat les énergies trop gourmande. Toujours en collaboration avec Isabelle Schoepfer. ( 3eme trimestre 2011 )
01sep 2011
Campagne prévention 3D
20:25 - Par Popov Orlov - 3D - un commentaire
Voici deux modélisations de chaussure pour une campagne de prévention sur l'utilisation de chaussures conformes dans le milieu hospitalier. ( 1eme trimestre 2011 )
31aoû 2011
Effectuer des transformations en CSS ( transform )
07:29 - Par Popov Orlov - CSS - 7 commentaires
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);
}
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.
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);
}
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);
}
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;
}
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, 30deg);
-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);
}
width:30px;
height30px;
}
#exampleB {
width:30px;
height30px;
-moz-transform: skew(30deg, 30deg);
-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);
}
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);
}
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)
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)
29aoû 2011
Expo Modélisaction 3D
08:33 - Par Popov Orlov - 3D - un commentaire
Voici les 10 visuels des tableaux qui ont fait l'objet de mon exposition à l'espace grün de Cernay au mois de Décembre 2010 et Janvier 2011. Les tableaux sont prêts à être à nouveau exposer. Avis aux amateurs. ( 4eme trimestre 2010 )
26aoû 2011
Faire un ombre portée en CSS ( box-shadow )
09:44 - Par Popov Orlov - CSS - aucun commentaire
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.
Voila un petit exemple tout simple, le calque (div) ci-dessous avec une ombre.
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.
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.
Le troisième sert à définir la distance de dégradé dans l'ombre. Seules des valeurs positivent sont acceptées.
Enfin la quatrième est pour la couleur de l'ombre.
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.
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 :
Et rien ne nous empêche de le combiner avec les coins arrondis que nous avons vu précédemment.
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;
}
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;
}
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);
}
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 : border-radius:15px;
div compatibles: Firefox, Safari/Chrome, Opera et IE9.
24aoû 2011
Mascotte CCRG
14:44 - Par Popov Orlov - 3D - 2 commentaires
Une petite mise à jour pour publier quelques propositions de modélisation d'une mascotte pour un projet de tri des déchets dans la Communauté de Commune de la Région de Guebwiller. La proposition retenue est la planisphère. ( 1eme trimestre 2010 )
30juin 2011
Créer des coins arrondis en CSS (border-radius)
13:53 - Par Popov Orlov - CSS - aucun commentaire
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.
Voila un petit exemple tout simple, le calque (div) ci-dessous à ces coins arrondis de 15px.
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 :
Quelques illustrations pour mieux comprendre :
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 :
Et le résultat :
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 : border-top-left-radius: 10px 30px;
border-bottom-right-radius: 10% 5%;
border-bottom-left-radius: 0px;
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; }
#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;
}
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
|
04mar 2010
De retour... avec Iziasys
22:25 - Par Popov Orlov - 2D - aucun commentaire
Et voila aprés pas mal de temps sans poster de nouvelles créations, j'en publie quelques une. D'autres à suivre dans les prochains jours.
29mai 2009
Egen en voiture
17:05 - Par Popov Orlov - Dessins - aucun commentaire
Petite mise en situation de Egen pour un client. ( 2eme trimestre 2009 )
28mar 2009
Un Ange passe...
19:31 - Par Popov Orlov - Dessins - un commentaire
Dans ce chaos un ange s'est penché sur moi un bref instant, puis il s'est envolé. Merci ( 1eme trimestre 2009 )
11jan 2009
Le retour des cubes
20:20 - Par Popov Orlov - 3D - un commentaire
Une autre réalisation cubique .( 1eme trimestre 2009 )
29dec 2008
Joyeuses fêtes
21:08 - Par Popov Orlov - 2D - aucun commentaire
Je tiens à vous souhaiter à tous de bonnes fêtes de fin d'année.( 4eme trimestre 2008 )
20dec 2008
Des carrés de lumiére
14:30 - Par Popov Orlov - 3D - aucun commentaire
Voila une petite conception 3D avec des cubes.( 4eme trimestre 2008 )
06dec 2008
Un peu d'abstrait
20:37 - Par Popov Orlov - 3D - aucun commentaire
Une réalisation en 3D, ça sort tout droit de mon esprit; et j'en ai profité pour faire des tests de lumières.( 4eme trimestre 2008 )
30nov 2008
Georges et un ami
19:12 - Par Popov Orlov - Dessins - aucun commentaire
Une mise en scène de Georges et son copain dans un contexte à prendre au second degrés. ( 4eme trimestre 2008 )
20nov 2008
4 saisons
21:35 - Par Popov Orlov - 3D - un commentaire
Réalisation 3D pour une composition de fin d'année. Mise en scène effectuée par Isabelle Schoepfer. ( 4eme trimestre 2008 )
19nov 2008
Les moutons... et Georges
14:15 - Par Popov Orlov - Dessins - aucun commentaire
Des moutons. Pour le moment rien de prévu de concret, ils vont surement apparaitre dans des histoires avec les dragonéléphants. Le premier bleu à déjà été adopté, il se prénomme Georges. ( 4eme trimestre 2008 )
26aoû 2008
Une base pour les Trihédron T-RK7
08:55 - Par Popov Orlov - W.I.P - aucun commentaire
Les débuts d'une structure pour accueillir les Trihédron T-RK7. La tour de contrôle n'est pas bien à mon gout, ça va être corrigé.( 3eme trimestre 2008 )
« billets précédents - page 1 de 2