User:Max34/Sandbox: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
mNo edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
__NOTOC__<includeonly><onlyinclude><code style="padding:0">
* <nowiki>{{{1}}}</nowiki> → {{{1}}}
* <nowiki>{{{1|}}}</nowiki> → {{{1|}}}
* <nowiki>{{{1|test}}}</nowiki> → {{{1|test}}}
* <nowiki>{{#if:{{{1}}}|true|false}}</nowiki> → {{#if:{{{1}}}|true|false}}
* <nowiki>{{#if:{{{1|}}}|true|false}}</nowiki> → {{#if:{{{1|}}}|true|false}}
* <nowiki>{{#ifeq:{{{1|}}}||true|false}}</nowiki> → {{#ifeq:{{{1|}}}||true|false}}
* <nowiki>{{#ifeq:{{{1|}}}|{{{1}}}|true|false}}</nowiki> → {{#ifeq:{{{1|}}}|{{{1}}}|true|false}}
</code></onlyinclude></includeonly>
== An interesting optimization method that works ==
This {{Code|<nowiki>{{Text-dir|ltr=righ|rtl=lef}}t:0;</nowiki>}} is a little bit more optimized than this {{Code|<nowiki>{{Text-dir|ltr=right|rtl=left}}:0;</nowiki>}}
== ''Windows'' Windows ==
<div class="window" style="width:fit-content; -webkit-font-smoothing:none; font-family:MS Sans Serif,Arial; font-size:11px; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; padding:3px">
<div class="title-bar" style="align-items:center; background:linear-gradient(90deg,navy,#1084d0); display:flex; justify-content:space-between; padding:3px 2px 3px 3px">
<div class="title-bar-text" style="color:#FFF; font-weight:550; letter-spacing:0; margin-right:24px">My First Windows 98 Program</div>
<div class="title-bar-controls" style="display:flex">
<div aria-label="Minimize" style="border:none; border-radius:0; box-sizing:border-box; color:transparent; text-shadow:0 0 #222; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; display:block; min-height:14px; min-width:16px; padding:0;"></div>
<div aria-label="Maximize" style="border:none; border-radius:0; box-sizing:border-box; color:transparent; text-shadow:0 0 #222; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; display:block; min-height:14px; min-width:16px; padding:0;"></div>
<div aria-label="Close" style="border:none; border-radius:0; box-sizing:border-box; color:transparent; text-shadow:0 0 #222; background:silver; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; display:block; min-height:14px; min-width:16px; padding:0; margin-left:2px;"></div>
</div>
</div>
<div class="window-body" style="margin:8px; color:#000">This is my Windows 98!</div>
</div>
<div class="window" style="width:fit-content; background-color:#E8E8D8; box-shadow:inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee, inset -3px -3px #003bda, inset 3px 3px #0855dd; border-top-left-radius:8px; border-top-right-radius:8px; padding:0 0 3px; -webkit-font-smoothing:antialiased">
<div class="title-bar" style="display:flex; justify-content:space-between; align-items:center; font-family:Trebuchet MS; background:linear-gradient(180deg,#0997ff,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7); padding:3px 5px 3px 3px; border-top:1px solid #0831d9; border-left:1px solid #0831d9; border-right:1px solid #001ea0; border-top-left-radius:8px; border-top-right-radius:7px; font-size:13px; text-shadow:1px 1px #0f1089; height:21px">
<div class="title-bar-text" style="white-space:nowrap; padding-left:3px; font-weight:700; color:#FFF; letter-spacing:0; margin-right:24px">My First Windows XP Program</div>
<div class="title-bar-controls" style="display:flex"><!--Buttons should be here--></div>
</div>
<div class="window-body" style="margin:8px; color:#000">This is my Windows XP!</div>
</div>
<div class="window active" style="color:#000; width:fit-content; border:1px solid rgba(0,0,0,.7); border-radius:6px; box-shadow:2px 2px 10px 1px rgb(0 0 0 / 70%); font:9pt Segoe UI,sans-serif; position:relative; z-index:0"><div style="background:linear-gradient(transparent 20%,hsla(0,0%,100%,.7) 40%,transparent 41%),linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4; border-radius:6px; height:100%; position:absolute; width:100%; z-index:-1"></div>
<div class="title-bar" style="gap:6px; align-items:center; background:linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4; border-radius:6px 6px 0 0; display:flex; font:9pt Segoe UI,sans-serif; justify-content:space-between; padding:6px; box-shadow:inset 0 0.5px #FFF;">
<div class="title-bar-text" style="white-space:nowrap; color:#000; letter-spacing:0; line-height:15px; text-shadow:0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF">My First Windows 7 Program</div>
<div class="title-bar-controls" style="background:hsla(0,0%,100%,.2); border:1px solid rgba(0,0,0,.3); border-radius:0 0 5px 5px; border-top:0; box-shadow:0 0 2px #fff; display:flex; margin-top:-6px">
<div aria-label="Minimize" style="border:0; border-radius:0; border-right: 1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; border-bottom-left-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Maximize" style="border:0; border-radius:0; border-right:1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Close" style="border-radius:0; box-sizing:border-box; min-height:19px; padding:0; position:relative; min-width: 48px; border:0; border-bottom-right-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); background-color:#d04834; box-shadow: inset 0 0 0 1px #eee8;"></div>
</div>
</div>
<div class="window-body has-space" style="background:#f0f0f0; border:1px solid rgba(0,0,0,.7); box-shadow:0 0 1px 0.5px #fff; margin:0 6px 6px; padding:6px">This is my Windows 7!</div>
</div>
<div class="window active" style="color:#000; width:fit-content; border:1px solid rgba(0,0,0,.7); border-radius:6px; box-shadow:2px 2px 10px 1px rgb(0 0 0 / 70%); font:9pt Segoe UI,sans-serif; position:relative; z-index:0"><div style="background:linear-gradient(transparent 20%,hsla(0,0%,100%,.7) 40%,transparent 41%),linear-gradient(90deg,hsla(0,0%,100%,.4),rgba(0,0,0,.1),hsla(0,0%,100%,.2)),linear-gradient(55deg,transparent,rgba(0,0,0,.1) 20%,rgba(0,0,0,.1) 50%,transparent 53%),#4580c4; border-radius:6px; height:100%; position:absolute; width:100%; z-index:-1; opacity:.75;"></div>
<div class="title-bar" style="gap:6px; align-items:center; background: linear-gradient(55deg,transparent 8%,hsla(0,0%,100%,.1) 10%,hsla(0,0%,100%,.3) 30%,rgba(0,0,0,.1) 32%,rgba(0,0,0,.3) 55%,transparent 57%,hsla(0,0%,100%,.3) 70%,transparent 72%); border-radius:6px 6px 0 0; display:flex; font:9pt Segoe UI,sans-serif; justify-content:space-between; padding:6px; box-shadow:inset 0 0.5px #FFF;">
<div class="title-bar-text" style="white-space:nowrap; color:#000; letter-spacing:0; line-height:15px; text-shadow:0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF, 0 0 8px #FFF">My First Windows 7 Aero Program</div>
<div class="title-bar-controls" style="background:hsla(0,0%,100%,.2); border:1px solid rgba(0,0,0,.3); border-radius:0 0 5px 5px; border-top:0; box-shadow:0 0 2px #fff; display:flex; margin-top:-6px">
<div aria-label="Minimize" style="border:0; border-radius:0; border-right: 1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; border-bottom-left-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Maximize" style="border:0; border-radius:0; border-right:1px solid rgba(0,0,0,.3); box-sizing:border-box; min-height:19px; min-width:29px; padding:0; position:relative; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); box-shadow:inset 0 0 0 1px #eee8"></div>
<div aria-label="Close" style="border-radius:0; box-sizing:border-box; min-height:19px; padding:0; position:relative; min-width: 48px; border:0; border-bottom-right-radius:5px; background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.3) 45%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,hsla(0,0%,100%,.5)); border-color:rgba(0,0,0,.7); background-color:#d04834; box-shadow: inset 0 0 0 1px #eee8;"></div>
</div>
</div>
<div class="window-body has-space" style="background:#f0f0f0; border:1px solid rgba(0,0,0,.7); box-shadow:0 0 1px 0.5px #fff; margin:0 6px 6px; padding:6px">This<br>is<br>my<br>Windows<br>7<br>Aero<br>!</div>
</div>
== SVG imitation ==
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(-45deg);"></div><br>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(-45deg);"></div><br>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(45deg);"></div><br>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(45deg);"></div><br>
Line 4: Line 82:
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(135deg);"></div>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(135deg);"></div>


<div id="ThisDivWillBeUsedByExternalForces" style="color:green">Hi, i’m Test!</div>


<div id="AnotherOne-en">Text Size:</div>
<div style="display:flex; flex-direction:column; align-items:center; width:min-content">
<div style="width:8px; height:6px; border:3px solid #818181; border-bottom:0; border-radius:10px 10px 0 0"></div>
<div style="background:#FFCD30; width:16px; height:12px; border-radius:0 0 2px 2px"></div>
</div>
 
 
 
 
 
 
 
<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;">Всякий текст ё-маё</span>
</div>


<div id="AnotherOne-ru">Размер текста:</div>
<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;">Всякий текст ё-маё</span>
</div>


<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;">Всякий текст ё-маё</span>
</div>


<div style="display:flex; flex-direction:column; align-items:center; width:min-content">
<div style=text-align:center;background:lightgrey>
<div style="width:8px; height:6px; border:3px solid #818181; border-bottom:0; border-radius:10px 10px 0 0"></div>
<span style="text-shadow:1px 0 1px #0000008F, 0 1px 1px #0000008F, -1px 0 1px #0000008F, 0 -1px 1px #0000008F, 1px 1px 1px #0000008F, -1px 1px 1px #0000008F, 1px -1px 1px #0000008F, -1px -1px 1px #0000008F;">Всякий текст ё-маё</span>
<div style="background:#FFCD30; width:16px; height:12px; border-radius:0 0 2px 2px"></div>
</div>
</div>


<span style="background:rgb(255, 255, 255)">Test</span>
<div style=text-align:center;background:lightgrey>
<span style="text-shadow:1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;">Всякий текст ё-маё</span>
</div>


<span style="background:#FFF">Test</span>
<div style=text-align:center;background:lightgrey>
<span style="-webkit-text-stroke:1px #000">Всякий текст ё-маё</span>
</div>


<span style="background:rgb(255, 255, 255, 50%)">Test</span>


<span style="background:#FFFFFF80">Test</span>


{{{1}}}


{{#time: i:s|now}}
{{#time: i:s|now}}
<div id="ThisDivWillBeUsedByExternalForces" style="color:green">Hi, i’m Test!</div>
<div id="AnotherOne-en">Text Size:</div>
<div id="AnotherOne-ru">Размер текста:</div>




Translation Progress (Russian): {{#expr: (({{PAGESINCATEGORY:Tp-ru full}} + ({{PAGESINCATEGORY:Tp-ru high}} * 80 + {{PAGESINCATEGORY:Tp-ru average}} * 50 + {{PAGESINCATEGORY:Tp-ru low}} * 20) / 100) * 100) / ({{PAGESINCATEGORY:Tp-ru full}} + {{PAGESINCATEGORY:Tp-ru high}} + {{PAGESINCATEGORY:Tp-ru average}} + {{PAGESINCATEGORY:Tp-ru low}} + {{PAGESINCATEGORY:Tp-ru zero}}) }}%
Translation Progress (Russian): {{#expr: (({{PAGESINCATEGORY:Tp-ru full}} + ({{PAGESINCATEGORY:Tp-ru high}} * 80 + {{PAGESINCATEGORY:Tp-ru average}} * 50 + {{PAGESINCATEGORY:Tp-ru low}} * 20) / 100) * 100) / ({{PAGESINCATEGORY:Tp-ru full}} + {{PAGESINCATEGORY:Tp-ru high}} + {{PAGESINCATEGORY:Tp-ru average}} + {{PAGESINCATEGORY:Tp-ru low}} + {{PAGESINCATEGORY:Tp-ru zero}}) }}%


== How to work with params ==


==== No Param 1 ({{T||Template}}) ====
{{:{{FULLPAGENAME}}}}


==== Empty Param 1 ({{T||Template{{P}}}}) ====
{{:{{FULLPAGENAME}}|}}


==== Param 1 with text ({{T||Template{{P|Some text}}}}) ====
{{:{{FULLPAGENAME}}|Some text}}


== Named Colors ==
== Named Colors ==
<span style="color:IndianRed">Test</span>
<span style="color:IndianRed"></span>
<span style="color:LightCoral">Test</span>
<span style="color:LightCoral"></span>
<span style="color:Salmon">Test</span>
<span style="color:Salmon"></span>
<span style="color:DarkSalmon">Test</span>
<span style="color:DarkSalmon"></span>
<span style="color:LightSalmon">Test</span>
<span style="color:LightSalmon"></span>
<span style="color:Crimson">Test</span>
<span style="color:Crimson"></span>
<span style="color:Red">Test</span>
<span style="color:Red"></span>
<span style="color:FireBrick">Test</span>
<span style="color:FireBrick"></span>
<span style="color:DarkRed">Test</span>
<span style="color:DarkRed">█</span>
 
<span style="color:Pink">█</span>
<span style="color:LightPink">█</span>
<span style="color:HotPink">█</span>
<span style="color:DeepPink">█</span>
<span style="color:MediumVioletRed">█</span>
<span style="color:PaleVioletRed">█</span>
 
<span style="color:LightSalmon">█</span>
<span style="color:Coral">█</span>
<span style="color:Tomato">█</span>
<span style="color:OrangeRed">█</span>
<span style="color:DarkOrange">█</span>
<span style="color:Orange">█</span>
 
<span style="color:Gold">█</span>
<span style="color:Yellow">█</span>
<span style="color:LightYellow">█</span>
<span style="color:LemonChiffon">█</span>
<span style="color:LightGoldenrodYellow">█</span>
<span style="color:PapayaWhip">█</span>
<span style="color:Moccasin">█</span>
<span style="color:PeachPuff">█</span>
<span style="color:PaleGoldenrod">█</span>
<span style="color:Khaki">█</span>
<span style="color:DarkKhaki">█</span>
 
<span style="color:Lavender">█</span>
<span style="color:Thistle">█</span>
<span style="color:Plum">█</span>
<span style="color:Violet">█</span>
<span style="color:Orchid">█</span>
<span style="color:Fuchsia">█</span>
<span style="color:Magenta">█</span>
<span style="color:MediumOrchid">█</span>
<span style="color:MediumPurple">█</span>
<span style="color:RebeccaPurple">█</span>
<span style="color:BlueViolet">█</span>
<span style="color:DarkViolet">█</span>
<span style="color:DarkOrchid">█</span>
<span style="color:DarkMagenta">█</span>
<span style="color:Purple">█</span>
<span style="color:Indigo">█</span>
<span style="color:SlateBlue">█</span>
<span style="color:DarkSlateBlue">█</span>
<span style="color:MediumSlateBlue">█</span>
 
<span style="color:GreenYellow">█</span>
<span style="color:Chartreuse">█</span>
<span style="color:LawnGreen">█</span>
<span style="color:Lime">█</span>
<span style="color:LimeGreen">█</span>
<span style="color:PaleGreen">█</span>
<span style="color:LightGreen">█</span>
<span style="color:MediumSpringGreen">█</span>
<span style="color:SpringGreen">█</span>
<span style="color:MediumSeaGreen">█</span>
<span style="color:SeaGreen">█</span>
<span style="color:ForestGreen">█</span>
<span style="color:Green">█</span>
<span style="color:DarkGreen">█</span>
<span style="color:YellowGreen">█</span>
<span style="color:OliveDrab">█</span>
<span style="color:Olive">█</span>
<span style="color:DarkOliveGreen">█</span>
<span style="color:MediumAquamarine">█</span>
<span style="color:DarkSeaGreen">█</span>
<span style="color:LightSeaGreen">█</span>
<span style="color:DarkCyan">█</span>
<span style="color:Teal">█</span>
 
<span style="color:Aqua">█</span>
<span style="color:Cyan">█</span>
<span style="color:LightCyan">█</span>
<span style="color:PaleTurquoise">█</span>
<span style="color:Aquamarine">█</span>
<span style="color:Turquoise">█</span>
<span style="color:MediumTurquoise">█</span>
<span style="color:DarkTurquoise">█</span>
<span style="color:CadetBlue">█</span>
<span style="color:SteelBlue">█</span>
<span style="color:LightSteelBlue">█</span>
<span style="color:PowderBlue">█</span>
<span style="color:LightBlue">█</span>
<span style="color:SkyBlue">█</span>
<span style="color:LightSkyBlue">█</span>
<span style="color:DeepSkyBlue">█</span>
<span style="color:DodgerBlue">█</span>
<span style="color:CornflowerBlue">█</span>
<span style="color:MediumSlateBlue">█</span>
<span style="color:RoyalBlue">█</span>
<span style="color:Blue">█</span>
<span style="color:MediumBlue">█</span>
<span style="color:DarkBlue">█</span>
<span style="color:Navy">█</span>
<span style="color:MidnightBlue">█</span>
 
<span style="color:Cornsilk">█</span>
<span style="color:BlanchedAlmond">█</span>
<span style="color:Bisque">█</span>
<span style="color:NavajoWhite">█</span>
<span style="color:Wheat">█</span>
<span style="color:BurlyWood">█</span>
<span style="color:Tan">█</span>
<span style="color:RosyBrown">█</span>
<span style="color:SandyBrown">█</span>
<span style="color:Goldenrod">█</span>
<span style="color:DarkGoldenrod">█</span>
<span style="color:Peru">█</span>
<span style="color:Chocolate">█</span>
<span style="color:SaddleBrown">█</span>
<span style="color:Sienna">█</span>
<span style="color:Brown">█</span>
<span style="color:Maroon">█</span>
 
<span style="color:White">█</span>
<span style="color:Snow">█</span>
<span style="color:HoneyDew">█</span>
<span style="color:MintCream">█</span>
<span style="color:Azure">█</span>
<span style="color:AliceBlue">█</span>
<span style="color:GhostWhite">█</span>
<span style="color:WhiteSmoke">█</span>
<span style="color:SeaShell">█</span>
<span style="color:Beige">█</span>
<span style="color:OldLace">█</span>
<span style="color:FloralWhite">█</span>
<span style="color:Ivory">█</span>
<span style="color:AntiqueWhite">█</span>
<span style="color:Linen">█</span>
<span style="color:LavenderBlush">█</span>
<span style="color:MistyRose">█</span>


<span style="color:Pink">Test</span>
<span style="color:Gainsboro"></span>
<span style="color:LightPink">Test</span>
<span style="color:LightGray"></span>
<span style="color:HotPink">Test</span>
<span style="color:Silver"></span>
<span style="color:DeepPink">Test</span>
<span style="color:DarkGray"></span>
<span style="color:MediumVioletRed">Test</span>
<span style="color:Gray"></span>
<span style="color:PaleVioletRed">Test</span>
<span style="color:DimGray">█</span>
<span style="color:LightSlateGray">█</span>
<span style="color:SlateGray">█</span>
<span style="color:DarkSlateGray">█</span>
<span style="color:Black">█</span>


<span style="color:LightSalmon">Test</span>
== For VDCEditor tests ==
<span style="color:Coral">Test</span>
Это самый обычный текст.
<span style="color:Tomato">Test</span>
<span style="color:OrangeRed">Test</span>
<span style="color:DarkOrange">Test</span>
<span style="color:Orange">Test</span>


<span style="color:Gold">Test</span>
<span>Это текст обёрнутый в тег &lt;span&gt;.</span>
<span style="color:Yellow">Test</span>
<span style="color:LightYellow">Test</span>
<span style="color:LemonChiffon">Test</span>
<span style="color:LightGoldenrodYellow">Test</span>
<span style="color:PapayaWhip">Test</span>
<span style="color:Moccasin">Test</span>
<span style="color:PeachPuff">Test</span>
<span style="color:PaleGoldenrod">Test</span>
<span style="color:Khaki">Test</span>
<span style="color:DarkKhaki">Test</span>


<span style="color:Lavender">Test</span>
<span style="font-weight:bold">У этого текста указано CSS свойство font-weight:bold, что делает его жирным.</span>
<span style="color:Thistle">Test</span>
<span style="color:Plum">Test</span>
<span style="color:Violet">Test</span>
<span style="color:Orchid">Test</span>
<span style="color:Fuchsia">Test</span>
<span style="color:Magenta">Test</span>
<span style="color:MediumOrchid">Test</span>
<span style="color:MediumPurple">Test</span>
<span style="color:RebeccaPurple">Test</span>
<span style="color:BlueViolet">Test</span>
<span style="color:DarkViolet">Test</span>
<span style="color:DarkOrchid">Test</span>
<span style="color:DarkMagenta">Test</span>
<span style="color:Purple">Test</span>
<span style="color:Indigo">Test</span>
<span style="color:SlateBlue">Test</span>
<span style="color:DarkSlateBlue">Test</span>
<span style="color:MediumSlateBlue">Test</span>


<span style="color:GreenYellow">Test</span>
<span style="color:green">Тут текст окрашен в зелёный цвет с помощью CSS свойства color:green.</span>
<span style="color:Chartreuse">Test</span>
<span style="color:LawnGreen">Test</span>
<span style="color:Lime">Test</span>
<span style="color:LimeGreen">Test</span>
<span style="color:PaleGreen">Test</span>
<span style="color:LightGreen">Test</span>
<span style="color:MediumSpringGreen">Test</span>
<span style="color:SpringGreen">Test</span>
<span style="color:MediumSeaGreen">Test</span>
<span style="color:SeaGreen">Test</span>
<span style="color:ForestGreen">Test</span>
<span style="color:Green">Test</span>
<span style="color:DarkGreen">Test</span>
<span style="color:YellowGreen">Test</span>
<span style="color:OliveDrab">Test</span>
<span style="color:Olive">Test</span>
<span style="color:DarkOliveGreen">Test</span>
<span style="color:MediumAquamarine">Test</span>
<span style="color:DarkSeaGreen">Test</span>
<span style="color:LightSeaGreen">Test</span>
<span style="color:DarkCyan">Test</span>
<span style="color:Teal">Test</span>


<span style="color:Aqua">Test</span>
<span style="color:#00FF00">В этом тексте <span style="color:#0000FF; font-weight:bold">используется вложенный тег &lt;span&gt;</span> с другим цветом текста</span>
<span style="color:Cyan">Test</span>
<span style="color:LightCyan">Test</span>
<span style="color:PaleTurquoise">Test</span>
<span style="color:Aquamarine">Test</span>
<span style="color:Turquoise">Test</span>
<span style="color:MediumTurquoise">Test</span>
<span style="color:DarkTurquoise">Test</span>
<span style="color:CadetBlue">Test</span>
<span style="color:SteelBlue">Test</span>
<span style="color:LightSteelBlue">Test</span>
<span style="color:PowderBlue">Test</span>
<span style="color:LightBlue">Test</span>
<span style="color:SkyBlue">Test</span>
<span style="color:LightSkyBlue">Test</span>
<span style="color:DeepSkyBlue">Test</span>
<span style="color:DodgerBlue">Test</span>
<span style="color:CornflowerBlue">Test</span>
<span style="color:MediumSlateBlue">Test</span>
<span style="color:RoyalBlue">Test</span>
<span style="color:Blue">Test</span>
<span style="color:MediumBlue">Test</span>
<span style="color:DarkBlue">Test</span>
<span style="color:Navy">Test</span>
<span style="color:MidnightBlue">Test</span>


<span style="color:Cornsilk">Test</span>
В этом тексте используется шаблон &#123;&#123;intlang&#125;&#125;, который отображает код языка интерфейса ({{intlang}}).
<span style="color:BlanchedAlmond">Test</span>
<span style="color:Bisque">Test</span>
<span style="color:NavajoWhite">Test</span>
<span style="color:Wheat">Test</span>
<span style="color:BurlyWood">Test</span>
<span style="color:Tan">Test</span>
<span style="color:RosyBrown">Test</span>
<span style="color:SandyBrown">Test</span>
<span style="color:Goldenrod">Test</span>
<span style="color:DarkGoldenrod">Test</span>
<span style="color:Peru">Test</span>
<span style="color:Chocolate">Test</span>
<span style="color:SaddleBrown">Test</span>
<span style="color:Sienna">Test</span>
<span style="color:Brown">Test</span>
<span style="color:Maroon">Test</span>


<span style="color:White">Test</span>
А здесь используется параметр, стандартным значением которого является 'green' если он не был указан: {{{size|green}}}.
<span style="color:Snow">Test</span>
<span style="color:HoneyDew">Test</span>
<span style="color:MintCream">Test</span>
<span style="color:Azure">Test</span>
<span style="color:AliceBlue">Test</span>
<span style="color:GhostWhite">Test</span>
<span style="color:WhiteSmoke">Test</span>
<span style="color:SeaShell">Test</span>
<span style="color:Beige">Test</span>
<span style="color:OldLace">Test</span>
<span style="color:FloralWhite">Test</span>
<span style="color:Ivory">Test</span>
<span style="color:AntiqueWhite">Test</span>
<span style="color:Linen">Test</span>
<span style="color:LavenderBlush">Test</span>
<span style="color:MistyRose">Test</span>


<span style="color:Gainsboro">Test</span>
<span style="background:{{{size|green}}}">Этот же параметр, но уже в CSS стиле текста</span>
<span style="color:LightGray">Test</span>
<span style="color:Silver">Test</span>
<span style="color:DarkGray">Test</span>
<span style="color:Gray">Test</span>
<span style="color:DimGray">Test</span>
<span style="color:LightSlateGray">Test</span>
<span style="color:SlateGray">Test</span>
<span style="color:DarkSlateGray">Test</span>
<span style="color:Black">Test</span>

Latest revision as of 14:10, 26 May 2025

An interesting optimization method that works

This {{Text-dir|ltr=righ|rtl=lef}}t:0; is a little bit more optimized than this {{Text-dir|ltr=right|rtl=left}}:0;


Windows Windows

My First Windows 98 Program
This is my Windows 98!



My First Windows XP Program
This is my Windows XP!



My First Windows 7 Program
This is my Windows 7!



My First Windows 7 Aero Program
This
is
my
Windows
7
Aero
!



SVG imitation








Всякий текст ё-маё

Всякий текст ё-маё

Всякий текст ё-маё

Всякий текст ё-маё

Всякий текст ё-маё

Всякий текст ё-маё


{{{1}}}

02:20

Hi, i’m Test!
Text Size:
Размер текста:


Translation Progress (Russian): Division by zero.%

How to work with params

No Param 1 ({{Template}})

  • {{{1}}} → {{{1}}}
  • {{{1|}}} →
  • {{{1|test}}} → test
  • {{#if:{{{1}}}|true|false}} → true
  • {{#if:{{{1|}}}|true|false}} → false
  • {{#ifeq:{{{1|}}}||true|false}} → true
  • {{#ifeq:{{{1|}}}|{{{1}}}|true|false}} → false

Empty Param 1 ({{Template|}})

  • {{{1}}} →
  • {{{1|}}} →
  • {{{1|test}}} →
  • {{#if:{{{1}}}|true|false}} → false
  • {{#if:{{{1|}}}|true|false}} → false
  • {{#ifeq:{{{1|}}}||true|false}} → true
  • {{#ifeq:{{{1|}}}|{{{1}}}|true|false}} → true

Param 1 with text ({{Template|Some text}})

  • {{{1}}} → Some text
  • {{{1|}}} → Some text
  • {{{1|test}}} → Some text
  • {{#if:{{{1}}}|true|false}} → true
  • {{#if:{{{1|}}}|true|false}} → true
  • {{#ifeq:{{{1|}}}||true|false}} → false
  • {{#ifeq:{{{1|}}}|{{{1}}}|true|false}} → true

Named Colors

For VDCEditor tests

Это самый обычный текст.

Это текст обёрнутый в тег <span>.

У этого текста указано CSS свойство font-weight:bold, что делает его жирным.

Тут текст окрашен в зелёный цвет с помощью CSS свойства color:green.

В этом тексте используется вложенный тег <span> с другим цветом текста

В этом тексте используется шаблон {{intlang}}, который отображает код языка интерфейса (en).

А здесь используется параметр, стандартным значением которого является 'green' если он не был указан: green.

Этот же параметр, но уже в CSS стиле текста