« Fichier:RedHunterVraks.jpg » et « Modèle:Portrait Hexa » : différence entre les pages

De Omnis Bibliotheca
(Différence entre les pages)
Aller à :navigation, rechercher
({{copyright}})
 
mAucun résumé des modifications
 
Ligne 1 : Ligne 1 :
{{copyright}}
<includeonly><div style="display: table; position: relative;">
<div style="
display: table;
position: relative;
">{{{include|}}}{{#if: {{{name|}}}
|<div style="position: absolute;
top: 50%;
left: 50%;
z-index: 20;
transform: translateX(-50%) translateY(-50%) rotate(210deg) translateY(calc(50% - {{#expr: {{{dimension|140}}} * 0.455}}px));
display: flex;
justify-content: center;
align-items: center;
font-weight: normal;
letter-spacing: 2px;
box-sizing: border-box;
text-transform: uppercase;
font-size: 10px;
font-family: sans-serif;
font-style: normal;
text-shadow: 0 0 5px #000, 0 0 10px #4f2714, 0 0 10px #000, 2px 2px 5px black, 1px 1px 10px black, 1px 1px 5px black;
color: #ffffff4a;
width: 120px;">
<div style="height: 30px;z-index: 20;width: 100%;background: linear-gradient(90deg, #717978, #414444, #575b5b, #232625, #414444, #717978);box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, inset 2px 4px 20px black;display: flex;justify-content: center;align-items: center;clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 16px 100%);padding: 0 1.5em 0 1em;font-weight: normal;letter-spacing: 2px;box-sizing: border-box;text-transform: uppercase;font-size: 10px;font-family: sans-serif;font-style: normal;text-shadow: 0 0 5px #000, 0 0 10px #4f2714, 0 0 10px #000, 2px 2px 5px black, 1px 1px 10px black, 1px 1px 5px black;color: #ffffff4a;">
<div style="transform: rotate(180deg); white-space: nowrap; {{{name_style|}}}">{{{name|}}}</div>
</div>{{#if: {{{title|}}}
|<div style="position: absolute;
top: 0;
right: 0;
z-index: 10;
transform: rotate(180deg) translateY(17px) translateX(15px);
border-radius: 5px;text-shadow: 0 0 5px black, 0 0 15px black;
text-transform: none;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
width: calc(100% - 6px);
box-sizing: border-box;text-align: center;
background: linear-gradient(135deg, #71797848 0, #41444448 25%, #575b5b48 40%, #23262548 55%, #3c424048 75%, #1f232248 85%) #000;
box-shadow: inset 1px 1px #ffffff1f, inset -1px -1px #ffffff10, inset 2px 2px 1px #ffffff1f, inset 0 0 10px #000, 0 4px 10px black;
white-space: nowrap;
{{{title_style|}}}">{{{title}}}</div>}}
</div>}}
<div style="pointer-events: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
overflow: hidden;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);">
<div style="position: absolute;
top: 50%;
left: 50%;
height: {{#expr: {{{dimension|140}}} / 15}}px;z-index: 10;
width: {{#expr: 4 + {{{dimension|140}}} / 2 round 2}}px;
clip-path: polygon( 0 0, 100% 0, 82% 300%, 18% 300%);
background: {{{border_bg|radial-gradient({{{border_color|#222222}}}ba, #0000), linear-gradient(to right, {{{border_color|#444}}}, #ffffff75) {{{border_color|#444}}}}}};
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black;
transform: translateX(-50%) translateY(-50%) rotate(30deg) translateY(calc(50% - {{#expr: {{{dimension|140}}} * 0.455}}px));
"><div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient({{{border_color|#ffffff}}}40, transparent) #ffffff20;"></div></div>
<div style="position: absolute;
top: 50%;
left: 50%;
height: {{#expr: {{{dimension|140}}} / 15}}px;z-index: 10;
width: {{#expr: 4 + {{{dimension|140}}} / 2 round 2}}px;
clip-path: polygon( 0 0, 100% 0, 82% 300%, 18% 300%);
background: {{{border_bg|radial-gradient({{{border_color|#222222}}}ba, #0000), linear-gradient(to right, {{{border_color|#444}}}, #00000075) {{{border_color|#000}}}}}};
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black;
transform: translateX(-50%) translateY(-50%) rotate(90deg) translateY(calc(50% - {{#expr: {{{dimension|140}}} * 0.455}}px));
"><div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient({{{light_shade_color|#000000}}}40, transparent) #00000020;"></div></div>
<div style="position: absolute;
top: 50%;
left: 50%;
height: {{#expr: {{{dimension|140}}} / 15}}px;z-index: 10;
width: {{#expr: 4 + {{{dimension|140}}} / 2 round 2}}px;
clip-path: polygon( 0 0, 100% 0, 82% 300%, 18% 300%);
background: {{{border_bg|radial-gradient({{{border_color|#222222}}}ba, #0000), linear-gradient(to right, {{{border_color|#444}}}, #00000075) {{{light_shade_color|#000}}}}}};
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black;
transform: translateX(-50%) translateY(-50%) rotate(150deg) translateY(calc(50% - {{#expr: {{{dimension|140}}} * 0.455}}px));
"><div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient({{{light_shade_color|#000000}}}90, transparent) #00000040;"></div></div>
<div style="position: absolute;
top: 50%;
left: 50%;
height: {{#expr: {{{dimension|140}}} / 15}}px;z-index: 10;
width: {{#expr: 4 + {{{dimension|140}}} / 2 round 2}}px;
clip-path: polygon( 0 0, 100% 0, 82% 300%, 18% 300%);
background: {{{border_bg|radial-gradient({{{border_color|#222222}}}ba, #0000), linear-gradient(to right, {{{border_color|#444}}}, #00000075) {{{light_shade_color|#000}}}}}};
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black;
transform: translateX(-50%) translateY(-50%) rotate(210deg) translateY(calc(50% - {{#expr: {{{dimension|140}}} * 0.455}}px));
"><div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient({{{light_shade_color|#000000}}}40, transparent) #00000020;"></div></div>
<div style="position: absolute;
top: 50%;
left: 50%;
height: {{#expr: {{{dimension|140}}} / 15}}px;z-index: 10;
width: {{#expr: 4 + {{{dimension|140}}} / 2 round 2}}px;
clip-path: polygon( 0 0, 100% 0, 82% 300%, 18% 300%);
background: {{{border_bg|radial-gradient({{{border_color|#222222}}}ba, #0000), linear-gradient(to right, {{{border_color|#444}}}, #ffffff75) {{{border_color|#444}}}}}};
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black;
transform: translateX(-50%) translateY(-50%) rotate(270deg) translateY(calc(50% - {{#expr: {{{dimension|140}}} * 0.455}}px));
"><div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient({{{border_color|#ffffff}}}40, transparent) #ffffff20;"></div></div>
<div style="position: absolute;
top: 50%;
left: 50%;
height: {{#expr: {{{dimension|140}}} / 15}}px;z-index: 10;
width: {{#expr: 4 + {{{dimension|140}}} / 2 round 2}}px;
clip-path: polygon( 0 0, 100% 0, 82% 300%, 18% 300%);
background: {{{border_bg|radial-gradient({{{border_color|#222222}}}ba, #0000), linear-gradient(to right, {{{border_color|#444}}}, #ffffff75) {{{border_color|#444}}}}}};
box-shadow: inset 1px 1px #ffffff1f, inset 0 0 0 1px #272727, 0 4px 10px black;
transform: translateX(-50%) translateY(-50%) rotate(330deg) translateY(calc(50% - {{#expr: {{{dimension|140}}} * 0.455}}px));
"><div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient({{{border_color|#ffffff}}}90, transparent) #ffffff40;"></div></div>
</div>
<div style="position: relative;
width: 100%;
height: 100%;
z-index: 5;
overflow: hidden;
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);">
{{Portrait SciFi
|image={{{image|}}}
|taille_image={{{taille_image|}}}
|link={{{link|}}}
|hauteur={{{dimension|140}}}px
|largeur={{#expr: {{{dimension|140}}} * 0.87}}px
|decalage_image_vertical={{{decalage_image_vertical|}}}
|decalage_image_horizontal={{{decalage_image_horizontal|}}}
}}</div></div></div></includeonly><noinclude>
{{Page OB}}
 
{{travaux}}
 
==Fonctionnalité==
 
Permet d'afficher une image dans un style futuriste et un cadre hexadecimal.
 
== Exemples ==
 
{| style="width: 100%;"
|- style="font-weight: bold;"
| Code :
| Rendu :
|- style="vertical-align: top; width: 100%;"
| style="background: #262626;padding: 20px;box-shadow: inset 0 0 40px 0px black; width: 400px;" |
 
<pre>{{Portrait Hexa
|image=Mathias portrait.jpg
}}</pre>
 
| style="width: calc(100% - 400px); padding-left: 2em;" |
 
{{Portrait Hexa
|image=Mathias portrait.jpg
}}
 
|}
 
 
-------------
 
 
{| style="width: 100%;"
|- style="font-weight: bold;"
| Code :
| Rendu :
|- style="vertical-align: top; width: 100%;"
| style="background: #262626;padding: 20px;box-shadow: inset 0 0 40px 0px black; width: 400px;" |
 
<pre>{{Portrait Hexa
|image=Mathias portrait.jpg
|dimension=100
|taille_image=100px
}}</pre>
 
| style="width: calc(100% - 400px); padding-left: 2em;" |
 
{{Portrait Hexa
|image=Mathias portrait.jpg
|dimension=100
|taille_image=100px
}}
 
|}
 
 
-------------
 
 
{| style="width: 100%;"
|- style="font-weight: bold;"
| Code :
| Rendu :
|- style="vertical-align: top; width: 100%;"
| style="background: #262626;padding: 20px;box-shadow: inset 0 0 40px 0px black; width: 400px;" |
 
<pre>{{Portrait Hexa
|image=Mathias portrait.jpg
|name=Mathias
}}</pre>
 
| style="width: calc(100% - 400px); padding-left: 2em;" |
 
{{Portrait Hexa
|image=Mathias portrait.jpg
|name=Mathias
}}
 
|}
 
 
-------------
 
 
{| style="width: 100%;"
|- style="font-weight: bold;"
| Code :
| Rendu :
|- style="vertical-align: top; width: 100%;"
| style="background: #262626;padding: 20px;box-shadow: inset 0 0 40px 0px black; width: 400px;" |
 
<pre>{{Portrait Hexa
|dimension=180
|image=Mathias portrait.jpg
|name=Mathias
|title=Capitaine
|link=[[Mathias]]
|border_color=#151024
}}</pre>
 
| style="width: calc(100% - 400px); padding-left: 2em;" |
 
{{Portrait Hexa
|dimension=180
|image=Mathias portrait.jpg
|name=Mathias
|title=Capitaine
|border_color=#151024
|link=[[Mathias]]
}}
 
|}
 
 
-------------
 
 
{| style="width: 100%;"
|- style="font-weight: bold;"
| Code :
| Rendu :
|- style="vertical-align: top; width: 100%;"
| style="background: #262626;padding: 20px;box-shadow: inset 0 0 40px 0px black; width: 400px;" |
 
<pre>{{Portrait Hexa
|image=Mathias portrait.jpg
|name=Mathias
|border_bg=radial-gradient(#ffffff21, transparent, #00000026), linear-gradient(#151024, #442121 20%, #442121 80%, #0b0707)
|dimension=100
|taille_image=100px
|name_style=font-size: smaller;
}}</pre>
 
| style="width: calc(100% - 400px); padding-left: 2em;" |
 
{{Portrait Hexa
|image=Mathias portrait.jpg
|name=Mathias
|border_bg=radial-gradient(#ffffff21, transparent, #00000026), linear-gradient(#151024, #442121 20%, #442121 80%, #0b0707)
|dimension=100
|taille_image=100px
|name_style=font-size: smaller;
}}
 
|}
 
 
 
[[Catégorie:Modèles de mise en page|global]]
</noinclude>

Version actuelle datée du 29 juillet 2021 à 01:34


Aquila.png
+++ Travaux en cours... +++
{{{taille_image}}}
Tout est sous contrôle, nos équipes de Technoprêtres se chargent de la mise en place de cet article.
- Technoprêtre Moulinex.


Fonctionnalité

Permet d'afficher une image dans un style futuriste et un cadre hexadecimal.

Exemples

Code : Rendu :
{{Portrait Hexa
|image=Mathias portrait.jpg
}}
Mathias portrait.jpg




Code : Rendu :
{{Portrait Hexa
|image=Mathias portrait.jpg
|dimension=100
|taille_image=100px
}}
Mathias portrait.jpg




Code : Rendu :
{{Portrait Hexa
|image=Mathias portrait.jpg
|name=Mathias
}}
Mathias
Mathias portrait.jpg




Code : Rendu :
{{Portrait Hexa
|dimension=180
|image=Mathias portrait.jpg
|name=Mathias
|title=Capitaine
|link=[[Mathias]]
|border_color=#151024
}}
Mathias
Capitaine




Code : Rendu :
{{Portrait Hexa
|image=Mathias portrait.jpg
|name=Mathias
|border_bg=radial-gradient(#ffffff21, transparent, #00000026), linear-gradient(#151024, #442121 20%, #442121 80%, #0b0707)
|dimension=100
|taille_image=100px
|name_style=font-size: smaller;
}}
Mathias
Mathias portrait.jpg

Historique du fichier

Cliquer sur une date et heure pour voir le fichier tel qu'il était à ce moment-là.

Date et heureVignetteDimensionsUtilisateurCommentaire
actuel29 mai 2023 à 21:51Vignette pour la version du 29 mai 2023 à 21:51600 × 749 (156 kio)Maintenance script (discussion | contributions)== Description == Importing file

La page suivante utilise ce fichier :

Métadonnées