css animelist

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

css animelist

Mensagem por clean em Qui Abr 02, 2015 10:36 pm

Modelo 01

Código:


@charset "utf-8";
/* CSS Document */
@import "https://dl.dropboxusercontent.com/u/27076905/Animes/css/covers/anime.css";
@import "http://dl.dropbox.com/u/102421246/MAL/CSS/AnoHanaCustom2/topbarAnohana.css";
 @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
 @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";

 /*
 Fundo principal e cursor
 */

 body {
 background-image: url("http://i45.tinypic.com/2q3t10z.png"), url(" http://i57.tinypic.com/28md5cx.jpg"); /* foto 1 = 5 pessoas em pe / fundo nuvens e menino e menina correndo foto 2 =
nova http://i62.tinypic.com/2q1ewqt.jpg
antiga http://i45.tinypic.com/2e4byvl.jpg
estrelas com fundo azul http://i59.tinypic.com/33u2vkl.jpg
Estrelas e menina --> http://i57.tinypic.com/28md5cx.jpg
 */
 /*cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto;*/
 background-attachment: fixed;
 background-clip: border-box;
 background-color: transparent;
 background-position: right 57% bottom, 0 0;
 background-repeat: no-repeat no-repeat;
 background-size: cover, cover;
 font-family: candara;
 }


 /*
 cursor para os links
 */
 a {
 color: #FFFFFF;
 /*cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto;*/
 text-shadow: none;
 }
 a:hover {
 color: #FF4000;
 /*cursor: url("http://cur.cursors-4u.net/nature/nat-8/nat793.cur") 1 2, auto;*/
 text-shadow: 0 1px rgba(255, 255, 255, 0.15);
 }



 /*
 MARCAS FAVORITAS (flor por padrÃÃÃÃÃão)
ÃÃÃÃÃà Esta parte ÃÃÃÃÃé responsÃÃÃÃÃável pelos Ãnico Hana favs pontos. Por padrÃÃÃÃÃão ele marca Death Note, o mais popular anime. Se vocÃÃÃÃÃê quiser adicionar seus favoritos, veja como:

1. Copiar o seguinte:

ÃÃÃÃÃà , A [href = ""]

ÃÃÃÃÃà e colÃÃÃÃÃá-lo sob ele na frente do primeiro {nos cÃÃÃÃÃódigos abaixo.

ÃÃÃÃÃà 2. Adicione urls do seu anime favorito no MyAnimeList nas citaÃÃÃÃÃçÃÃÃÃÃões na parte que vocÃÃÃÃÃê acabou de colar.

ÃÃÃÃÃà 3. Salve e pronto! A flor deve aparecer no anime ou linha de mangÃÃÃÃÃá.
 */

 a[href="http://myanimelist.net/anime/15583/Date_A_Live"]{
 background-attachment: scroll;
 background-image: url("http://i48.tinypic.com/2ludp8m.png");
 padding-left: 25px !important;
 background-clip: border-box;
 background-color: transparent;
 background-position: left top;
 background-repeat: no-repeat;
 background-size: contain;
 position: relative;
 }


 /*
 FAVORITO Cores de texto de tÃÃÃÃÃítulos
ÃÃÃÃÃà Cores de seu favorito animes em uma cor ÃÃÃÃÃúnica. Por padrÃÃÃÃÃão, o Death Note ÃÃÃÃÃé colorido ouro para ir com as opÃÃÃÃÃçÃÃÃÃÃões acima. O nÃÃÃÃÃúmero 1535 ÃÃÃÃÃé encontrado dentro url Morte de Nota sobre MyAnimeList por pesquisÃÃÃÃÃá-lo. Cada tÃÃÃÃÃítulo anime e mangÃÃÃÃÃá tem um nÃÃÃÃÃúmero ÃÃÃÃÃúnico. VocÃÃÃÃÃê pode copiar o cÃÃÃÃÃódigo abaixo e adicionar um nÃÃÃÃÃúmero ou cores diferentes para destacar outras sÃÃÃÃÃéries!
 */

 .animetitle[href*="anime/15583/"]{
 color: gold !important;
 font-size: 15px;
 }


 /*
 Configuracoes de lista e logo
 */
 #list_surround {
 background-attachment: scroll;
 background-image: url("http://i57.tinypic.com/2exrq53.jpg"); /* Imagem do Logotipo
 [IMG]http://i57.tinypic.com/2exrq53.jpg[/IMG] LOGO 1
 http://i58.tinypic.com/2dtyi5d.jpg  --  arrumado LOGO 2
 http://i62.tinypic.com/nmdov7.jpg
 http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/anohanalogo.png
 http://i57.tinypic.com/t4wnk8.jpg  
http://i57.tinypic.com/fa68aa.jpg    


*/
 background-position: 50% 0;
 background-repeat: no-repeat no-repeat;
 font-size: 81.25%;
 height: 250px;
 left: 0 !important;
 line-height: 1;
 margin: 0 auto;
 padding-bottom: 10px;
 padding-top: 228px;
 position: absolute;
 right: 0 !important;
 width: 650px;
 }



 /*
cabeÃÃÃÃÃçalhos personalizados
 */
 .header_cw {
 background-color: transparent;
 background-image: url("http://i57.tinypic.com/a0kjgg.jpg"); /*  Assistindo abaixo do logo
 [IMG]http://i57.tinypic.com/a0kjgg.jpg[/IMG]
 [IMG]http://i62.tinypic.com/4hnid.jpg[/IMG] n
 http://i57.tinypic.com/154h9gp.jpg erro
 [IMG]http://i62.tinypic.com/4hnid.jpg = Assistindo  n
 http://i60.tinypic.com/10h4wvb.jpg
 http://i41.tinypic.com/28gtm4h.jpg
 http://i61.tinypic.com/xoeg5v.jpg  n
 Imagem em baixo do Logo coladinho Current Watching e uma bonekinha   */
 background-position: 0 0;
 background-repeat: no-repeat no-repeat;
 height: 200px;
 margin-bottom: 0;
 margin-left: 63px;
 margin-top: -45px;
 }
 .header_completed {
 background-color: transparent;
 background-image: url("http://i59.tinypic.com/1688m4h.jpg"); /* Completados
 [IMG]http://i59.tinypic.com/1688m4h.jpg[/IMG]
 [IMG]http://i57.tinypic.com/154h9gp.jpg[/IMG]
 http://i60.tinypic.com/10h4wvb.jpg = completados
 http://i43.tinypic.com/2v9697a.jpg
 Imagem em baixo do Logo coladinho complete   */
 background-position: 61px 5px;
 background-repeat: no-repeat no-repeat;
 height: 200px;
 margin-bottom: 0;
 margin-top: -40px;
 z-index: 0;
 }
 .header_onhold {
 background-color: transparent;
 background-image: url("http://i57.tinypic.com/2eq9x4y.jpg");/* Em Espera
 [IMG]http://i57.tinypic.com/2eq9x4y.jpg[/IMG]
 http://i58.tinypic.com/wuqglw.jpg Em Espera
 http://i40.tinypic.com/wlsmfa.jpg
 */
 background-position: 91px 11px;
 background-repeat: no-repeat no-repeat;
 height: 200px;
 margin-bottom: 0;
 margin-top: -40px;
 }
 .header_dropped {
 background-color: transparent;
 background-image: url("http://i62.tinypic.com/14jb32f.jpg"); /* Dropados
 
 [IMG]http://i62.tinypic.com/14jb32f.jpg[/IMG]
 http://i58.tinypic.com/34dhf0o.jpg  Dropados?
 http://i44.tinypic.com/ja7wpk.jpg
 */
 background-position: 131px 5px;
 background-repeat: no-repeat no-repeat;
 height: 200px;
 margin-bottom: 0;
 margin-top: -40px;
 }
 .header_ptw {
 background-color: transparent;
 background-image: url("http://i62.tinypic.com/2dujuxf.jpg");/* Um dia ver abaixo do logo
 [IMG]http://i62.tinypic.com/2dujuxf.jpg[/IMG]
 [IMG]http://i57.tinypic.com/288tl60.jpg[/IMG]
 http://i57.tinypic.com/288tl60.jpg Um dia ver
 http://i58.tinypic.com/svpamw.jpg lista completa
 http://i39.tinypic.com/2dt0z0j.jpg
 */
 background-position: 15px 5px;
 background-repeat: no-repeat no-repeat;
 height: 200px;
 margin-bottom: 0;
 margin-top: -40px;
 }


 /*
 LADO ESQUERDO CATEGORIA MENU
ÃÃÃÃÃà Principais cÃÃÃÃÃódigos de influenciar a opacidade ea transiÃÃÃÃÃçÃÃÃÃÃão dos botÃÃÃÃÃões, pergunte no tÃÃÃÃÃópico original, se hÃÃÃÃÃá algo que vocÃÃÃÃÃê quer mudÃÃÃÃÃá-los, mas nÃÃÃÃÃão sei como. O resto dos cÃÃÃÃÃódigos sÃÃÃÃÃão de fundo e configuraÃÃÃÃÃçÃÃÃÃÃões de tamanho.

Assistindo = http://i61.tinypic.com/118pr8k.jpg
Completos = http://i61.tinypic.com/1g0snr.jpg
Espera = http://i57.tinypic.com/2mov7eu.jpg
Dropados = http://i60.tinypic.com/148hwep.jpg
Futuramente = http://i61.tinypic.com/1gglt3.jpg
Listar todos = http://i61.tinypic.com/95pfnc.jpg
 */
 .status_not_selected {
 opacity: 0.5;
 }
 .status_not_selected:hover {
 color: transparent;
 opacity: 1;
 -moz-transition: .4s ease;
 -webkit-transition: .4s ease;
 -o-transition: .4s ease;;
 }
 .status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
 color: transparent;
 display: block;
 height: 100px;
 width: 270px;
 }
 #list_surround .status_selected, #list_surround .status_not_selected {
 background-attachment: scroll;
 background-color: transparent;
 background-image: url("http://i61.tinypic.com/118pr8k.jpg");/*  Assistindo Current wathing imagem esquerda menu */
 /* [IMG]http://i57.tinypic.com/qn5pvo.jpg[/IMG]  http://dl.dropbox.com/u/102421246/MAL/AnoHanaLayout/CwCategory.png  
 [IMG]http://i58.tinypic.com/33cqgw2.jpg[/IMG]  */
 background-position: 0 -5px;
 background-repeat: repeat repeat;
 border: 1px solid #FFFFFF;
 border-radius: 20px 20px 20px 20px;
 display: block;
 height: 80px;
 left: 0;
 padding: 0;
 position: fixed;
 top: 30px;
 width: 200px;
 }
 #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
 background-attachment: scroll;
 background-color: transparent;
 background-image: url("http://i61.tinypic.com/1g0snr.jpg"); /* Completos */
 background-position: 0 -5px;
 background-repeat: repeat repeat;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 top: 140px;
 }
 #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
 background-attachment: scroll;
 background-color: transparent;
 background-image: url("http://i57.tinypic.com/2mov7eu.jpg"); /* Em espera*/
 background-position: 0 -5px;
 background-repeat: repeat repeat;
 top: 250px;
 }
 #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
 background-attachment: scroll;
 background-color: transparent;
 background-image: url("http://i60.tinypic.com/148hwep.jpg"); /* Dropados ou desistido */
 background-position: 0 -7px;
 background-repeat: repeat repeat;
 top: 360px;
 }
 #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
 background-attachment: scroll;
 background-color: transparent;
 background-image: url("http://i61.tinypic.com/1gglt3.jpg"); /* Futuramente */
 background-position: 0 -5px;
 background-repeat: repeat repeat;
 display: inline;
 top: 470px;
 }
 #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
 background-attachment: scroll;
 background-color: transparent;
 background-image: url("http://i61.tinypic.com/95pfnc.jpg"); /* Listar todos */
 background-position: 0 0;
 background-repeat: repeat repeat;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 display: inline;
 top: 580px;
 width: 200px;
 }


 /*
AJUSTES E CORES LISTA ROW / inferior
ÃÃÃÃÃà VocÃÃÃÃÃê vai encontrar as cores das linhas de fundo nos dois primeiros conjuntos de cÃÃÃÃÃódigos e as cores vistas no foco do mouse para linhas no terceiro set. Se vocÃÃÃÃÃê nÃÃÃÃÃão sabe sobre cores RGBA, vocÃÃÃÃÃê pode olhar para cima geradores on-line que irÃÃÃÃÃá facilmente fazer uma ÃÃÃÃÃúnica cor de escolha sua, com a CSS para ele vocÃÃÃÃÃê pode adicionar aqui!

ÃÃÃÃÃà Os seguintes cÃÃÃÃÃódigos de afetar outras partes da lista e sÃÃÃÃÃão nomeados de forma clara.
 */

 .td1 {
 background-color: rgba(8, 236, 228, 0.5);
 height: 20px;
 }
 .td2 {
 background-color: rgba(49, 59, 255, 0.506);
 height: 20px;
 }
 tr:hover [class^="td"] {
 background-color: rgba(51, 111, 235, 0.7);
 -moz-transition: .4s ease;
 -webkit-transition: .4s ease;
 -o-transition: .4s ease;;
 }
 .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
 background-color: rgba(12, 46, 196, 0.7);
 border: 0 none;
 padding: 4px;
 text-align: center;
 vertical-align: top;
 }
 .table_header, .td1, .td2, .category_totals {
 color: white;
 }
 .category_totals {
 background-color: rgba(12, 46, 196, 0.7);
 border-radius: 0 0 12px 12px;
 text-align: center;
 }
 .category_totals:hover {
 background-color: rgba(12, 46, 196, 0.7);
 color: #FFFFFF;
 }
 #grand_totals {
 background-color: rgba(12, 46, 196, 0.8);
 border: 0 none;
 border-radius: 3px 3px 3px 3px;
 color: #FFFFFF;
 line-height: 20px;
 min-height: 20px;
 padding: 8px;
 text-align: center;
 vertical-align: middle;
 }
 #copyright, #copyright:hover {
 background-color: rgba(12, 46, 196, 0.6);
 border-radius: 5px 5px 5px 5px;
 bottom: 0;
 color: white;
 padding: 2px;
 width: 650px;
 }
 #copyright:hover {
 }
 #copyright:before {
 color: black;
 content: " Design by SylakentH_, thanks to TheHolyPotato and Shishio's Custom Lists Club!";
 font-size: 12px;
 padding-right: 10px;
 }


 /*
OUTROS CÃDIGOS
ÃÃÃÃÃà Se vocÃÃÃÃÃê nÃÃÃÃÃão consegue encontrar ou descobrir como mudar alguma coisa, pergunte no tÃÃÃÃÃópico original para este layout!
 */

 .status_selected {
 display: block;
 }
 .status_not_selected {
 display: block;
 }
 * {
 text-decoration: none;
 }
 #inlineContent {
 background-image: url("");
 background-repeat: no-repeat no-repeat;
 display: inline-block !important;
 height: 3000px !important;
 left: 0 !important;
 margin: auto !important;
 position: fixed;
 top: 0 !important;
 width: 3000px !important;
 z-index: -4;
 }
 .table_header {
 }
 .table_header:first-of-type {
 border-radius: 20px 0 0 0;
 }
 .table_header:nth-of-type(2) {
 text-align: left;
 }
 .table_header:nth-of-type(5) {
 border-bottom-right-radius: 0;
 border-top-left-radius: 0;
 border-top-right-radius: 20px;
 }
 .borderRBL {
 line-height: normal !important;
 }
 [cellspacing="0"] {
 line-height: 17px;
 }

 [class^="header_"] * {
 background-repeat: no-repeat no-repeat;
 font-size: 1px;
 height: 200px;
 line-height: 24px;
 padding-bottom: 0;
 text-align: right;
 vertical-align: bottom;
 }
 .header_title {
 border-radius: 4px 4px 4px 4px;
 color: #FFFFFF;
 display: inline-block;
 font-style: italic;
 height: auto;
 padding: 0 8px 0 0;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
 .td1:nth-of-type(2), .td2:nth-of-type(2) {
 text-align: left;
 }
 .table_header:nth-of-type(6) {
 display: none;
 width: 500px;
 }
 a, .td1, .td2, .category_totals {
 }

 a, .td1, .td2, .category_totals {
 }
 .table_header:nth-of-type(2) {
 }
 .td1:nth-of-type(2), .td2:nth-of-type(2) {
 }
 :hover + .hide {
 background-color: rgba(12, 46, 196, 0.6);
 background-position: 50% 18% !important;
 background-repeat: no-repeat !important;
 background-size: 250px 330px !important;
 border-color: white;
 border-radius: 25px 25px 25px 25px;
 border-style: ridge;
 border-width: 2px;
 display: block !important;
 height: 498px;
 padding: 79px 40px 10px 10px;
 position: fixed;
 right: 3px;
 top: 60px;
 width: 234px;
 }
 .hide:before {
 background: none repeat scroll 0 0 transparent;
 border-radius: 25px 25px 0 0;
 color: white;
 content: "";
 padding-bottom: 5px;
 position: absolute;
 text-align: center;
 top: 10px;
 width: 262px;
 }
 .td1:nth-of-type(6), .td2:nth-of-type(6) {
 background-color: transparent !important;
 background-image: url("none") !important;
 display: none;
 font-size: 14px;
 height: 145px;
 padding: 10px 10px 0 24px;
 position: fixed;
 right: 13px;
 text-align: center;
 top: 449px;
 width: 235px;
 z-index: 1;
 }
 .table_header:nth-of-type(6) {
 display: none;
 }
 #copyright:after {
 color: gold;
 content: " ";
 padding-left: 20px;
 }
 #copyright a {
 }



Modelo 02

Código:





_________________
avatar
clean
Cachaceiros

Mensagens : 28
Data de inscrição : 27/08/2014
Idade : 28
Localização : Santa Catarina

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum