User:Mazu/Sandbox: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
(Added an example of concept so the effect can be seen in my sandbox as well)
m (→‎Box Shadows: updated to reflect the change to universal format.)
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Custom Title|center|Mazu's Sandbox}}
{{Custom Title|center|Mazu's Sandbox}}
<div class="plainlinks">
<div class="plainlinks">
=My own personal Sandbox=
__TOC__
__TOC__
You might see something of yours here but it is only for me to learn from and work with. Feel free to add comments or help if you notice I seem to be struggling. But what I really like is ideas to work with.
==My own personal Sandbox==
This is where I take code, ideas, etc. and form them into something useful or nifty. Chances are a lot of this may only work in FireFox as it is my standard browser. I only care to make it cross compatible if it is going to end up on a another page. Lastly, learn, enjoy and don't mind the mess.  


It also seems that Kevan's wiki update jacked a few things around..but im too lazy to fix it. so meh.


'''Other Sandboxes:''' <br>  
'''Other Sandboxes:''' <br>  
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/2 (Gradients)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/2 (Gradients)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/3 (scrolling title)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/3 (scrolling title)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/4 (playing with subst and probably other templates soon)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/4 (playing with subst and probably other templates soon)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/5 (PK Recruitment advert)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/5 (PK Stuff)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/6 (PK UD Game style page)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/6 (PK UD Game style page)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/7 (PX's Page I'm working on)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/7 (PX's Page)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/8 (PK Userpage Template)<br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/8 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/9 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/9  (Danger Map Stuff) <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/10 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/10 (OXIII Stuff) <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/11 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/12 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/13 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/14 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/15 <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/ImageRepository <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/ImageRepository <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/RecentScreenShots <br>
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/RecentScreenShots <br>
Line 37: Line 41:
Also some wiki [http://wiki.urbandead.com/index.php/Help:Contents help].
Also some wiki [http://wiki.urbandead.com/index.php/Help:Contents help].


=Templates=
==Templates==
'''They are free to use but I might change them without notice.'''
'''They are free to use but I might change them without notice.'''


==Working on==
===Working on===
 
====RCStalker Template====
{{RCStalker|Mazu stalks}}
{{RCStalker|Mazu stalks}}


Line 47: Line 51:
<nowiki>{{RCStalker|Mazu stalks}}</nowiki> As you can see the template only has one variable for a name/group and then a verb (stalks, watches, etc).
<nowiki>{{RCStalker|Mazu stalks}}</nowiki> As you can see the template only has one variable for a name/group and then a verb (stalks, watches, etc).


==Completed==
====Harrison's TZH Template====
 
{| style="width:250px; border: solid 2px rgb(0,0,0);"
|rowspan=2|[[Image:Flashycat_hc_sig.gif|60px]]
|style="width:100%; background: rgb(0,0,0); color:rgb(255,255,255); Font-size:14px; font-weight:bold; text-align:center;"|TZH Hunter
|-
|<small>'''{{{1}}} has killed {{{2}}} TZH ZERG Suck Bags.'''</small>
|}


===Completed===
====Rotation Template====
http://wiki.urbandead.com/index.php/Template:Rotate  <br>
http://wiki.urbandead.com/index.php/Template:Rotate  <br>
It is a template that allows the easy rotation of page elements. <b>Note:</b> this doesn't work on IE or chrome correctly as far as I know.
It is a template that allows the easy rotation of page elements. <b>Note:</b> this doesn't work on IE or chrome correctly as far as I know. It will work on Chrome at least but it has to be a block element, pictures, etc.  
<span style="{{Rotate|180deg|0deg}};">{{User:Mazu/sig}}</span>
<span style="{{Rotate|180deg|0deg}};">{{User:Mazu/sig}}</span>
<nowiki>{{Rotate|#deg|#deg}}</nowiki>
<nowiki>{{Rotate|#deg|#deg}}</nowiki>
First variable is the amount of rotation and the second is the skew. There are examples of it [[Template:Rotate|here]]
First variable is the amount of rotation and the second is the skew. There are examples of it [[Template:Rotate|here]]


====Linear Gradient Template====


http://wiki.urbandead.com/index.php/Template:Lgradient
http://wiki.urbandead.com/index.php/Template:Lgradient
Line 62: Line 76:
<nowiki>{{Lgradient| direction | colors and color stops}}</nowiki>  
<nowiki>{{Lgradient| direction | colors and color stops}}</nowiki>  


====Vote End====


http://wiki.urbandead.com/index.php/Template:VoteEnd
http://wiki.urbandead.com/index.php/Template:VoteEnd
Line 67: Line 82:
<nowiki>{{VoteEnd| (Date voting ends) }}</nowiki>
<nowiki>{{VoteEnd| (Date voting ends) }}</nowiki>


====Viewing in FF====


http://wiki.urbandead.com/index.php/Template:ViewFF
http://wiki.urbandead.com/index.php/Template:ViewFF
Line 72: Line 88:
<nowiki>{{ViewFF}}</nowiki>
<nowiki>{{ViewFF}}</nowiki>


====Doesn't Know====


http://wiki.urbandead.com/index.php/Template:Dontknow
http://wiki.urbandead.com/index.php/Template:Dontknow
Line 77: Line 94:
<nowiki>{{Dontknow| (name) | (gender) }}</nowiki>
<nowiki>{{Dontknow| (name) | (gender) }}</nowiki>


====Punctuality====


http://wiki.urbandead.com/index.php/Template:DateandTime   
http://wiki.urbandead.com/index.php/Template:DateandTime   
Line 82: Line 100:
<nowiki>{{DateandTime| Insert name here }}</nowiki>
<nowiki>{{DateandTime| Insert name here }}</nowiki>


=Scrolling title=
==Scrolling title==
Got it to work
Got it to work


moved to a new testing site [[User:Mazu/Sandbox/3|here]]
moved to a new testing site [[User:Mazu/Sandbox/3|here]]


=Opacity=
==Opacity==


<div style="border: solid 2px midnightblue;background:#99ccff; padding: 10px">
<div style="border: solid 2px midnightblue;background:#99ccff; padding: 10px">
Line 144: Line 162:
|}
|}


==Mouseover Opacity==
 
===RGBA===
 
Dug it up. Really cool color code that combines the color and opacity. looks like  color:rgba(red, green, blue, opacity). It doesn't seem to work on IE though. Surprise!
 
<div style="background:rgba(45, 78, 31, 1);">
<br>
<br>
{| style="background:rgba(0, 0, 0, 0.3); float: left; width: 50%;"
|-
| <span style="color:white;">But it doesnt effect text!</span>
<br>
<br>
|}
<br>
<br>
 
</div>
 
 
 
 
===Mouseover Opacity===
Found [http://www.w3schools.com/Css/css_image_transparency.asp here] Working on the idea..
Found [http://www.w3schools.com/Css/css_image_transparency.asp here] Working on the idea..


Line 153: Line 193:
<span style="opacity:.50;  border:solid 1px #AF7817; padding-right: 0px; margin: 0px; background-color: #EFEADE; color: black;" hover="opacity:1;" >MS</span>
<span style="opacity:.50;  border:solid 1px #AF7817; padding-right: 0px; margin: 0px; background-color: #EFEADE; color: black;" hover="opacity:1;" >MS</span>


Eh doesn't work on the wiki, it blocks that kind of code for security reasons I was told.


=Box Shadows=
==Box Shadows==


{{codeInline|<nowiki>-moz-box-shadow: (n=right shadow)em (n=bottom shadow)em (n=fade/rounds corners)em (n=all sides equal shadow)em</nowiki>}}
{{codeInline|<nowiki>box-shadow: (n=right shadow)em (n=bottom shadow)em (n=fade/rounds corners)em (n=all sides equal shadow)em</nowiki>}}


'''Replace (n=text) with a numerical value. For example: 1.3em. Proof of concept examples are provided below.'''  
'''Replace (n=text) with a numerical value. For example: 1.3em. Proof of concept examples are provided below.'''  




{| style="-moz-box-shadow: 1.0em .0em .0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: 1.0em .0em .0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}




{| style="-moz-box-shadow: .0em 1.0em .0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: .0em 1.0em .0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}




{| style="-moz-box-shadow: 1.0em 1.0em .0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: 1.0em 1.0em .0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}




{| style="-moz-box-shadow: .0em .0em .0em 1em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: .0em .0em .0em 1em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}




{| style="-moz-box-shadow: 1.0em 1.0em .0em 1.0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: 1.0em 1.0em .0em 1.0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}
Line 188: Line 229:




{| style="-moz-box-shadow: .5em .5em .0em 1.0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: .5em .5em .0em 1.0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}




{| style="-moz-box-shadow: .0em .0em 1.0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: .0em .0em 1.0em .0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}




{| style="-moz-box-shadow: .5em .5em 3.0em 1.0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
{| style="box-shadow: .5em .5em 3.0em 1.0em #888; width: 14px; border:solid 2px #AF7817; Background-color:#EFEADE; CELLSPACING:0"
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|[[User:Mazu|{{c|Black|'''MS'''}}]]  
|}
|}


=Playing with my nav bar=
==Gradient Backgrounds==
{| style="padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817"
|
'''[[Philosophe_Knights|Philosophe Knights]]'''<br/>
<small>''Main page''</small>
|}
 
 
{| style="-moz-box-shadow: .5em .8em 1.3em #888; padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817"
|
'''[[Philosophe_Knights|Philosophe Knights]]'''<br/>
<small>''Main page''</small>
|}
 
 
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817"
|
'''[[Philosophe_Knights|Philosophe Knights]]'''<br/>
<small>''Main page''</small>
|}
 
=Gradient Backgrounds=


<div style="background: #28343b; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28343b), color-stop(36%,#828c95), color-stop(100%,#b5bdc8)); background: -moz-linear-gradient(top, #28343b 0%, #828c95 36%, #b5bdc8 100%); background: -o-linear-gradient(top, #28343b 0%,#828c95 36%,#b5bdc8 100%); padding:10px; overflow:hidden;">
<div style="background: #28343b; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#28343b), color-stop(36%,#828c95), color-stop(100%,#b5bdc8)); background: -moz-linear-gradient(top, #28343b 0%, #828c95 36%, #b5bdc8 100%); background: -o-linear-gradient(top, #28343b 0%,#828c95 36%,#b5bdc8 100%); padding:10px; overflow:hidden;">
Line 267: Line 287:
</div>
</div>


=Possible transparent background idea?=
==Possible transparent background idea?==
<div> [[Image:collumnsb.jpg|center]] <div style="position: relative; top: -950px; margin-bottom: -672px;">
<div> [[Image:collumnsb.jpg|center]] <div style="position: relative; top: -950px; margin-bottom: -672px;">


Line 295: Line 315:
|}
|}
</div>
</div>
=RGBA=
Dug it up. Really cool color code that combines the color and opacity. looks like  color:rgba(red, green, blue, opacity). It doesn't seem to work on IE though. Surprise!
<div style="background:rgba(45, 78, 31, 1);">
<br>
<br>
{| style="background:rgba(0, 0, 0, 0.3); float: left; width: 50%;"
|-
| <span style="color:white;">But it doesnt effect text!</span>
<br>
<br>
|}
<br>
<br>
</div>






=Display Box=
==Display Box==
Stolen from Aichon.
Stolen from Aichon.


Line 341: Line 342:
</div>
</div>


=Rotation=
==Rotation==
Didn't think it worked on the wiki
Didn't think it worked on the wiki
<span style="-moz-transform: rotate(-15deg) skew(0deg); -webkit-transform: rotate(-15deg) skew(0deg); -o-transform: rotate(-15deg) skew(0deg); -ms-transform: rotate(-15deg) skew(0deg); transform: rotate(-15deg) skew(0deg); padding: 2px; background:#EFEADE; border: solid black">Loris Ipsum</span>
<span style="-moz-transform: rotate(-15deg) skew(0deg); -webkit-transform: rotate(-15deg) skew(0deg); -o-transform: rotate(-15deg) skew(0deg); -ms-transform: rotate(-15deg) skew(0deg); transform: rotate(-15deg) skew(0deg); padding: 2px; background:#EFEADE; border: solid black">Loris Ipsum</span>
Line 358: Line 359:
--<span style="-moz-transform: rotate(-180deg) skew(0deg); -webkit-transform: rotate(-180deg) skew(0deg); -o-transform: rotate(-180deg) skew(0deg); -ms-transform: rotate(-180deg) skew(0deg); transform: rotate(-180deg) skew(0deg);background:#EFEADE; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;{{xbrowsercss|box-shadow: 0.04em 0.04em 1.0em 0.13em #AF7817}}">[[User:Mazu|<span style="padding-left:7px; padding-right:3px; margin:0px; background-color:#EFEADE; color:#AF7817; font: 10px 'RefSpecialty',cursive;">MS</span>]][[User_talk:Mazu|<span style="padding-right: 0px; padding-left:0px; margin:0px; background-color:#EFEADE; color:#AF7817; font: 10px 'RefSpecialty',cursive;">¤ D ¤</span>]][[Philosophe_Knights|<span style="padding-right: 7px; padding-left:3px; margin:0px; background-color:#EFEADE; color:#AF7817; font: 10px 'RefSpecialty',cursive;">PK</span>]]</span>
--<span style="-moz-transform: rotate(-180deg) skew(0deg); -webkit-transform: rotate(-180deg) skew(0deg); -o-transform: rotate(-180deg) skew(0deg); -ms-transform: rotate(-180deg) skew(0deg); transform: rotate(-180deg) skew(0deg);background:#EFEADE; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;{{xbrowsercss|box-shadow: 0.04em 0.04em 1.0em 0.13em #AF7817}}">[[User:Mazu|<span style="padding-left:7px; padding-right:3px; margin:0px; background-color:#EFEADE; color:#AF7817; font: 10px 'RefSpecialty',cursive;">MS</span>]][[User_talk:Mazu|<span style="padding-right: 0px; padding-left:0px; margin:0px; background-color:#EFEADE; color:#AF7817; font: 10px 'RefSpecialty',cursive;">¤ D ¤</span>]][[Philosophe_Knights|<span style="padding-right: 7px; padding-left:3px; margin:0px; background-color:#EFEADE; color:#AF7817; font: 10px 'RefSpecialty',cursive;">PK</span>]]</span>


=Tabbed Userpage=  
==Tabbed Userpage==  
stolen from [[user:Linkthewindow|Link the window]] whom I'm assuming stole it from [[User:Matthewfarenheit|Matthew Farenheit]].
stolen from [[user:Linkthewindow|Link the window]] whom I'm assuming stole it from [[User:Matthewfarenheit|Matthew Farenheit]].
{| style="text-align:center" width="100%" cellspacing="0" cellpadding="0" vertical-align="top" border="0" |
{| style="text-align:center" width="100%" cellspacing="0" cellpadding="0" vertical-align="top" border="0" |
Line 415: Line 416:
<br>
<br>
<br>
<br>
==Messing with my box links==
===Added box shadow to links===
{| style="padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817"
|
'''[[Philosophe_Knights|Philosophe Knights]]'''<br/>
<small>''Main page''</small>
|}
{| style="-moz-box-shadow: .5em .8em 1.3em #888; padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817"
|
'''[[Philosophe_Knights|Philosophe Knights]]'''<br/>
<small>''Main page''</small>
|}


==Box links faded when on that page==
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background-color:#E7DFCE; border:solid 1px #AF7817"
|
'''[[Philosophe_Knights|Philosophe Knights]]'''<br/>
<small>''Main page''</small>
|}
 
===Box links faded when on that page===


<div class="plainlinks" style="background:  rgb(255, 255, 255); {{Lgradient|left top|rgb(230, 230, 230), rgb(135, 135, 135) 10%, rgb(230, 230, 230) 20%,rgb(135, 135, 135) 30%, rgb(230, 230, 230) 40%, rgb(135, 135, 135) 50%, rgb(230, 230, 230) 60%, rgb(135, 135, 135) 70%, rgb(230, 230, 230) 80%, rgb(135, 135, 135) 90%, rgb(230, 230, 230) 100%}}; padding:10px; overflow: hidden;">
<div class="plainlinks" style="background:  rgb(255, 255, 255); {{Lgradient|left top|rgb(230, 230, 230), rgb(135, 135, 135) 10%, rgb(230, 230, 230) 20%,rgb(135, 135, 135) 30%, rgb(230, 230, 230) 40%, rgb(135, 135, 135) 50%, rgb(230, 230, 230) 60%, rgb(135, 135, 135) 70%, rgb(230, 230, 230) 80%, rgb(135, 135, 135) 90%, rgb(230, 230, 230) 100%}}; padding:10px; overflow: hidden;">
Line 491: Line 514:
<nowiki>{{switch|{{{width}}}|case: big=500px|case: small=100px|default={{{width|250px}}} }} </nowiki>
<nowiki>{{switch|{{{width}}}|case: big=500px|case: small=100px|default={{{width|250px}}} }} </nowiki>


==Semi-circle or circular orientation for nav links(single table)==
===Semi-circle or circular orientation for nav links(single table)===
This should be a fun undertaking.  Needs 7 columns and 4 rows I think.  
This should be a fun undertaking.  Needs 7 columns and 4 rows I think.  


Line 573: Line 596:
|}
|}


==Semi-circle or circular orientation for nav links(multiple tables)==
===Circular orientation for nav links(multiple tables)===
  Needs 4 tables of varied cell width, 3 cells might work best for the tables with two boxes.  
  Needs 4 tables of varied cell width, 3 cells might work best for the tables with two boxes.  
{|style="background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); width:800px; align:center" |
{|style="background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); width:800px; align:center" |
Line 651: Line 674:
|}
|}
|}
|}
=Stacking Div's beside each other=
<div>
<div style="width:8%; background: rgb(255,0,0); Float:left; text-align:center;">First</div>
<div style="width:8%; background: rgb(0,255,0); Float:left; text-align:center;">Second</div>
<div style="width:8%; background: rgb(0,0,255); Float:left; text-align:center;">Third</div>
<div style="width:8%; background: rgb(200,200,200); Float:left; text-align:center;">Fourth</div>
</div>
<div>
{|CELLSPACING=0 CELLPADDING=0
|<div style="width:50px; height:25px; background: rgb(255,0,0); Float:left; text-align:center;">First</div>
|<div style="width:50px; height:25px; background: rgb(0,255,0); Float:left; text-align:center;">Second</div>
|-
|<div style="width:50px; height:25px; background: rgb(0,0,255); Float:left; text-align:center;">Third</div>
|<div style="width:50px; height:25px; background: rgb(200,200,200); Float:left; text-align:center;">Fourth</div>
|}
</div>
=A. Schwan's Nav bar=
{| style="border:Black 3px solid; width:65%; border-spacing:0px; margin:0px; ; {{border-radius|8px}}" align=center
| style="padding:4px; background-color:#666666" |[[Image:asbar.png|link=User:A.schwan|Albert Schwan|560px]]<br>
[[Image:asbartalk.png|link=User talk:A.schwan|Talk|56px]][[Image:asbartalk2.png|link=Dr. schwan’s Research and Development Team|D.S.R&D|90px]][[Image:asbartalk3.png|link=Z.A.L.P.|ZALP|61px]][[Image:asbartalk4.png|link=User:A.schwan/JR BobDobbs|JR BobDobbs|120px]][[Image:asbartalk5.png|link=User:A.schwan/Goltaur|Goltaur|110px]][[Image:asbartalk6.png|link=User:A.schwan/Shambilly|Shambilly|125px]]
{| style="border:Black 2px solid; width:98%; border-spacing:3px; margin:5px; background-color:Silver; ; {{border-radius|8px}}" align=center
|-
|<font face= " Times New Roman "><Font Color=gray><font size=4>[[User:A.schwan/sandbox/the work|<Font Color=black>The Work</font>]] - [[Dr. schwan’s Research and Development Team/Combat Revive Policy|<Font Color=black>Combat Reviver</font>]] - [[User:A.schwan/life-culting|<Font Color=black>Life-Cultist</font>]] - [[Template:DSRDproducts|<Font Color=black>Products&Services</font>]]  - [[User:A.schwan/JR BobDobbs/Book of Malton|<Font Color=black>Book of Malton</font>]]</font></font></font>
|-
|}
|}
=The Ripple Effect=
Trying to recreate water ripples by use of a radial gradient.
http://stockfresh.com/files/c/clearviewstock/m/51/690175_stock-photo-top-down-water-ripple.jpg
<b>Snytax for all browsers:</b>
background-image:    -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); <br>
background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);  <br>
background-image: -ms-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);  <br>
background-image: -o-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);  <br>
----
I'm just playing with FF for now, I'll C/P the code into the rest of them later.
<div style="width:800px; height: 800px; background: -moz-radial-gradient(center 45deg, circle closest-side,
rgb(35,60,130) 0%, rgb(40,100,160) 3%, rgb(120,150,200) 5%, rgb(140, 170, 230) 7%,
rgb(120,150,200) 8%, rgb(20,40,120) 11%, rgb(120,150,200) 13%, rgb(140,170,230) 14%,
rgb(120,150,200) 15%, rgb(20,40,120) 18%, rgb(120,150,200) 20%, rgb(140, 170, 230) 21%,
rgb(120,150,200) 22%, rgb(20,40,120) 25%, rgb(120,150,200) 27%, rgb(140,170,230) 28%,
rgb(120,150,200) 29%, rgb(20,40,120) 32%, rgb(120,150,200) 34%, rgb(140,170,230) 35%,
rgb(120,150,200) 36%, rgb(20,40,120) 39%, rgb(120,150,200) 41%, rgb(140,170,230) 42%,
rgb(120,150,200) 43%, rgb(20,40,120) 46%, rgb(120,150,200) 48%, rgb(140,170,230) 49%,
rgb(120,150,200) 50%, rgb(20,40,120) 53%, rgb(120,150,200) 55%, rgb(140,170,230) 56%,
rgb(120,150,200) 57%, rgb(20,40,120) 60%, rgb(120,150,200) 62%, rgb(140,170,230) 63%,
rgb(120,150,200) 64%, rgb(20,40,120) 67%, rgb(120,150,200) 69%, rgb(140,170,230) 70%,
rgb(120,150,200) 71%, rgb(20,40,120) 74%, rgb(120,150,200) 76%, rgb(140,170,230) 77%,
rgb(120,150,200) 78%,rgb(20,40,90) 81%,
rgb(20,50,110) 85%, rgb(28,65,132) 100%); ">
</div>
One with less crests.
<div style="width:800px; height: 800px; background: -moz-radial-gradient(center 45deg, circle closest-side,
rgb(35,60,130) 0%, rgb(70,120,190) 6%, rgb(50,90,150) 12%, rgb(70,120,190) 14%,
rgb(60,100,175) 17%, rgb(20,55,132) 21%, rgb(50,90,150) 26%, rgb(70,120,190) 28%,
rgb(60,100,175) 31%, rgb(20,55,132) 35%, rgb(50,90,150) 40%, rgb(70,120,190) 42%,
rgb(60,100,175) 45%, rgb(20,55,132) 49%, rgb(50,90,150) 54%, rgb(70,120,190) 56%, 
rgb(60,100,175) 59%, rgb(20,55,132) 63%, rgb(50,90,150) 68%, rgb(70,120,190) 70%,
rgb(60,100,175) 73%, rgb(20,55,132) 77%, rgb(50,90,150) 82%, rgb(70,120,190) 84%, 
rgb(60,100,175) 87%,
rgb(20,50,110) 91%, rgb(28,65,132) 100%); ">
</div>

Latest revision as of 18:13, 12 July 2013

Mazu's Sandbox

My own personal Sandbox

This is where I take code, ideas, etc. and form them into something useful or nifty. Chances are a lot of this may only work in FireFox as it is my standard browser. I only care to make it cross compatible if it is going to end up on a another page. Lastly, learn, enjoy and don't mind the mess.


Other Sandboxes:
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/2 (Gradients)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/3 (scrolling title)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/4 (playing with subst and probably other templates soon)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/5 (PK Stuff)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/6 (PK UD Game style page)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/7 (PX's Page)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/8
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/9 (Danger Map Stuff)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/10 (OXIII Stuff)
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/11
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/12
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/13
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/14
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/15
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/ImageRepository
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/RecentScreenShots
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/Sig
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/SigMashUps
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/Suggestions
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/Userspace
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/Userspace/Archive


Nifty Links
http://urbandead.com/treelog.html
http://robertnyman.com/2011/ <-Has awesome examples of code.
http://css3please.com/
http://html-color-codes.com/ <-Hex color chat
http://www.psyclops.com/tools/rgb/ <-color converter
http://profiles.urbandead.net/
http://www.unicodemap.org/

Also some wiki help.

Templates

They are free to use but I might change them without notice.

Working on

RCStalker Template

Are you a stalker?
List of abbreviations:
N
This edit created a new page (also see list of new pages)
m
This is a minor edit
b
This edit was performed by a bot
(±123)
The page size changed by this number of bytes

21 December 2024

 		Mazu stalks Recent Changes so much he put a template of it on their userpage.


{{RCStalker|Mazu stalks}} As you can see the template only has one variable for a name/group and then a verb (stalks, watches, etc).

Harrison's TZH Template

Flashycat hc sig.gif TZH Hunter
{{{1}}} has killed {{{2}}} TZH ZERG Suck Bags.

Completed

Rotation Template

http://wiki.urbandead.com/index.php/Template:Rotate
It is a template that allows the easy rotation of page elements. Note: this doesn't work on IE or chrome correctly as far as I know. It will work on Chrome at least but it has to be a block element, pictures, etc.        {{Rotate|#deg|#deg}} First variable is the amount of rotation and the second is the skew. There are examples of it here

Linear Gradient Template

http://wiki.urbandead.com/index.php/Template:Lgradient

Examples and useage are on the template's page.

{{Lgradient| direction | colors and color stops}}

Vote End

http://wiki.urbandead.com/index.php/Template:VoteEnd

Voting Ends on: Now!

{{VoteEnd| (Date voting ends) }}

Viewing in FF

http://wiki.urbandead.com/index.php/Template:ViewFF

Fficon.jpg Best Viewed in FireFox
This page is best viewed in FireFox to see full effects

{{ViewFF}}

Doesn't Know

http://wiki.urbandead.com/index.php/Template:Dontknow

Notice: Mazu doesn't know what he/she is doing.

{{Dontknow| (name) | (gender) }}

Punctuality

http://wiki.urbandead.com/index.php/Template:DateandTime

Doom-clock.jpg Punctuality
Mazu believe(s) in being on time.

The current time is

13:39 on Sunday, December 22, 2024 (UTC)

{{DateandTime| Insert name here }}

Scrolling title

Got it to work

moved to a new testing site here

Opacity

UDFiles/Players/Mazu
Contains all aliases and known facts about "Mazu"
Talk Page
All discussion about "Mazu" goes here
The Archive
Outdated reports and information on "Mazu"

Default (100% Opacity)

50% Opacity

from AHLG's sandbox


UDFiles/Players/Mazu
Contains all aliases and known facts about "Mazu"
Talk Page
All discussion about "Mazu" goes here
The Archive
Outdated reports and information on "Mazu"
UDFiles/Players/Mazu
Contains all aliases and known facts about "Mazu"
Talk Page
All discussion about "Mazu" goes here
The Archive
Outdated reports and information on "Mazu"


RGBA

Dug it up. Really cool color code that combines the color and opacity. looks like color:rgba(red, green, blue, opacity). It doesn't seem to work on IE though. Surprise!



But it doesnt effect text!







Mouseover Opacity

Found here Working on the idea..

MS

MS

MS

Eh doesn't work on the wiki, it blocks that kind of code for security reasons I was told.

Box Shadows

box-shadow: (n=right shadow)em (n=bottom shadow)em (n=fade/rounds corners)em (n=all sides equal shadow)em

Replace (n=text) with a numerical value. For example: 1.3em. Proof of concept examples are provided below.


MS


MS


MS


MS


MS



MS


MS


MS

Gradient Backgrounds

Dunno how this works yet but I will!










Moved to a larger testing site here

New background:




Possible transparent background idea?

Collumnsb.jpg


Remarks by one who encountered MS in a local library

I saw a Robed man sitting in a back lit corner of a library, recently retaken from the zombies. It was still dark and he was reading a large book by candle light on a small table. I drew closer and began to recognize him as he had been a prevalent force in retaking the library although I did not know his name he didn't speak much. I felt as if he knew I was there and had been staring at me the whole time.. Impossible I said to myself, he hadn't looked up from his book even for an instant. When I was just outside of speaking distance he said, "Come, you have questions do you not?" I jumped a little but obediently listened. Once I was by his side he looked up, startled once again at the sight of a plain white mask with only one feature the scripture "Matthew 7:26-27" carved into it. He offered me a seat..with out knowing it I had already sat down. He quietly says "You may begin but only one shall be answered." from behind his mask. Questions swirled about in my head knowing he will only answer one, I posed the one that raised the most curiosity. Nervously I asked, "What does Matthew 7:26-27 mean?" He responds by flipping through a few large sections on the book he was reading, I realized it was a bible, finally settling on the right page and begins to read:

"26And every one that heareth these sayings of mine, and doeth them not, shall be likened unto a foolish man, which built his house upon the sand: 27And the rain descended, and the floods came, and the winds blew, and beat upon that house; and it fell: and great was the fall of it."

After reading he says, "I live my life by these words and all others contained in this book." He starts to get up and impulsively I asked, "What is your name?" Stopping, he responds, "I have many names given to me but if you chance by me in the future you may call me MS. Follow the path of knowledge friend, may it keep you safe and prosper you in life, I bid you adieu." He disappears into the chaos of the scene. As I started to leave some time later a person frantically stops me. Begging for information on a masked man in the area. I respond, "Yes, I spoke with him and he left the library about an hour ago..?" Seeing the confusion on my face he explains of a cult of mass murders known as the Philosophe Knights that walk around wearing plain white face masks and robes preaching about knowledge. The man with a group following him runs off in search of the knight who decided to spare my life whilst ending so many others.

Hat.jpg Honor Among Thieves
Mazu supports the Honor Among Thieves Policy & finds that PKing is more fun when only innocents suffer.

Gladiatorial Arena.jpg Gladiatorial Arena Policy Supporter
This user or group supports the Gladiatorial Arena Policy & acknowledges that all stadiums in Malton are gladiatorial areas, in which the killing of another survivor is not a crime and therefore not punishable in any way.

Thinker.gif Royal Society of Malton
This user or group is a member of the Royal Society of Malton, a coalition of groups and individuals who pride themselves on their intellect and strive to make the survivors within Malton more intelligent.

Books.jpg Centers Of Learning Policy Supporter
This user or group supports the Centers of Learning Policy & acknowledges that all libraries, schools, zoos, and museums in the city of Malton are considered safe places. No survivor in one of these locations may be killed for any reason unless that survivor is a specified enemy of this user or group.

Fine Arts1.jpg Fine Art of Malton Supporter
This user or group supports the Fine Art of Malton movement & acknowledges that all museums are PK ceasefire zones, heal points, and are to be a barricading priority.

Doom-clock.jpg Punctuality
This user or group believe(s) in being on time.

The current time is

13:39 on Sunday, December 22, 2024 (UTC)



Display Box

Stolen from Aichon.

• Main
• Characters
• Sandbox

• Talk
• Userscripts
• Other

Rotation

Didn't think it worked on the wiki Loris Ipsum


Loris Ipsum


Philosophebanner.PNG


Upside down sig!


--MS¤ D ¤PK

Tabbed Userpage

stolen from Link the window whom I'm assuming stole it from Matthew Farenheit.

Main   Discussion   Characters   Templates   Sandbox  
Content



Lets see if we can make it on its side instead of on top.

Content
 
Main
 


Discussion
 


Characters
 


Templates
 


Sandbox
 



Messing with my box links

Added box shadow to links

Philosophe Knights
Main page


Philosophe Knights
Main page


Philosophe Knights
Main page

Box links faded when on that page

Best in Chrome or FireFox.

Philosophe Knights


Philosophe Knights
Main page


My Talk Page
All discussion goes here.


For Knowledge
Those who have died for the preservation of knowledge.


My Titles
The titles I have earned and working on.


My Characters
Lists all the characters I run.


My Templates
Has other templates I support.


My Sandbox
A place for me to perfect edits.

This code might be handy. At least the template anywho.

ЯЭV⁠€⁠NΛИ
{{switch|{{{width}}}|case: big=500px|case: small=100px|default={{{width|250px}}} }}

Semi-circle or circular orientation for nav links(single table)

This should be a fun undertaking. Needs 7 columns and 4 rows I think.

Main Page
My main page

My Talk Page
All discussion goes here.

For Knowledge
Those who have died for the preservation of knowledge.

My Titles
The titles I have earned and working on.

My Characters
Lists all the characters I run.

My Templates
Has other templates I support.

My Sandbox
A place for me to perfect edits.

Circular orientation for nav links(multiple tables)

Needs 4 tables of varied cell width, 3 cells might work best for the tables with two boxes.

Philosophe Knights
Main page

My Talk Page
All discussion goes here.

For Knowledge
Those who have been educated.

My Titles
The titles I have earned and working on.

      

My Characters
Lists all the characters I run.

My Templates
Has other templates I support.

My Sandbox
A place for me to perfect edits.

Main Page
My main page

Stacking Div's beside each other

First
Second
Third
Fourth


First
Second
Third
Fourth

A. Schwan's Nav bar

Albert Schwan

TalkD.S.R&DZALPJR BobDobbsGoltaurShambilly

The Work - Combat Reviver - Life-Cultist - Products&Services - Book of Malton

The Ripple Effect

Trying to recreate water ripples by use of a radial gradient.

http://stockfresh.com/files/c/clearviewstock/m/51/690175_stock-photo-top-down-water-ripple.jpg

Snytax for all browsers:

background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
background-image: -ms-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
background-image: -o-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);

I'm just playing with FF for now, I'll C/P the code into the rest of them later.

One with less crests.

Retrieved from "http://wiki.urbandead.com//index.php?title=User:Mazu/Sandbox&oldid=2083362"