|
Balise : Téléversement via le serveur |
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>
| |