User:Mazu/Sandbox: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
m (→‎Box Shadows: updated to reflect the change to universal format.)
 
(16 intermediate revisions by the same user not shown)
Line 3: Line 3:
__TOC__
__TOC__
==My own personal Sandbox==
==My own personal Sandbox==
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.
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.  




Line 10: Line 10:
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  (Danger Map stuff) <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 (OXIII Stuff) <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/11 <br>
Line 45: 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 66: 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 71: 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 76: 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 81: 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 166: Line 180:


</div>
</div>


===Mouseover Opacity===
===Mouseover Opacity===
Line 180: 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 212: 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'''}}]]  
|}
|}


==Gradient Backgrounds==
==Gradient Backgrounds==
Line 658: 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