User:Mazu/Sandbox: Difference between revisions

From The Urban Dead Wiki
Jump to navigationJump to search
(→‎Time for something fresh.: Got it to work I think.)
m (→‎Box Shadows: updated to reflect the change to universal format.)
 
(27 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 296: Line 316:
</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>
|}
{| 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>
|}


==Time for something fresh.==
===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 429: Line 452:
| style="padding:10px; vertical-align:top; border-top:solid 2px  rgb(0, 0, 0); border-right:solid 2px  rgb(0, 0, 0); border-left:solid 2px  rgb(0, 0, 0); text-align:center"|
| style="padding:10px; vertical-align:top; border-top:solid 2px  rgb(0, 0, 0); border-right:solid 2px  rgb(0, 0, 0); border-left:solid 2px  rgb(0, 0, 0); text-align:center"|
__NOTOC__
__NOTOC__
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: Philosophe_Knights=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,0); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,0); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
|
Line 435: Line 457:
<small>''Main page''</small>
<small>''Main page''</small>
|}
|}
</div>
<br>
<br>
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User_Talk:Mazu=.3|default=1 }};">
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User_Talk:Mazu=.3|default=1 }};">
Line 445: Line 466:
</div>
</div>
<br>
<br>
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Sandbox=.3|default=1 }};">  
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/KillList=.3|default=1 }};">
{| style="padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,0); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/KillList|<span style="color:  rgb(0, 0, 0); text-decoration:underline">For Knowledge</span>]]'''<br/>
<small>''Those who have died for the preservation of knowledge.''</small>
|}
</div>
<br>
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Titles=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Titles|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Titles</span>]]'''<br/>
<small>''The titles I have earned and working on.''</small>
|}
</div>
<br>
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Characters=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Characters|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Characters</span>]]'''<br/>
<small>''Lists all the characters I run.''</small>
|}
</div>
<br>
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Templates=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
|
'''[[User:Mazu/Sandbox|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Sandbox</span>]]'''<br/>
'''[[User:Mazu/Templates|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Templates</span>]]'''<br/>
<small>''A place for me to perfect edits.'' this box should have opacity .3</small>
<small>''Has other templates I support.''</small>
|}
|}
</div>
</div>
<br>
<br>
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/KillList=.3|default=1 }};">
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Sandbox=.3|default=1 }};">  
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
|
'''[[User:Mazu/KillList|<span style="color:  rgb(0, 0, 0); text-decoration:underline">For Knowledge</span>]]'''<br/>
'''[[User:Mazu/Sandbox|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Sandbox</span>]]'''<br/>
<small>''Those who have died for the preservation of knowledge.''</small>
<small>''A place for me to perfect edits.''</small>
|}
|}
</div>
</div>
Line 469: 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==
===Semi-circle or circular orientation for nav links(single table)===
I'll persue this later..
This should be a fun undertaking.  Needs 7 columns and 4 rows I think.
 
{|
|
|
|
|
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:150px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu|<span style="color: rgb(0, 0, 0); text-decoration:underline">Main Page</span>]]'''<br/>
<small>''My main page''</small>
|}
|
|
|
|-
|
|
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User_Talk:Mazu=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:150px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,0); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User_Talk:Mazu|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Talk Page</span>]]'''<br/>
<small>''All discussion goes here.''</small>
|}
</div>
|
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/KillList=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:150px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/KillList|<span style="color:  rgb(0, 0, 0); text-decoration:underline">For Knowledge</span>]]'''<br/>
<small>''Those who have died for the preservation of knowledge.''</small>
|}
|
|
</div>
|-
|
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Titles=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:150px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Titles|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Titles</span>]]'''<br/>
<small>''The titles I have earned and working on.''</small>
|}
</div>
|
|
|
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Characters=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:150px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Characters|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Characters</span>]]'''<br/>
<small>''Lists all the characters I run.''</small>
|}
</div>
|
|-
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Templates=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:150px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Templates|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Templates</span>]]'''<br/>
<small>''Has other templates I support.''</small>
|}
</div>
|
|
|
|
|
|
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:150px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Sandbox|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Sandbox</span>]]'''<br/>
<small>''A place for me to perfect edits.''</small>
|}
|}
 
===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.
{|style="background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); width:800px; align:center" |
{|align="center"
|
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[Philosophe_Knights|<span style="color:  rgb(0, 0, 0); text-decoration:underline">Philosophe Knights</span>]]'''<br/>
<small>''Main page''</small>
|}
|}
{| style="background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001);" align="center"
|
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User_Talk:Mazu=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,0); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User_Talk:Mazu|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Talk Page</span>]]'''<br/>
<small>''All discussion goes here.''</small>
|}
</div>
|width="150px" |
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/KillList=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/KillList|<span style="color:  rgb(0, 0, 0); text-decoration:underline">For Knowledge</span>]]'''<br/>
<small>''Those who have been educated.''</small>
|}
</div>
|}
{|style="background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001);" align="center"
|
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Titles=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Titles|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Titles</span>]]'''<br/>
<small>''The titles I have earned and working on.''</small>
|}
</div>
|width="300px" align="center" | {{User:Mazu/sig}}
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Characters=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Characters|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Characters</span>]]'''<br/>
<small>''Lists all the characters I run.''</small>
|}
</div>
|}
{|style="background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001);" align="center"
|
|
<div style="opacity: {{switch|{{FULLPAGENAME}}|case: User:Mazu/Templates=.3|default=1 }};">
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Templates|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Templates</span>]]'''<br/>
<small>''Has other templates I support.''</small>
|}
</div>
|width="150px" |
|
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu/Sandbox|<span style="color:  rgb(0, 0, 0); text-decoration:underline">My Sandbox</span>]]'''<br/>
<small>''A place for me to perfect edits.''</small>
|}
|}
{|style="background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001);" align="center"
|
{| style="{{xbrowsercss|box-shadow: .5em .8em 1.3em #888}} padding:2px; width:200px; vertical-align:top; background:rgb(230, 230, 230); background:rgba(230, 230, 230,.001); border:solid 1px  rgb(0, 0, 0); color: rgb(0, 0, 0);"
|
'''[[User:Mazu|<span style="color: rgb(0, 0, 0); text-decoration:underline">Main Page</span>]]'''<br/>
<small>''My main page''</small>
|}
|}
|}
 
=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