index.
-
Posts
15 -
Joined
Content Type
Profiles
Forums
Events
Bug Tracker
Applications
Posts posted by index.
-
-
On 5/18/2017 at 3:55 PM, Huugo said:
I liked it, good job
On 5/19/2017 at 2:27 AM, Page said:I love ur friends list and i want to thank you and odin for my xat space.
Thank you so much.
On 5/22/2017 at 6:02 AM, Majora said:I suppose I'm a little late to reply, but nice work, don't see such good original profile work often.
On 5/22/2017 at 9:20 AM, ANGY said:I love this tumblr
Thank you all!
On 5/20/2017 at 6:32 PM, Ju4nFX said:Tutorial for the css, on xat.com/me please...
Do you mean where to paste the CSS? if so, you need to activate the "Advanced mode" and paste the css in the first field. Check this screenshot: http://prntscr.com/fbb3kf/direct
Next time try searching it online, or ask on the Help xat.
1 hour ago, TrueRedDevil said:Honestly, I wish I had even half the coding skill you had.
And I wish I wasn't so hell bent on always using my own stuff so I could use these ;_;
wow, Danneh praised me, I can happily die now
-
Just now, SlOom said:
Hmm right.. and simple question? Why do you hide background with an encoding? (Example: \68\74\74\70\3a\)
At the time I didn't know I was going to share it, but it was supposed to make it harder for thieves to change stuff
-
@SlOom nope.png (at least not right now)
-
- Popular Post
- Popular Post
welp, maybe I should dump everything I've made so far, before I delete it without knowing.
Most of them are partially completed (because I'm lazy) and also hard to edit because of the verbose css, but it may be useful to just crop out a few chunks of css and paste on your own xatspaces. You're free to do anything you want with it after all.
Before asking questions about how to edit stuff, make sure to right click > inspect on the element you want to change, and try to figure it out by yourself.
-----------------------------------------------------------------------------------------------------
Requires (me) power!
Don't forget to remove the 'body{' at the beginning of each css file!------------------------------------------------------------------------------------------------------
Old stuff:
1. one of my first xatspaces
=> https://codepen.io/anon/pen/pPpmEd2. facebook
=> https://codepen.io/anon/pen/xdpvLp3. navigation tabs (incomplete)
=> https://codepen.io/anon/pen/JNMQXY
4. login page
=> https://codepen.io/anon/pen/KmQPPm5. phone (incomplete)
=> https://codepen.io/anon/pen/NjORwj
Advanced stuff (verbose css):
6. was used on a xs contest (change --scheme for different accent color)
=> https://codepen.io/anon/pen/MmrdRz7. tumblr-ish xatspace (updated 28/07)
=> https://codepen.io/anon/pen/YxyMLm8. friends list
=> https://codepen.io/anon/pen/xdpvMz9. futuristic clock (inspired by David Majdandzic)
=> https://codepen.io/anon/pen/BZOGOw
Misc. (old stuff I won't touch again)
homepage => https://codepen.io/anon/pen/JJaxma
??? => https://codepen.io/anon/pen/WOgPov
material xatspace => https://codepen.io/anon/pen/QgVYRp
page navigator => https://codepen.io/anon/pen/RgYvWe
I may update this post in the future in case I find more stuff I made in the past.
ps: I appreciate all the compliments, thank you
On 4/22/2017 at 1:00 AM, Littlekouhai said:I cant get the first to download for what ever reason, could I get the css code? Your work is fantastic btw!
-
21
-
- Popular Post
- Popular Post
let the memes begin
-
15
-
- Popular Post
- Popular Post
I hope you like circles.
CSS:
background:var(--bg)}/* ❮/❯ with ❤ by index - iiiiiiii (409914266) */:root{--bg:#000;--scheme:#5f55de;--icon:url("\68\74\74\70\3a\2f\2f\69\36\37\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\39\6b\6f\77\65\76\2e\70\6e\67");--pos:18px;--border:3px;--time:4s;--tr:20,80px;--delay:0ms;--x:10px;display:table;margin:auto;overflow:hidden}:root:after{content:'';position:absolute;background:linear-gradient(0deg,var(--scheme)-500%,transparent);width:100%;height:50%;bottom:0;left:0}_:-ms-lang(x),:root{background:#000 url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\39\6a\66\76\36\39\2e\70\6e\67")no-repeat center}_:-ms-lang(x),#xatstyme:not(iframe){display:none}::selection{background:#000}*{margin:0;padding:0;outline:0;text-decoration:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-webkit-font-smoothing:subpixel-antialiased;text-rendering:optimizeLegibility;box-sizing:border-box;list-style:none}:root,body{height:100%}body{display:table-cell;vertical-align:middle}[class^="\26"],[id^="\26"]{display:flex;justify-content:center;align-items:center}[class$="\2d"],#_- li a{position:relative}[id$="\26"],[id="\26_\26"] li{position:fixed}._{width:calc(var(--x)*38);height:calc(var(--x)*38);background:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\39\6a\66\76\36\39\2e\70\6e\67")no-repeat center;margin:calc(var(--x)*3)}._{box-shadow:inset 0 0 0 var(--border) #fff}[id="\26_\26"],[id="\26_\26"] li{top:0;right:0;left:0;bottom:0}[id="\26_\26"]{z-index:-1;width:100%;height:100%}[id="\26_\26"] li{border:3px solid #000;margin:auto;width:calc(var(--x)*30);height:calc(var(--x)*30);box-shadow:inset 0 0 0 10px rgb(29, 27, 33),inset 0 0 0 15px rgb(4, 4, 4),inset 0 0 0 20px var(--scheme),inset 0 0 0 25px #fff}[id="\26_\26"] li:nth-child(n){animation:_ var(--time) infinite linear;-moz-animation:_ var(--time) infinite linear}[id="\26_\26"] li:nth-child(0){--time:4s}[id="\26_\26"] li:nth-child(1){--time:3s}[id="\26_\26"] li:nth-child(2){--time:2s}@keyframes _{from{transform:scale(0)}to{transform:scale(6);filter:opacity(0)}}@-moz-keyframes _{from{transform:scale(0)}to{transform:scale(6);filter:opacity(0)}}#_-{width:calc(var(--x)*15);height:calc(var(--x)*15);margin:-30px 0 0 -220px}#_-,#_- > a,#_- li,[id="\26m"],[id="\26m"] a{position:absolute}#_- > a{opacity:0;z-index:-1;width:calc(var(--x)*6);height:calc(var(--x)*6);margin:-75px 0 0 -75px;border-radius:500px;background:url("\68\74\74\70\3a\2f\2f\69\36\36\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\66\78\67\6b\30\36\2e\6a\70\67")no-repeat center,var(--bg);overflow:hidden;box-shadow:inset 0 0 0 var(--border) #fff}#_-:target > a{--border:0;background:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\73\71\69\31\71\66\2e\70\6e\67")no-repeat center,#fff}[id="\26\61\64\64"],#_- li,#_- a,#_- > a,._,[id="\26_\26"] li{border-radius:50%}#_-:not(:target) > a:first-of-type,#_-:target > a:last-of-type{opacity:1;z-index:2}#_- li,#_- > a,#_-{left:50%;top:50%}#_- li{width:55px;height:55px;margin:-72px 0 0 -72px;transition:transform 500ms;z-index:1}#_- li:hover:not(:last-child) a{filter:invert(1);box-shadow:none;}#_- li:active{}#_-:target > li:nth-child(n){transition-delay:var(--delay);transform:translate(var(--tr))}#_-:target > li:nth-child(3){--delay:150ms;--tr:20px,80px}#_-:target > li:nth-child(4){--delay:75ms;--tr:60px,135px}#_-:target > li:nth-child(5){--delay:75ms;--tr:40px,-100px}#_- li a{transition:all .2s;box-shadow:inset 0 0 0 var(--border) #fff;display:block;width:100%;height:100%}#_- > a:hover{box-shadow:inset 0 0 0 var(--border) var(--scheme)}#_- li:nth-child(n) a{background:#000 var(--icon)no-repeat center var(--pos)}[id="\26m"]{width:80%;height:80%;top:-100%;transition:all .8s ease-in-out;left:0;right:0;margin:auto;z-index:3}[id="\26m"]:target{top:10%}[id="\26m"] a{top:calc(50% - 270px);right:calc(50% - 420px)}[id="\26m"] a:active{transform:scale(.9)}iframe{border:1px solid #fff}#_- > li:nth-child(5) a{background-color:var(--scheme);box-shadow:none;width:calc(var(--x)*4);height:calc(var(--x)*4);--pos:-70px}#_- > li:nth-child(5):hover a{background-color:#000;box-shadow:inset 0 0 0 3px var(--scheme);}[id="\26\61\64\64"]{width:100%;height:100%;background:#000;border:2px solid var(--scheme);opacity:0;transition:all .8s}[id="\26\61\64\64"] div{font:500 13px 'Arial',sans-serif}[id="\26\61\64\64"]:target{opacity:1}#_-> li:nth-child(4){--pos:-26px;
HTML:
<div class="_"> <ul id="_-"> <a href="#_-"></a> <a href="#"></a> <li><a href="#&m"></a></li> <li><a href="http://xat.com/web_gear/chat/editprofile.php"></a></li> <li><a href="#&add"></a></li> </ul> <div id="&add"> <div style="color:#fff;"> <h1>Anar</h1> <p>Type <span style="border-radius:30px;background:var(--scheme);color:#fff;-webkit-user-select:all;user-select:all;padding:.2em.8em">/f1313</span> to add me on xat.</p> </div> </div> </div> <div id="&m"> <a href="#"><img src="http://i68.tinypic.com/l9tg6.png"></a> [youtube:853:480:-mfcHxuP6jI:autoplay=1&loop=1&controls=0&disablekb=1&showinfo=0&start=0] </div> <ul id="&_&"> <li></li> <li></li> <li></li> </ul>
- If you don't like purple then change the variable "--scheme" to whatever color you like
- A lot of the features aren't supported by MS Edge nor Internet Explorer, so it'll only show the logo on the middle (you can change it if you want) and the music playing.
I'll probably add more stuff until the deadline
-
7
-
-
- Popular Post
- Popular Post
Hello!
INNER:
BUTTON: #5C0CFF
OUTER-CSS:
:root{background:var(--y),var(--x)}/*CSS by iiiiiiii (409914266) - [ɪɴᴅᴇx]*/*{outline:0}*{text-decoration:none !important}:root{--x:url("\68\74\74\70\3a\2f\2f\69\2e\69\6d\67\75\72\2e\63\6f\6d\2f\58\5a\57\46\31\55\4a\2e\6a\70\67") top center / cover fixed}:root{--y:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\32\31\79\34\32\30\2e\70\6e\67") center repeat-y}:root{--p:url("\68\74\74\70\3a\2f\2f\69\36\34\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\72\6d\34\76\30\6e\2e\70\6e\67")no-repeat center top}table:nth-of-type(3) tr td:nth-child(even):not(:last-of-type),div[style="height: 16px"],table:nth-of-type(3) td:last-child,.btext2 img,[class*="_c"] img,tr[height="10"],[style="padding-top:24px"],table[height="10"],#twitter-widget-0,iframe[style^="border:none"],table:nth-of-type(4) td[width^="10"], td:empty{display:none !important}td[width='40'] img,td[width="2%"] img{opacity:0 !important}td[width="2%"] img,td[width="2%"] a{width:57px}td[width="2%"] img{height:57px}td[width="2%"] a{display:inline-block}td[width="2%"] a:nth-child(1){background:var(--p) -2px}td[width="2%"] a:nth-of-type(2){background:var(--p) -60px}td[width="2%"] a:nth-of-type(3){background:var(--p) -120px}td[width="2%"] a:nth-of-type(4){background:var(--p) -188px}td[width="2%"] a:nth-of-type(5){background:var(--p) -257px}td[width="2%"] a:nth-of-type(6){background:var(--p) -319px}td[width="2%"] a:nth-of-type(7){background:var(--p) -379px}td[width="2%"] a:nth-child(n):hover{box-shadow:inset 0 0 0 3px #fff}#chat embed{background:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\66\66\34\74\39\78\2e\70\6e\67")}td[width="2%"][rowspan]{position:absolute}td[width="2%"] a{transition:all .3s ease-in-out}.btext2,table[height="24"]{background:rgba(0,0,0,0.3)}.btext,.btext2{text-transform:uppercase}[class*="_c"],table[height="51"]{background:none !important}[class*="_c"]{border:none !important}:root:after,:root:before{content:''}:root:after,:root:before{z-index:-1}:root:after,:root:before{position:fixed}:root:after,:root:before{width:1px}:root:after,:root:before{top:0}:root:after,:root:before{height:100vh}:root:after,:root:before{background:#fff}:root:after{right:calc(50% + 365px)}:root:before{right:calc(50% - 366px)}td[width="2%"] a{border-radius:50%}td[width="2%"] a{background-color:rgba(255,255,255,0.3) !important}:root:after,:root:before{mix-blend-mode:overlay}table:nth-of-type(3) td[align="center"]:nth-of-type(3),.btext{position:relative}table:nth-of-type(3) td[align="center"]:nth-of-type(3){left:50px}td[width="2%"][rowspan]{left:5px}td[width="2%"][rowspan]{top:100px}table[height="51"]{padding:0.7em}.btext{bottom:15px}.btext{margin:0 10px 0 0}.btext{padding:0.5em 1em}.btext{border-radius:50px}.btext{background:#7745f1}.btext:hover{background:#5c3da9}.btext{cursor:pointer}.btext2{display:flex}.btext2{align-items:center}.btext2{justify-content:center}.btext2 td:nth-child(18) a img{display:block !important;}
NOTE: Enable the chat box transparency
-
11
-
- Popular Post
- Popular Post
Hello!
INNER:
Button: #FFFFFF
OUTER:
:root{background:var(--y), var(--x)}/*by iiiiiiii (409914266) - [ɪɴᴅᴇx]*/:root{--x:url("\68\74\74\70\3a\2f\2f\69\2e\69\6d\67\75\72\2e\63\6f\6d\2f\58\71\46\71\43\4f\7a\2e\6a\70\67") top center fixed / cover}:root{--y:url("\68\74\74\70\3a\2f\2f\69\36\33\2e\74\69\6e\79\70\69\63\2e\63\6f\6d\2f\32\31\79\34\32\30\2e\70\6e\67") center fixed repeat-y}table:nth-of-type(3) tr td:nth-child(even):not(:last-of-type){display:none !important}div[style="height: 16px"]:first-of-type{border-top:1px solid rgba(255, 255, 255, 0.3);}-
10
-
-
12 hours ago, Alexis said:
Wow, this is really good. Can't seem to download the third one for some reason. Can someone give me the css code to that one? Thank you!
-
1 hour ago, Elie said:
Fantastic, but to be used as xatspaces, some things need to be changed.
of course! you can change as much as you want
-
36 minutes ago, Five said:
long time admirer and a big fan of your work.
p.s: i love you.
thank you!!
-
- Popular Post
wow, Danneh praised me, I can happily die now
Background and Banner Contest for Feedback Chat
in Contests and Events
Posted · Edited by index.
Added the outer background
I'm a bit rusty with gfx but here ya go:
I'll do the rest soon (maybe, probably, most likely never)