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

23sep 2014

Nouveau batiment

Modélisation d'une ferme amélioré pour un projet WebGL. ( 3eme trimestre 2014)

Fam_3D_level2

02nov 2013

La fille aux ballons

Dans le même univers que le logger, mais avec des détails plus fin. Hélas pour le moment aucunes textures. ( 3eme trimestre 2013)

house_tree_3D

25aoû 2013

Cubic Lumber

Voici une composition qui date de fin de l'année dernière. Actuellement je suis sur une nouvelle idée j'en profite pour publié celle-ci. ( 3eme trimestre 2012)

Lamber_cube Lamber_factory

05juin 2012

Des batiments en low poly

Quelques bâtiments en low poly pour la constitution d'un nouvel univers de modélisation. ( 2eme trimestre 2012)

barracks_empier_allies_3d barracks_empier_allies_3d_text Farm_3D_empire_allies Farm_3D_empire_allies_text LamberMill_3D_emipre_allies_1 LamberMill_3D_emipre_allies_2

19mar 2012

Une flotte remonte le fleuve

Ayant un projet d'une ambiante en low poly voici quelques essais de modélisation ( 1er trimestre 2012)
Empire_&_Allies_Avion_3D Empire_&_Allies_Cuirasse_3D Empire_&_Allies_Porte_avion_3D Empire_&_Allies_Sous_marin_3D Empire_&_Allies_Sous_marin_Avion_Cuirasse_Porte_Sous_marin_3D Empire_&_Allies_Sous_marin_Avion_Cuirasse_Porte_Sous_marin_3D_2

16mar 2012

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;
}

22sep 2011

Campagne économie d'énergie CALEO

Les dernières affiche pour Caleo, où Egen combat les énergies trop gourmande. Toujours en collaboration avec Isabelle Schoepfer. ( 3eme trimestre 2011 )

Caleo_economie_bois Caleo_economie_electricite Caleo_economie_fuel

01sep 2011

Campagne prévention 3D

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 )

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)

29aoû 2011

Expo Modélisaction 3D

Popov_Greeble_Sphere_3D_Modelisetion.png Popov_Greeble_Scenes_3D_Modelisetion Popov_Greeble_Porte_3D_Modelisetion Popov_Greeble_Piscine_3D_Modelisetion Popov_Greeble_Phare_3D_Modelisetion Popov_Greeble_Interieur_3D_Modelisetion Popov_Greeble_Goute_3D_Modelisetion Popov_Greeble_Escalier_3D_Modelisetion Popov_Greeble_Cube_3D_Modelisetion Popov_Greeble_Crypte_3D_Modelisetion

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 )

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.

24aoû 2011

Mascotte CCRG

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)

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

04mar 2010

De retour... avec Iziasys

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. IZC1280.png IZCWD1280.png IZI4.png

29mai 2009

Egen en voiture

voitface.png voitdos.png
Petite mise en situation de Egen pour un client. ( 2eme trimestre 2009 )

28mar 2009

Un Ange passe...

Angefinal.jpg
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

animeauxcube.png fruitscube.png
Une autre réalisation cubique .( 1eme trimestre 2009 )

29dec 2008

Joyeuses fêtes

Voeux.png
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

popovcubetest2.png
Voila une petite conception 3D avec des cubes.( 4eme trimestre 2008 )

06dec 2008

Un peu d'abstrait

testjaune4.png
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 )

- page 1 de 2