seen from China
seen from Russia
seen from Germany
seen from United States
seen from China
seen from Spain
seen from Germany
seen from United States
seen from Malaysia
seen from Australia
seen from Türkiye
seen from United Kingdom
seen from Brazil
seen from Malaysia
seen from China
seen from Norway
seen from United States
seen from United Kingdom
seen from Japan
seen from Brazil
Pack de Tablillas: Veu Noctis
ES:
Muestra de las tablillas hechas para el foro @veunoctis. Dentro de las tablillas se destacan la tablilla de administración, de afiliados, normativa, registro y ficha de personaje.
Todas son tablillas simples en general. Se me permitió jugar con los diseños y hacerlo más afable con el usuario posible.
New Tabs Codes
Here is a new tabs code i made.
It has a glitter border, and cool flip animation with an eclipse shape. and a custom font included
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
This means no redistrubition of this code, and must have a credit to me if you use it. Do not claim code as your own.
Insert this code under your <head> tag
<style> @font-face { font-family: 'Dandelion'; src: url('http://static.tumblr.com/blpgwiz/hgJm8ckkk/dandelion_in_the_spring-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .Chandler { font-family: 'Dandelion'; height: 105px; width: 30px; color: #FF69B4; background-color: #fff; /* background color of tab*/ border: 10px solid black; -moz-border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; /* Firefox */ -webkit-border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; /* Safari */ -o-border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; /* Opera */ border-image:url(http://static.tumblr.com/blpgwiz/Naqmiqlkv/tumblr_mhls9gdhn11riyn3ko1_400.gif) 30 30 stretch; position: fixed; margin-top: 160px; /*How far from the top*/ Left: 5px; z-index:999999999; -webkit-transition: 0.6s ease-in-out; padding: 10px; -moz-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ -webkit-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ box-shadow: 0px 0px 5px 2px black;/*Glow color, Delete this line and the two below if you do not want glow */ } .Monica { font-family: 'Dandelion'; width: 300px; /*If you adjust with width, make sure you adjust the margin left as well*/ height: 250px; overflow: auto; text-shadow: 0 0 0.1em #000; border-top-left-radius: 50px; border-bottom-right-radius: 50px; background: #fcf; /*content background color*/ border: 3px #fcf solid; /*Border color and style of the box */ position: fixed; margin-top: -10px; /*If you have a border, at the border number onto this number*/ Left: -350px; /*This must be negative whatever the width is plus 10px */ z-index:999999999; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; padding: 10px; -moz-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ -webkit-box-shadow: 0px 0px 5px 2px black; /*Glow color, Delete this line and the two below if you do not want glow */ box-shadow: 0px 0px 5px 2px black;/*Glow color, Delete this line and the two below if you do not want glow */ } .Chandler:hover .Monica { z-index:1000; left: 90px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; overflow: auto; } .Monica::-webkit-scrollbar { width: 10px; background-color: #fcf; } .Monica::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #fff; } .Monica::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background-color: #fcf; } .Monica::-webkit-scrollbar-corner { background: #transparent; } .Monica:hover { z-index:1000; left: 100px; -webkit-transition: 0.6s ease-in-out; overflow: auto; } .rachel{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); margin-top: 30px; font-size: 30px; position: absolute; margin-left: -15px; text-align: center; } </style>
Now insert this code under your <body> tag
<div class="Chandler" style="margin-top: 25px;"> <div class="rachel"> Tab Name </div> <div class="Monica"> <center> INSERT YOUR TAB CONTENT HERE, To find this, pretty ctrl+f and search lewport </div> </div>
Customizing the colors and images
Customizing the tab
All these are to customize the tab (where it says tab, before you hover) MUST MAKE SURE YOU ARE UNDER THE .Chandler TAB
Blue- The color the the tab text Pink- The background color Green- The image of the border Yellow- how far from the tob the tab is
Customizing the Slide Out Box
This is to customize the box that has your content on it, that appears when you hover over the tab
MUST MAKE SURE YOU ARE UNDER THE .Monica DIV CSS
Pink- The width of the box Purple- The height of the box Blue- The background of the box Green- The border color the box
Customize the scroll bar
This customizes the colors of the scrollbar that appears in the box if your content is more than the height
Pink- The background color of the actual scrollbar Green- The color of the track, or the background of the scrollbar
