User:Mazu/Sandbox: Difference between revisions
m (→Box Shadows: updated to reflect the change to universal format.) |
|||
(13 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
__TOC__ | __TOC__ | ||
==My own personal 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. | |||
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 | 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 | http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/7 (PX's Page)<br> | ||
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/8 | http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/8 <br> | ||
http://wiki.urbandead.com/index.php/User:Mazu/Sandbox/9 (Danger Map | 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 183: | Line 197: | ||
==Box Shadows== | ==Box Shadows== | ||
{{codeInline|<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=" | {| 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=" | {| 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=" | {| 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=" | {| 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=" | {| 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 215: | Line 229: | ||
{| style=" | {| 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=" | {| 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=" | {| 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 680: | Line 693: | ||
|<div style="width:50px; height:25px; background: rgb(200,200,200); Float:left; text-align:center;">Fourth</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> | </div> |
Latest revision as of 18:13, 12 July 2013
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:
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
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
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
Punctuality | |
Mazu believe(s) in being on time.
The current time is 08:00 on Sunday, December 22, 2024 (UTC) |
{{DateandTime| Insert name here }}
Scrolling title
Got it to work
moved to a new testing site here
Opacity
Contains all aliases and known facts about "Mazu" |
All discussion about "Mazu" goes here |
Outdated reports and information on "Mazu" |
Contains all aliases and known facts about "Mazu" |
All discussion about "Mazu" goes here |
Outdated reports and information on "Mazu" |
Contains all aliases and known facts about "Mazu" |
All discussion about "Mazu" goes here |
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
Moved to a larger testing site here
New background:
Possible transparent background idea?
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:
|
Display Box
Stolen from Aichon.
• Main
• Characters
• Sandbox
• Talk
• Userscripts
• Other
Rotation
Didn't think it worked on the wiki Loris Ipsum
Loris Ipsum
Upside down sig!
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.
|
|
Messing with my box links
Added box shadow to links
Philosophe Knights |
Philosophe Knights |
Philosophe Knights |
Box links faded when on that page
This code might be handy. At least the template anywho.
ЯЭV€NΛИ
{{switch|{{{width}}}|case: big=500px|case: small=100px|default={{{width|250px}}} }}
This should be a fun undertaking. Needs 7 columns and 4 rows I think.
|
||||||||
|
|
|||||||
|
|
|||||||
|
|
Needs 4 tables of varied cell width, 3 cells might work best for the tables with two boxes.
|
|
|
|
|
|
|
|
Stacking Div's beside each other
First
|
Second
|
Third
|
Fourth
|
|
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.