« Fichier:RedHunterVraks.jpg » et « Modèle:Portrait Hexa » : différence entre les pages
De Omnis Bibliotheca
(Différence entre les pages)
({{copyright}}) |
mAucun résumé des modifications |
||
Ligne 1 : | Ligne 1 : | ||
{{ | <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
Fonctionnalité
Permet d'afficher une image dans un style futuriste et un cadre hexadecimal.
Exemples
Code : | Rendu : |
{{Portrait Hexa |image=Mathias portrait.jpg }} |
|
Code : | Rendu : |
{{Portrait Hexa |image=Mathias portrait.jpg |dimension=100 |taille_image=100px }} |
|
Code : | Rendu : |
{{Portrait Hexa |image=Mathias portrait.jpg |name=Mathias }} |
Mathias
|
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
|
Historique du fichier
Cliquer sur une date et heure pour voir le fichier tel qu'il était à ce moment-là.
Date et heure | Vignette | Dimensions | Utilisateur | Commentaire | |
---|---|---|---|---|---|
actuel | 29 mai 2023 à 21:51 | 600 × 749 (156 kio) | Maintenance script (discussion | contributions) | == Description == Importing file |
Vous ne pouvez pas remplacer ce fichier.
Utilisation du fichier
La page suivante utilise ce fichier :