User:Max34/Sandbox: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
mNo edit summary
No edit summary
 
Line 10: Line 10:
== An interesting optimization method that works ==
== 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>}}
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 ==
== SVG imitation ==
Line 26: Line 91:




<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>





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}}}

45:05

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