User:Mazu/Sandbox: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
No edit summary
m (→‎Box Shadows: updated to reflect the change to universal format.)
 
(20 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">
__TOC__
==My own personal Sandbox==
==My own personal Sandbox==
__TOC__
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.  
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.


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 41: Line 45:


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




<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).
====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===
===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


Line 143: Line 161:
|-
|-
|}
|}
===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===
===Mouseover Opacity===
Line 157: Line 197:
==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 189: 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=
{| 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>
|}
|}


Line 295: Line 314:
<br>
<br>
|}
|}
</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>
</div>




Line 416: 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>
|}
{| 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==
===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 492: 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 574: 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 652: 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