Jump to content

CSS background/XATSpace


Bau

Recommended Posts

  • Advanced Members

Hello, I hope these things are useful, who wants to use it, Css Background/XATSpace! Chat Group! xat.com/
CSS Background - Credit by: @Bau

Spoiler

background-color: #000000; background-color: #70F1FF; background-color: #70F1FF; background:  right 65px no-repeat, left 65px no-repeat, url(Inner  Image/Giff LINK HERE)center 65px no-repeat,  url(OUTER  Image/Giff LINK HERE)fixed center 0px}@-webkit-keyframes f{0%{opacity:0}to{opacity:1}}@keyframes  f{0%{opacity:0}to{opacity:1}}embed{-webkit-animation:f 12.5s ease-in 1 forwards}embed{animation(worry) 9.5s SlideUp 1 forwards}embed{box-shadow:  0px 0px 30px #70F1FF} embed{border:dashed #70F1FF}  a:link,a:visited{color:#70F1FF!important}td{color:#70F1FF!important}strong{color:#FF0000!important}h2{background:url(Bau/iBau)  no-repeat 11px center}embed{background: url(Fonduri) 0px 608px no-repeat}h1{background:url(Name of the xat Link, image or giff)  no-repeat 11px center}h1{text-indent:-9999px}*{cursor: url(Name of the Cursor Link, image or giff),auto;


CSS Background Credit by: @Laming

Spoiler

background-color:#000000; background:url(OUTER  Image/Giff LINK HERE); background-size:cover} /* Credits: xLaming */ [name='chat']{-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 20%, transparent 100%)} img[height='49'],h1{background:#000000} h1{position:absolute} h1{top:0} h1,img[height='49']{height:50px}  table[height='30'],table[height='10'],table[height='51']{background:transparent} h1{width:185px} h1{border-radius: 0px 0px 10px 0px} img[height='32']{border-radius:20px} [name='chat']{background:url(Inner  Image/Giff LINK HERE)} [name='chat']{opacity:0.9} img[height='32']{background:#000000} table[height='51']{width:60%} img{border:20px} *{text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black} .vbmenu_control,iframe[allowtransparency='true'],.twitter-share-button,[colspan='27']{display:none;


CSS background - Credit by: @iSanty

Spoiler

{background-color: #000000; BACKGROUND-POSITION: Center; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(#outerrrhere)}#chat embed{background:url('#innerrrhere');}

xat space - Credit by: @JasonOficial

Spoiler

background:#f8f8f8;} *{padding:0; margin:0; box-sizing:border-box;} :root{--font: 'Abel', sans-serif;} a{display:inline-block; text-align:center; text-decoration:none;} #main-jason{width:100%; height:100vh; background:url(noise.png)top left repeat ,radial-gradient(#a9c9ff, #adbfff, #aa91ff 90%); font-family:var(--font); color:white; font-size:1em; overflow:hidden; position:relative; min-width:1080px;} #home-jason{width:100%; height:100vh; position:absolute; top:0; left:0;} .container-jason{width:480px; height:480px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); border:solid 5px white; border-radius:50%;} .navbar-jason{width:100%; height:100%; position:absolute;} .btn-navbar-jason{width:67px; height:67px; line-height:67px; font-size:2em; color:#ea638c; border-radius:50%; background:white; box-shadow:0 0 0 16px rgba(255,255,255,0), 0 0 0 33px rgba(255,255,255,0); position:relative;} .btn-navbar-jason:hover{animation:pulse .5s infinite ease-in-out;}  @keyframes pulse{0%{box-shadow:0 0 0 0 white, 0 0 0 0 white;} 100%{box-shadow:0 0 0 8px transparent, 0 0 0 16px transparent;}}  #position-1{transform:translate(420px, 101px);} #position-2{transform:translate(370px, 206px);} #position-3{transform:translate(277px, 307px);} #position-4{transform:translate(135px, 388px);} .center-jason{width:380px; height:380px; border-radius:50%; padding:10px; background:white; position:relative; top:50%; left:50%; transform:translate(-50% , -50%); overflow:hidden;} .img-princ-jason{width:360px; height:360px; border-radius:50%; position:absolute;} .title-jason , .subtitle-jason{position:relative; display:inline-block; background:rgba(255,255,255,.4); border-radius:4px; line-height:40px; text-align:center;} .title-jason{margin-top:160px; width:180px; margin-left:90px;} .subtitle-jason{width:260px; margin-top:10px; margin-left:50px; font-size:1.2em;} .social-jason{width:220px; height:50px; margin-top:20px; margin-left:70px; position:relative; display:flex; justify-content:center;} .btn-social-jason{width:50px; height:50px; margin:0 10px; background:rgba(255,255,255,.4); border-radius:50%; overflow:hidden;} #footer-jason{width:100%; position:absolute; display:inline-block; text-align:center; bottom:50px; font-size:.75em;} #video-jason, #friends-jason, #galery-jason{width:100%; height:100vh; background:rgba(0,0,0,.75); visibility:hidden; overflow:hidden; opacity:0; transition:all 0.3s; z-index:100; position:absolute;}  .menu-page-jason{position:absolute; width:460px; height:50px; right:30px; top:20px;} .btn-page-jason{width:100px; height:40px; line-height:40px; margin:0 5px; background:white; color:#ea638c; box-shadow:0 5px #ea638c; border-radius:4px; text-transform:uppercase; transition:all .4s; margin-top:5px} .btn-page-jason:hover{box-shadow:0 5px rgba(234,99,40,.4), 0 0 30px 20px rgba(0,0,0,.2);  background:#ea638c; color:white;} .box-video-jason{width:500px; height:283px; position:relative; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:0 10px #ea638c;}   #content-jason-3:target #friends-jason, #galery-jason{visibility:hidden; opacity:0;}  #content-jason-3:target #video-jason{visibility:visible; opacity:1;}   #content-jason-2:target #video-jason, #galery-jason{visibility:hidden; opacity:0;}  #content-jason-2:target #friends-jason{visibility:visible; opacity:1;}   #content-jason-1:target #video-jason, #friends-jason{visibility:hidden; opacity:0;}  #content-jason-1:target #galery-jason{visibility:visible; opacity:1;}   .bloco-friends-jason{width:350px; height:570px; margin-top:120px; margin-left:40%; border-left:solid 1px #ea638c; padding-left:20px;} .box-friends-jason{width:280px; height:100px; margin-bottom:17px; text-align:left; position:relative;} .img-friends-jason{width:100px; height:100px; padding:5px; border-radius:50%; background:#ea638c; position:relative; z-index:10;} .box-friends-jason h2{position:absolute; width:90px; height:40px; top:30px; left:50px; background:white; border-radius:50px; line-height:40px; padding-left:0; font-size:.6em; color:#ea638c; transition:all .3s;} .simbol-jason{width:40px; height:40px; display:inline-block; position:relative; right:-15px; text-align:center; font-size:2em; line-height:45px;} .box-friends-jason:hover h2{width:200px; padding-left:60px; font-size:1em; line-height:40px;} .box-galery-jason{width:530px; height:100vh; position:relative; overflow-y:scroll; padding:10px 10px; top:0; left:10%; background:black; border-right:5px solid #ea638c; border-left:solid 5px #ea638c;} .box-img-galery-jason{width:474px; height:380px; overflow:hidden; margin:10px 10px; display:inline-block;} .img-jason{width:474px; height:100%; filter:grayscale(1); transition:all .4s; cursor:pointer;} .box-img-galery-jason:hover .img-jason{transform:scale(1.4) rotate(8deg); filter:grayscale(0);}   ::-webkit-scrollbar{width:5px; background:white;}  ::-webkit-scrollbar-thumb{background:#aa91ff;

HTML . .. 

[font:Abel]

 

<div id="main-jason">

 <div id="content-jason-1">

 <div id="content-jason-2">

 <div id="content-jason-3">

 <div id="home-jason">

 <div class="container-jason">

 <div class="navbar-jason">

 <a class="btn-navbar-jason" id="position-1" href="#content-jason-3">♬</a>

 <a class="btn-navbar-jason" id="position-2" href="#content-jason-1">❖</a>

 <a class="btn-navbar-jason" id="position-3" href="#content-jason-2">❤</a>

 <a class="btn-navbar-jason" id="position-4" href="#">✎</a>

 </div>

 <div class="center-jason">

 <img class="img-princ-jason" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="360/" />

 <h1 class="title-jason">Gabriela</h1>

 <span class="subtitle-jason">Welcome my xatspace!</span>

 <div class="social-jason">

 <a class="btn-social-jason" href="https://www.facebook.com/">

 <img src="https://s25.postimg.org/i08k3v6of/icon-face.png" width="50/" /></a>

 <a class="btn-social-jason" href="https://www.twitter.com/">

 <img src="https://s25.postimg.org/hnh5xp3u7/icon-tw.png" width="50/" /></a>

 <a class="btn-social-jason" href="https://www.instagram.com/">

 <img src="https://s25.postimg.org/e3v87vten/icon-inst.png" width="50/" /></a>

 </div>

 </div>

 </div>

 <div id="footer-jason">

 <span>© 2017 BY JASON-DESIGNER<br />

 xat.COM/CENTRALDOSPLAYERS</span>

 </div>

 </div>

 <div id="video-jason">

 <div class="menu-page-jason">

 <a class="btn-page-jason" href="#main-jason">home</a>

 <a class="btn-page-jason" href="#content-jason-1">galery</a>

 <a class="btn-page-jason" href="#content-jason-2">friends</a>

 <a class="btn-page-jason" href="http://xat.me/edit">edit</a>

 </div>

 <div class="box-video-jason">

 [youtube:500:283:_Yhyp-_hX2s:start=0&end=0&autohide=1&autoplay=1&controls=0&disablekb=1&loop=1&modestbranding=1&rel=0&showinfo=0&vq=large]

</div>

</div>

<div id="friends-jason">

<div class="menu-page-jason">

<a class="btn-page-jason" href="#main-jason">home</a>

<a class="btn-page-jason" href="#content-jason-3">music</a>

<a class="btn-page-jason" href="#content-jason-1">galery</a>

<a class="btn-page-jason" href="http://xat.me/edit">edit</a>

</div>

<div class="bloco-friends-jason">

<a class="box-friends-jason" href="http://xat.me/">

<img class="img-friends-jason" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />

<h2>Gabriela <span class="simbol-jason">❤</span></h2>

</a>

<a class="box-friends-jason" href="http://xat.me/">

<img class="img-friends-jason" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />

<h2>Gabriela <span class="simbol-jason">❤</span></h2>

</a>

<a class="box-friends-jason" href="http://xat.me/">

<img class="img-friends-jason" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />

<h2>Gabriela <span class="simbol-jason">❤</span></h2>

</a>

<a class="box-friends-jason" href="http://xat.me/">

<img class="img-friends-jason" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />

<h2>Gabriela <span class="simbol-jason">❤</span></h2>

</a>

<a class="box-friends-jason" href="http://xat.me/">

<img class="img-friends-jason" src="https://s25.postimg.org/4w2zr79hr/img-princ.jpg" width="100/" />

<h2>Gabriela <span class="simbol-jason">❤</span></h2>

</a>

</div>

</div>

<div id="galery-jason">

<div class="menu-page-jason">

<a class="btn-page-jason" href="#main-jason">home</a>

<a class="btn-page-jason" href="#content-jason-3">music</a>

<a class="btn-page-jason" href="#content-jason-2">friends</a>

<a class="btn-page-jason" href="http://xat.me/edit">edit</a>

</div>

<ul class="box-galery-jason">

<li class="box-img-galery-jason">

<img class="img-jason" src="https://s25.postimg.org/3tst8nye7/img-galery.jpg" height="380/" />

</li>

<li class="box-img-galery-jason">

<img class="img-jason" src="https://s25.postimg.org/3tst8nye7/img-galery.jpg" height="380/" />

</li>

<li class="box-img-galery-jason">

<img class="img-jason" src="https://s25.postimg.org/3tst8nye7/img-galery.jpg" height="380/" />

</li>

<li class="box-img-galery-jason">

<img class="img-jason" src="https://s25.postimg.org/3tst8nye7/img-galery.jpg" height="380/" />

</li>

</ul>

</div>

</div>

</div>

</div>

</div>



Who has something to add, css background, xatspace, send private message as I add you here in the list! Thank you.

Edited by Bau
  • Cool 1
Link to comment
Share on other sites

×
×
  • 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.