Jump to content
xat 1.64 public beta out! See changes ×

index.

Members
  • Posts

    15
  • Joined

About index.

Personal Information

  • xat Username
    iiiiiiii

Recent Profile Visitors

3,568 profile views

index.'s Achievements

Apprentice

Apprentice (3/14)

  • Week One Done
  • One Month Later
  • One Year In
  • Conversation Starter
  • First Post

Recent Badges

98

Reputation

  1. I'm a bit rusty with gfx but here ya go: I'll do the rest soon (maybe, probably, most likely never)
  2. index.

    Free xatspace!

    Thank you all! 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. wow, Danneh praised me, I can happily die now
  3. index.

    Free xatspace!

    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
  4. index.

    Free xatspace!

    @SlOom nope.png (at least not right now)
  5. index.

    Free xatspace!

    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/pPpmEd 2. facebook => https://codepen.io/anon/pen/xdpvLp 3. navigation tabs (incomplete) => https://codepen.io/anon/pen/JNMQXY 4. login page => https://codepen.io/anon/pen/KmQPPm 5. 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/MmrdRz 7. tumblr-ish xatspace (updated 28/07) => https://codepen.io/anon/pen/YxyMLm 8. friends list => https://codepen.io/anon/pen/xdpvMz 9. 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 https://codepen.io/anon/pen/BRYBVR
  6. I hope you like circles. LIVE PREVIEW 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. LINK: http://i.imgur.com/lEjcPIG.png
  8. Hello! LIVE PREVIEW 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
  9. 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. index.

    Free xatspace!

    http://pastebin.com/9WtcRPU0
  11. index.

    Free xatspace!

    of course! you can change as much as you want
  12. index.

    Free xatspace!

    I'll be sharing a few xatspaces I've made, feel free to use/modify them. Enjoy! LINK LINK LINK LINK >>>>PART 2<<<<
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.