User:Max34/Sandbox: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
No edit summary
No edit summary
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
<indicator name="Page-Tools"><div id="bodyContent" class="mw-body-content" style="user-select:none; position:absolute; top:-12px; {{text-dir|ltr=right|rtl=left}}:0; width:max-content"><div id="mw-content-text" style="display:flex; gap:4px; line-height:10px">
__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>}}


<div style="display:inline-flex;position:relative">
<div class="mw-customtoggle-Lang-Select-Menu" style="line-height:10px; border:1px solid #65635F; border-radius:3px; display:inline-flex; gap:4px; align-items:center"><div style="padding-{{text-dir|ltr=left|rtl=right}}:3px">{{Flag|{{intlang}}}}</div><span style="font-size:1em;">{{ucfirst:{{#language:{{intlang}}}}}}</span><div style="height:100%;font-size:.6em;border-{{text-dir|ltr=left|rtl=right}}:1px solid #65635F;display:inline-flex;align-items:center;padding:0 5px;">&#x25BC;</div></div>


<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-Lang-Select-Menu" style="display:none; overflow:hidden; background:#404040; border:1px solid rgba(255,255,255,.1); border-radius:4px; box-shadow:0 10px 20px rgb(0,0,0,.3); user-select:text; position:absolute; z-index:1001; top:22px; {{text-dir|ltr=right|rtl=left}}:0; width:max-content"><div style="overflow-y:auto;max-height:200px"><span class=plainlinks>


<table cellpadding="4px" cellspacing="0" style="background:#404040">
== ''Windows'' Windows ==
<tr><td>{{Flag|en}} [{{fullurl:{{FULLPAGENAME}}|uselang=en}} {{#language:en}}]</td><td>{{Flag|ca}} [{{fullurl:{{FULLPAGENAME}}|uselang=ca}} {{#language:ca}}]</td></tr>
<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">
<tr><td>{{Flag|cs}} [{{fullurl:{{FULLPAGENAME}}|uselang=cs}} {{#language:cs}}]</td><td>{{Flag|de}} [{{fullurl:{{FULLPAGENAME}}|uselang=de}} {{#language:de}}]</td></tr>
<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">
<tr><td>{{Flag|el}} [{{fullurl:{{FULLPAGENAME}}|uselang=el}} {{#language:el}}]</td><td>{{Flag|eo}} [{{fullurl:{{FULLPAGENAME}}|uselang=eo}} {{#language:eo}}]</td></tr>
<div class="title-bar-text" style="color:#FFF; font-weight:550; letter-spacing:0; margin-right:24px">My First Windows 98 Program</div>
<tr><td>{{Flag|et}} [{{fullurl:{{FULLPAGENAME}}|uselang=et}} {{#language:et}}]</td><td>{{Flag|fr}} [{{fullurl:{{FULLPAGENAME}}|uselang=fr}} {{#language:fr}}]</td></tr>
<tr><td>{{Flag|fi}} [{{fullurl:{{FULLPAGENAME}}|uselang=fi}} {{#language:fi}}]</td><td>{{Flag|he}} [{{fullurl:{{FULLPAGENAME}}|uselang=he}} {{#language:he}}]</td></tr>
<tr><td>{{Flag|hi}} [{{fullurl:{{FULLPAGENAME}}|uselang=hi}} {{#language:hi}}]</td><td>{{Flag|hr}} [{{fullurl:{{FULLPAGENAME}}|uselang=hr}} {{#language:hr}}]</td></tr>
<tr><td>{{Flag|hu}} [{{fullurl:{{FULLPAGENAME}}|uselang=hu}} {{#language:hu}}]</td><td>{{Flag|it}} [{{fullurl:{{FULLPAGENAME}}|uselang=it}} {{#language:it}}]</td></tr>
<tr><td>{{Flag|ja}} [{{fullurl:{{FULLPAGENAME}}|uselang=ja}} {{#language:ja}}]</td><td>{{Flag|ka}} [{{fullurl:{{FULLPAGENAME}}|uselang=ka}} {{#language:ka}}]</td></tr>
<tr><td>{{Flag|km}} [{{fullurl:{{FULLPAGENAME}}|uselang=km}} {{#language:km}}]</td><td>{{Flag|ko}} [{{fullurl:{{FULLPAGENAME}}|uselang=ko}} {{#language:ko}}]</td></tr>
<tr><td>{{Flag|ms}} [{{fullurl:{{FULLPAGENAME}}|uselang=ms}} {{#language:ms}}]</td><td>{{Flag|nl}} [{{fullurl:{{FULLPAGENAME}}|uselang=nl}} {{#language:nl}}]</td></tr>
<tr><td>{{Flag|no}} [{{fullurl:{{FULLPAGENAME}}|uselang=no}} {{#language:no}}]</td><td>{{Flag|pl}} [{{fullurl:{{FULLPAGENAME}}|uselang=pl}} {{#language:pl}}]</td></tr>
<tr><td>{{Flag|pt}} [{{fullurl:{{FULLPAGENAME}}|uselang=pt}} {{#language:pt}}]</td><td>{{Flag|pt-br}} [{{fullurl:{{FULLPAGENAME}}|uselang=pt-br}} {{#language:pt-br}}]</td></tr>
<tr><td>{{Flag|ru}} [{{fullurl:{{FULLPAGENAME}}|uselang=ru}} {{#language:ru}}]</td><td>{{Flag|es}} [{{fullurl:{{FULLPAGENAME}}|uselang=es}} {{#language:es}}]</td></tr>
<tr><td>{{Flag|sv}} [{{fullurl:{{FULLPAGENAME}}|uselang=sv}} {{#language:sv}}]</td><td>{{Flag|uk}} [{{fullurl:{{FULLPAGENAME}}|uselang=uk}} {{#language:uk}}]</td></tr>
<tr><td>{{Flag|tr}} [{{fullurl:{{FULLPAGENAME}}|uselang=tr}} {{#language:tr}}]</td><td>{{Flag|vi}} [{{fullurl:{{FULLPAGENAME}}|uselang=vi}} {{#language:vi}}]</td></tr>
<tr><td>{{Flag|zh}} [{{fullurl:{{FULLPAGENAME}}|uselang=zh}} {{#language:zh}}]</td><td>{{Flag|zh-tw}} [{{fullurl:{{FULLPAGENAME}}|uselang=zh-tw}} {{#language:zh-tw}}]</td></tr>
</table>


</span></div></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>
<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(-135deg);"></div><br>
<div style="border:solid white; border-width:0 2px 2px 0; display:inline-block; padding:2px; transform:rotate(135deg);"></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 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=text-align:center;background:lightgrey>
<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>
<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>
<div style=text-align:center;background:lightgrey>
<span style="-webkit-text-stroke:1px #000">Всякий текст ё-маё</span>
</div>
{{{1}}}
{{#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}}) }}%
== 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 ==
<span style="color:IndianRed">█</span>
<span style="color:LightCoral">█</span>
<span style="color:Salmon">█</span>
<span style="color:DarkSalmon">█</span>
<span style="color:LightSalmon">█</span>
<span style="color:Crimson">█</span>
<span style="color:Red">█</span>
<span style="color:FireBrick">█</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:Gainsboro">█</span>
<span style="color:LightGray">█</span>
<span style="color:Silver">█</span>
<span style="color:DarkGray">█</span>
<span style="color:Gray">█</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>
== For VDCEditor tests ==
Это самый обычный текст.
<span>Это текст обёрнутый в тег &lt;span&gt;.</span>


<div style="border:1px solid #65635F; border-radius:3px; padding:2px 3px 2px 3px;" title="Edit Page">[[File:Icon-edit-filled.png|link={{fullurl:{{FULLPAGENAME}}|action=edit&section=1}}|13px]] [[File:Icon-visibility.png|link={{fullurl:{{FULLPAGENAME}}|action=edit&section=1}}|13px]]</div>
<span style="font-weight:bold">У этого текста указано CSS свойство font-weight:bold, что делает его жирным.</span>


<div style="border:1px solid #65635F; border-radius:3px; padding:2px 3px 2px 3px;" title="Edit Translations">[[File:Icon-edit-filled.png|link={{fullurl:{{FULLPAGENAME}}|action=edit&section=0}}|13px]] [[File:Icon-translate.png|link={{fullurl:{{FULLPAGENAME}}|action=edit&section=0}}|13px]]</div>
<span style="color:green">Тут текст окрашен в зелёный цвет с помощью CSS свойства color:green.</span>


<div style="line-height:13px; border:1px solid #65635F; border-radius:3px; padding:2px 4px 2px 4px;" title="Subpages">'''[[Special:PrefixIndex/{{FULLPAGENAME}}/|<span style="color:white" title="Subpages">/..</span>]]'''</div>
<span style="color:#00FF00">В этом тексте <span style="color:#0000FF; font-weight:bold">используется вложенный тег &lt;span&gt;</span> с другим цветом текста</span>


<div style="border:1px solid #65635F; border-radius:3px; padding:2px 3px 2px 3px;" title="Purge this Page">[[File:Icon-deblur.png|link={{fullurl:{{FULLPAGENAME}}|action=purge}}|12px]]</div>
В этом тексте используется шаблон &#123;&#123;intlang&#125;&#125;, который отображает код языка интерфейса ({{intlang}}).


</div></div></indicator><includeonly><onlyinclude>{{#switch:{{{1|}}}
А здесь используется параметр, стандартным значением которого является 'green' если он не был указан: {{{size|green}}}.
|0=no
|1=yes
|50=№ 50
}}</onlyinclude></includeonly>{{DISPLAYTITLE:<span style="display:none;">User:Max34/<wbr>Sandbox</span>}}
<div style="display:none">
= User:Max34/Sandbox =
</div><div id="firstHeading" class="firstHeading" style="color:white; padding-top:0; padding-bottom:14px; font-size:2em; margin-bottom:16px; direction:{{text-dir|ltr=ltr|rtl=rtl}}">User:Max34/Sandbox</div>
This is text.


{{Code|<nowiki>{{:{{FULLPAGENAME}}|50}}</nowiki>}} → {{:{{FULLPAGENAME}}|50}}
<span style="background:{{{size|green}}}">Этот же параметр, но уже в CSS стиле текста</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}}}

05:37

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 стиле текста