Índice
00mes
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate
00mes
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate
00mes
Lorem ipsum dolor
00mes
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum
Título de trama
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
Espacio libre
LINK IMPORTANTE
LINK IMPORTANTE
LINK IMPORTANTE
LINK IMPORTANTE
LINK IMPORTANTE
LINK IMPORTANTE
LINK IMPORTANTE
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Pack de Tablillas
skin long long time
Últimamente estoy con ganas de hacer cositas, y considerando que un skin sin unas tablillas homogéneas al diseño general no vale de mucho, aquí las traigo. Ella, facilitadora.
A continuación tenéis una lista de las tablillas y sus respectivos enlaces. Pero antes, toca lo típico:
Al igual que el resto del skin, podéis editar las tablillas cuanto queráis. Y en la misma línea, todas esas ediciones correrán por vuestra cuenta y riesgo.
Las tablillas están pensadas para que se usen con este skin, y funcionan tomando las variables de este. Es decir, si ya tienes el skin instalado, al incluir el CSS de las tablillas se adaptarán a tus colores, tus fuentes, étc. Seguramente te toque hacer unos ajustes menores para pulir, depende ya de lo mucho que hayas metido zarpa en las variables que traía por defecto el skin. Pero adaptarse, se adaptarán.
Podéis usarlas también por libre en cualquier otro skin, claro, pero la tarea de adaptación va a ser mayor por eso de los nombres en las variables.
Las tablillas no tienen crédito, pero si las usáis en vuestro foro hay que citar en los créditos generales. Típico de "Las tablillas son obra de blablabla", ya sabéis.
En el siguiente post explico detalladamente cómo instalar.
Las tablillas están pensadas para que se usen con este skin, y funcionan tomando las variables de este. Es decir, si ya tienes el skin instalado, al incluir el CSS de las tablillas se adaptarán a tus colores, tus fuentes, étc. Seguramente te toque hacer unos ajustes menores para pulir, depende ya de lo mucho que hayas metido zarpa en las variables que traía por defecto el skin. Pero adaptarse, se adaptarán.
Podéis usarlas también por libre en cualquier otro skin, claro, pero la tarea de adaptación va a ser mayor por eso de los nombres en las variables.
Las tablillas no tienen crédito, pero si las usáis en vuestro foro hay que citar en los créditos generales. Típico de "Las tablillas son obra de blablabla", ya sabéis.
En el siguiente post explico detalladamente cómo instalar.
Lista de Tablillas
— Administrativa Standard
— Registros
— Acciones Administrativas
— Búsqueda de Tramas
— Búsqueda de PJ / NPCs Oficiales
— Expediente
— Relaciones
Última edición por Admin el Lun Jun 19, 2023 7:47 pm, editado 3 veces
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
GUÍA DE INSTALACIÓN
SKIN LONG LONG TIME
A expensas de que alguna enterada de la vida venga luego Tumblr a decirme que así no se hacen las cosas, voy a hacer esta guía con el método que yo suelo emplear para almacenar el CSS de las tablillas.
Lo meto en Widgets. Lo hago así porque un pack de tablillas suele tener un número de líneas muy alto, y a veces mi hoja de CSS acaba sudando sangre si lo intento meter allí. Pero, lo más importante, si todo el CSS de las tablillas está recogido en un único Widget, resulta mucho más accesible para cualquier modificación rápida, y mi TOC está satisfecho.
Así pues, mi recomendación es que sigáis este método:
PA > MÓDULOS > PORTAL Y MÓDULOS > GESTIÓN DE LOS MÓDULOS
— Una vez ahí, vamos a Crear un módulo personalizado (captura). En "Nombre del módulo" poned Tablillas, pack de tablillas, lo que queráis. En "Usar una tabla tipo" marcamos NO.
— En el interior del widget vamos a pegar lo siguiente:
- Código:
<style>
</style>
— Sí, lo de arriba es una etiqueta style completamente vacía, porque dentro de ella vais a meter el CSS de las tablillas que queráis usar en vuestro skin.
— Registráis el widget y lo activáis arrastrándolo a la columna izquierda desde la pestaña Módulos personales. Y registráis también los cambios al terminar. Listo, ya está el widget activado y funcional, toca llenarlo.
— Lo siguiente es sencillo: ¿Quieres el pack completo de tablillas o quieres alguna que otra, pero no todas? Si quieres el pack completo, copia el CSS que añado al final de este mismo post. Si solo quieres algunas, en el post de cada tablilla se encuentra su CSS aislado, píllalo de allí.
Y eso sería todo. Dudas, sugerencias, quejas y amenazas se atienden por ASK.
- CSS del Pack completo:
- Código:
/*** RELACIONES ***/
.rela1:hover .rel1-text {bottom:0px;transition:0.5s;}
.rela1:hover .rel1-name {bottom:350px;transition:0.5s;}
.rel1-name {
background: var(--colorela);
opacity: 1;
text-transform: uppercase;
font-size: 12px;
font-weight: 900;
text-shadow: 1px 1px 1px black;
line-height: 100%;transition:0.5s;
bottom: 10px;
position: absolute;
left: 10px;
padding: 10px;
max-width: 150px;
border-radius: 6px;
}
.relaciones1 {
display: flex;
flex-wrap: wrap;
margin: 20px;
}
.rela1 {
border: var(--borde2);
width: 200px;
margin: 5px;
height: 320px;
overflow: hidden;
position: relative;background:var(--rfoto);
}
.rela2 {
border: 1px solid var(--colorela);
margin: 5px;
height: 305px;
overflow: hidden;
position: relative;
}
.rel1-text {
position: absolute;
left: 0px;
bottom: -350px;
background: #0e0e0ec9;
backdrop-filter: blur(3px);
height: 100%;
box-sizing: border-box;
border: 20px solid transparent;
font-size: 11px;
overflow: auto;
padding-right: 5px;transition:0.5s;
}
/*** EXPEDIENTE ***/
/**/
.expediente input#pesta1:checked ~ .exp-pestis label[for="pesta1"] {background:var(--grupo-color);}
.expediente input#pesta2:checked ~ .exp-pestis label[for="pesta2"] {background:var(--grupo-color);}
.expediente input#pesta3:checked ~ .exp-pestis label[for="pesta3"] {background:var(--grupo-color);}
.expediente input#pesta1:checked ~ .env-middle .ep1 {bottom:-400px;}
.expediente input#pesta2:checked ~ .env-middle .ep2 {bottom:0px;}
.expediente input#pesta3:checked ~ .env-middle .ep3 {bottom:0px;}
.exp-pestis label {
width: 15px;
height: 15px;
display: block;
margin-right: 10px;
padding: 0px;
line-height: 100%;
border: 2px solid var(--grupo-color);
border-radius: 100%;
cursor: pointer;
}
.pholi {
position: absolute;
width: 600px;
height: 400px;
background: #080808db;
transition: 0.5s;
left: 0px;
backdrop-filter: blur(5px);
bottom: -400px;
box-sizing: border-box;
padding: 45px;
}
.pest-text {
height: 100%;
overflow: auto;
padding-right: 10px;
margin-right: -10px;
font-size: 13px;
}
.env-middle {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.exp-pestis {
position: absolute;
right: 20px;
top: 38px;
font-size: 25px;
display: flex;
}
.expediente input {display:none;}
/**/
.exp-middle {
height: 400px;background:var(--foto-expediente);
}
.exp-data div b {
color: var(--grupo-color);
font-weight: 900;
margin-right: 10px;
}
.exp-down {
border-top: 3px solid var(--grupo-color);
background: var(--fondo2);
box-sizing: border-box;
padding: 10px;
}
.exp-quote i {
position: absolute;
left: 0px;
height: 100%;
display: flex;
align-items: center;
top: 0px;
font-size: 16px;
width: 50px;
justify-content: center;
color: var(--grupo-color);
}
.exp-quote {
border: var(--borde2);position:relative;
padding: 5px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
padding-left: 50px;
font-style: italic;
background: var(--borde2-c);
margin-bottom: 10px;
}
.exp-data {
border: var(--borde2);
display: flex;
flex-wrap: wrap;border-bottom: none;border-right: none;
}
.exp-data div {
width: 50%;
box-sizing: border-box;
border-right: var(--borde2);
height: 35px;
border-bottom: var(--borde2);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
overflow: hidden;
}
.expediente .exp-up {
height: 100px;
border-bottom: 3px solid var(--grupo-color);
background: var(--fondo2);
display: flex;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
padding-left: 30px;
}
.exp-name {
display: block;
background: var(--grupo-color);
width: fit-content;
padding: 10px 15px;
text-transform: uppercase;
font-weight: 900;
text-shadow: var(--sombra);
border-radius: 8px;
}
.expediente {
border: var(--borde2);
width: 600px;
margin: 0 auto;
background: var(--fondo3);
position: relative;
display: flex;
flex-direction: column;
}
.expediente br {display: none;}
/*** NPCS ***/
.npc-title {
width: 600px;
overflow: hidden;
margin: 0 auto;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.npc-title:before {
content: ' ';
width: 100%;
position: absolute;
left: 0px;
top: 50%;
height: 1px;
background: var(--grupo-color);
}
.npc-title div {
border: 1px solid var(--grupo-color);
padding: 15px 25px;
text-transform: uppercase;
font-weight: 900;
background: var(--fondo2);
position: relative;
line-height: 100%;
}
.base-npc .bnpc-photo {
margin: 15px;
box-sizing: border-box;
border: 1px solid var(--grupo-color);
height: 170px;
outline: 1px solid var(--grupo-color);
outline-offset: -1px;transition:0.5s;
}
.base-npc .bnpc-data d:before {
content: '\ea69';
color: var(--grupo-color);
margin-right: 10px;
margin-left: -10px;
font-family: 'IcoFont';
}
.base-npc .bnpc-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
height: 100%;opacity: 0;
transition: 0.5s;background: var(--fondo1);
}
.base-npc:hover .bnpc-data {opacity:1;transition:0.5s;}
.base-npc:hover .bnpc-photo {outline-offset: 15px;transition:0.5s;}
.base-npc .bnpc-name span {
font-size: 11px;
background: var(--grupo-color);
color: var(--textobase);
font-weight: 700;
padding: 5px 10px;
margin: -5px;
border-radius: 7px;
text-shadow: var(--sombra);
}
.base-npc .bnpc-text {
margin: 15px;
padding-right: 10px;
font-size: 12px;
overflow: auto;
height: 120px;
}
.base-npc {
width: 605px;
margin: 0 auto;
display: flex;
}
.base-npc .bnpc-img {
width: 200px;
border: var(--borde2);
height: 200px;
background: var(--fondo2);
margin-right: 10px;
}
.base-npc .bnpc-right {
width: 390px;
border: var(--borde2);
height: 200px;
position: relative;
overflow: hidden;
}
.base-npc .bnpc-name {
border-bottom: var(--borde2);
background: var(--fondo2);
display: flex;justify-content: flex-end;
align-items: center;
padding: 15px;
text-transform: uppercase;
font-weight: 900;
color: var(--grupo-color);
}
.base-npc.alt {flex-direction: row-reverse;}
.base-npc.alt .bnpc-img {margin-right: 0px;margin-left: 10px;}
.base-npc.alt .bnpc-name {justify-content: flex-start;}
.base-npc br {display: none;}
.base-npc .bnpc-text br {display: block;}
/*** ACCIONES ADMIN ***/
.admintalk .at-line {
height: 5px;
background: var(--gradient1);
border-radius: 10px;
margin: -10px 0px;
}
.admintalk .at-text {
border: var(--borde2);
padding: 35px;
background: var(--fondo3);
font-size: 13px;
}
.admintalk .at-icon {
font-size: 40px;
line-height: 100%;
background: var(--gradient1);
-webkit-background-clip: text;
color: transparent;
margin: 0 auto;
margin-bottom: -10px;
width: fit-content;
}
.admintalk {
width: 400px;
margin: 0 auto;margin-bottom:25px;
}
.admintalk .at-title {
border: var(--borde2);
background: var(--fondo2);
padding: 15px;
text-transform: uppercase;
text-align: center;
font-size: 13px;
font-weight: bold;
}
/*** BASE TAB ***/
.bt-titulo2 div {
width: fit-content;
margin: 0 auto;
background: var(--grupo-color);
padding: 12px;
margin-top: 15px;
text-transform: uppercase;
font-weight: 800;
font-size: 15px;
text-shadow: var(--sombra);
border-radius: 10px;
position: relative;
z-index: 1;
}
.bt-titulo2:after {
display: block;
content: ' ';
height: 1px;
width: 100%;
background: var(--borde2-c);
position: relative;
top: -23px;
}
.btexto {padding: 45px;
font-size: 13px;}
.btexto br:first-of-type {display: none;}
.bsubtitulo {
display: flex;
justify-content: flex-end;
padding-right: 15px;}
.bsubtitulo div {
background: var(--grupo-color);
padding: 5px 15px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
text-shadow: var(--sombra);
border-radius: 0px 0px 10px 10px;
}
div#base1 {
border: var(--borde2);
margin: 35px;
}
div#base1 i {color:var(--grupo-color);}
.btitulo {
border-bottom: 5px solid var(--grupo-color);
padding: 40px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
background: var(--fondo2);
}
busqueda.abierta:after , busqueda.cerrada:after {
content: '\ec8c';
position: absolute;
height: 35px;
width: 35px;
background: var(--borde2-c);
left: -20px;
top: 50%;
margin-top: -20px;
display: flex;
font-family: 'IcoFont';
font-size: 18px;
align-items: center;
justify-content: center;
color: var(--grupo-color);
border-radius: 100%;
border: 2px solid var(--grupo-color);
}
busqueda.cerrada:after {content:'\ec61';}
.btexto .bb-cuadro br:first-of-type {
display: block!important;
}
div#base1 busqueda .bb-title {
color: var(--grupo-color);
font-size: 18px;
text-transform: uppercase;
font-weight: 900;
}
div#base1 busqueda .bb-datos {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
}
div#base1 busqueda .bb-texto {
margin-top: 15px;
max-height: 250px;
overflow: auto;
padding-right: 30px;
}
div#base1 busqueda {
display: flex;
flex-direction: column;
border-left: 2px solid var(--borde2-c);
padding: 10px 0px 10px 40px;
position: relative;
}
div#base1 busqueda br {display:none;}
div#base1 busqueda .bb-texto br {display:block;}
div#base1 .bb-cuadro {
border: 1px solid var(--grupo-color);
padding: 35px;
margin: 20px;
outline: 1px solid var(--borde2-c);
outline-offset: -7px;
}
Última edición por Admin el Lun Jun 19, 2023 8:43 pm, editado 2 veces
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Administrativa Standard
skin long long time
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
- HTML:
- Código:
<div id="base1"><div class="btitulo">Título del tema</div><div class="bsubtitulo"><div>subtítulo del tema</div></div><div class="btexto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </div></div>
- CSS AISLADO:
ESTE CSS ENGLOBA LA ADMINISTRATIVA STANDARD, LOS REGISTROS Y LAS BÚSQUEDAS DE TRAMA, YA QUE SON VARIACIONES MUY LEVES DE UN MISMO MODELO.- Código:
/*** BASE TAB ***/
.bt-titulo2 div {
width: fit-content;
margin: 0 auto;
background: var(--grupo-color);
padding: 12px;
margin-top: 15px;
text-transform: uppercase;
font-weight: 800;
font-size: 15px;
text-shadow: var(--sombra);
border-radius: 10px;
position: relative;
z-index: 1;
}
.bt-titulo2:after {
display: block;
content: ' ';
height: 1px;
width: 100%;
background: var(--borde2-c);
position: relative;
top: -23px;
}
.btexto {padding: 45px;
font-size: 13px;}
.btexto br:first-of-type {display: none;}
.bsubtitulo {
display: flex;
justify-content: flex-end;
padding-right: 15px;}
.bsubtitulo div {
background: var(--grupo-color);
padding: 5px 15px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
text-shadow: var(--sombra);
border-radius: 0px 0px 10px 10px;
}
div#base1 {
border: var(--borde2);
margin: 35px;
}
div#base1 i {color:var(--grupo-color);}
.btitulo {
border-bottom: 5px solid var(--grupo-color);
padding: 40px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
background: var(--fondo2);
}
busqueda.abierta:after , busqueda.cerrada:after {
content: '\ec8c';
position: absolute;
height: 35px;
width: 35px;
background: var(--borde2-c);
left: -20px;
top: 50%;
margin-top: -20px;
display: flex;
font-family: 'IcoFont';
font-size: 18px;
align-items: center;
justify-content: center;
color: var(--grupo-color);
border-radius: 100%;
border: 2px solid var(--grupo-color);
}
busqueda.cerrada:after {content:'\ec61';}
.btexto .bb-cuadro br:first-of-type {
display: block!important;
}
div#base1 busqueda .bb-title {
color: var(--grupo-color);
font-size: 18px;
text-transform: uppercase;
font-weight: 900;
}
div#base1 busqueda .bb-datos {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
}
div#base1 busqueda .bb-texto {
margin-top: 15px;
max-height: 250px;
overflow: auto;
padding-right: 30px;
}
div#base1 busqueda {
display: flex;
flex-direction: column;
border-left: 2px solid var(--borde2-c);
padding: 10px 0px 10px 40px;
position: relative;
}
div#base1 busqueda br {display:none;}
div#base1 busqueda .bb-texto br {display:block;}
div#base1 .bb-cuadro {
border: 1px solid var(--grupo-color);
padding: 35px;
margin: 20px;
outline: 1px solid var(--borde2-c);
outline-offset: -7px;
}
Última edición por Admin el Lun Jun 19, 2023 8:08 pm, editado 2 veces
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Registro de ALGO
SKIN LONG LONG TIME
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
- Códigos de Registro:
XXXXXXXXXXXXXXXXX
Categoría 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Categoría 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
- html:
- Código:
<div id="base1"><div class="btitulo">Registro de Cosa</div><div class="bsubtitulo"><div>subtítulo del tema</div></div><div class="btexto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
[spoiler="Códigos de Registro"]
XXXXXXXXXXXXXXXXX
[/spoiler]
<div class="bt-titulo2"><div>Categoría 1</div></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
<div class="bt-titulo2"><div>Categoría 2</div></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
</div></div>
- CSS AISLADO:
ESTE CSS ENGLOBA LA ADMINISTRATIVA STANDARD, LOS REGISTROS Y LAS BÚSQUEDAS DE TRAMA, YA QUE SON VARIACIONES MUY LEVES DE UN MISMO MODELO.- Código:
/*** BASE TAB ***/
.bt-titulo2 div {
width: fit-content;
margin: 0 auto;
background: var(--grupo-color);
padding: 12px;
margin-top: 15px;
text-transform: uppercase;
font-weight: 800;
font-size: 15px;
text-shadow: var(--sombra);
border-radius: 10px;
position: relative;
z-index: 1;
}
.bt-titulo2:after {
display: block;
content: ' ';
height: 1px;
width: 100%;
background: var(--borde2-c);
position: relative;
top: -23px;
}
.btexto {padding: 45px;
font-size: 13px;}
.btexto br:first-of-type {display: none;}
.bsubtitulo {
display: flex;
justify-content: flex-end;
padding-right: 15px;}
.bsubtitulo div {
background: var(--grupo-color);
padding: 5px 15px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
text-shadow: var(--sombra);
border-radius: 0px 0px 10px 10px;
}
div#base1 {
border: var(--borde2);
margin: 35px;
}
div#base1 i {color:var(--grupo-color);}
.btitulo {
border-bottom: 5px solid var(--grupo-color);
padding: 40px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
background: var(--fondo2);
}
busqueda.abierta:after , busqueda.cerrada:after {
content: '\ec8c';
position: absolute;
height: 35px;
width: 35px;
background: var(--borde2-c);
left: -20px;
top: 50%;
margin-top: -20px;
display: flex;
font-family: 'IcoFont';
font-size: 18px;
align-items: center;
justify-content: center;
color: var(--grupo-color);
border-radius: 100%;
border: 2px solid var(--grupo-color);
}
busqueda.cerrada:after {content:'\ec61';}
.btexto .bb-cuadro br:first-of-type {
display: block!important;
}
div#base1 busqueda .bb-title {
color: var(--grupo-color);
font-size: 18px;
text-transform: uppercase;
font-weight: 900;
}
div#base1 busqueda .bb-datos {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
}
div#base1 busqueda .bb-texto {
margin-top: 15px;
max-height: 250px;
overflow: auto;
padding-right: 30px;
}
div#base1 busqueda {
display: flex;
flex-direction: column;
border-left: 2px solid var(--borde2-c);
padding: 10px 0px 10px 40px;
position: relative;
}
div#base1 busqueda br {display:none;}
div#base1 busqueda .bb-texto br {display:block;}
div#base1 .bb-cuadro {
border: 1px solid var(--grupo-color);
padding: 35px;
margin: 20px;
outline: 1px solid var(--borde2-c);
outline-offset: -7px;
}
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Búsqueda de tramas
SKIN LONG LONG TIME
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean.
Lorem ipsum dolor sit amet
Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
Lorem ipsum dolor sit amet
Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
Título de la búsqueda
Dato | Dato ! Dato
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
Título de la búsqueda
Dato | Dato ! Dato
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
Título de la búsqueda
Dato | Dato ! Dato
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
- HTML:
- Código:
<div id="base1"><div class="btitulo">Búsqueda de tramas</div><div class="bsubtitulo"><div>subtítulo de la búsqueda</div></div><div class="btexto">
<div class="bb-cuadro"><i class="icofont-caret-right"></i> Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean.
<i class="icofont-caret-right"></i> Lorem ipsum dolor sit amet
<i class="icofont-caret-right"></i> Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
<!!><busqueda class="abierta">
<div class="bb-title">Título de la búsqueda</div>
<div class="bb-datos">Dato | Dato ! Dato</div>
<div class="bb-texto">Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
</busqueda><!!>
<!!><busqueda class="cerrada">
<div class="bb-title">Título de la búsqueda</div>
<div class="bb-datos">Dato | Dato ! Dato</div>
<div class="bb-texto">Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
</busqueda><!!>
<!!><busqueda class="abierta">
<div class="bb-title">Título de la búsqueda</div>
<div class="bb-datos">Dato | Dato ! Dato</div>
<div class="bb-texto">Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div>
</busqueda><!!>
</div></div>
- CSS AISLADO:
ESTE CSS ENGLOBA LA ADMINISTRATIVA STANDARD, LOS REGISTROS Y LAS BÚSQUEDAS DE TRAMA, YA QUE SON VARIACIONES MUY LEVES DE UN MISMO MODELO.- Código:
/*** BASE TAB ***/
.bt-titulo2 div {
width: fit-content;
margin: 0 auto;
background: var(--grupo-color);
padding: 12px;
margin-top: 15px;
text-transform: uppercase;
font-weight: 800;
font-size: 15px;
text-shadow: var(--sombra);
border-radius: 10px;
position: relative;
z-index: 1;
}
.bt-titulo2:after {
display: block;
content: ' ';
height: 1px;
width: 100%;
background: var(--borde2-c);
position: relative;
top: -23px;
}
.btexto {padding: 45px;
font-size: 13px;}
.btexto br:first-of-type {display: none;}
.bsubtitulo {
display: flex;
justify-content: flex-end;
padding-right: 15px;}
.bsubtitulo div {
background: var(--grupo-color);
padding: 5px 15px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
text-shadow: var(--sombra);
border-radius: 0px 0px 10px 10px;
}
div#base1 {
border: var(--borde2);
margin: 35px;
}
div#base1 i {color:var(--grupo-color);}
.btitulo {
border-bottom: 5px solid var(--grupo-color);
padding: 40px;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
background: var(--fondo2);
}
busqueda.abierta:after , busqueda.cerrada:after {
content: '\ec8c';
position: absolute;
height: 35px;
width: 35px;
background: var(--borde2-c);
left: -20px;
top: 50%;
margin-top: -20px;
display: flex;
font-family: 'IcoFont';
font-size: 18px;
align-items: center;
justify-content: center;
color: var(--grupo-color);
border-radius: 100%;
border: 2px solid var(--grupo-color);
}
busqueda.cerrada:after {content:'\ec61';}
.btexto .bb-cuadro br:first-of-type {
display: block!important;
}
div#base1 busqueda .bb-title {
color: var(--grupo-color);
font-size: 18px;
text-transform: uppercase;
font-weight: 900;
}
div#base1 busqueda .bb-datos {
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
}
div#base1 busqueda .bb-texto {
margin-top: 15px;
max-height: 250px;
overflow: auto;
padding-right: 30px;
}
div#base1 busqueda {
display: flex;
flex-direction: column;
border-left: 2px solid var(--borde2-c);
padding: 10px 0px 10px 40px;
position: relative;
}
div#base1 busqueda br {display:none;}
div#base1 busqueda .bb-texto br {display:block;}
div#base1 .bb-cuadro {
border: 1px solid var(--grupo-color);
padding: 35px;
margin: 20px;
outline: 1px solid var(--borde2-c);
outline-offset: -7px;
}
- INSTRUCCIONES DE USO:
Dentro del elemento busqueda hay que cambiar su clase a abierta o cerrada y el icono del candado se cambia solo. Si la clase se elimina y se deja como < busqueda > XX < / busqueda >, también se eliminará el icono.
Última edición por Admin el Lun Jun 19, 2023 6:10 pm, editado 1 vez
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Lista de NPC / BÚSQUEDA DE PJ
Nombre X. Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
Nombre X. Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
- html:
- Código:
<div class="npc-title"><div>Lista de NPC</div></div>
<!!><div class="base-npc"><div class="bnpc-img">
<div class="bnpc-photo" style="background:url(IMG-170x170)">
<div class="bnpc-data">
<d>dato extra 1</d>
<d>dato extra 2</d>
<d>dato extra 3</d>
<d>dato extra 4</d>
</div></div></div><div class="bnpc-right">
<div class="bnpc-name"><span>Nombre X. Apellido</span></div>
<div class="bnpc-text">Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
</div></div></div><!!>
- CSS AISLADO:
- Código:
/*** NPCS ***/
.npc-title {
width: 600px;
overflow: hidden;
margin: 0 auto;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.npc-title:before {
content: ' ';
width: 100%;
position: absolute;
left: 0px;
top: 50%;
height: 1px;
background: var(--grupo-color);
}
.npc-title div {
border: 1px solid var(--grupo-color);
padding: 15px 25px;
text-transform: uppercase;
font-weight: 900;
background: var(--fondo2);
position: relative;
line-height: 100%;
}
.base-npc .bnpc-photo {
margin: 15px;
box-sizing: border-box;
border: 1px solid var(--grupo-color);
height: 170px;
outline: 1px solid var(--grupo-color);
outline-offset: -1px;transition:0.5s;
}
.base-npc .bnpc-data d:before {
content: '\ea69';
color: var(--grupo-color);
margin-right: 10px;
margin-left: -10px;
font-family: 'IcoFont';
}
.base-npc .bnpc-data {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
height: 100%;opacity: 0;
transition: 0.5s;background: var(--fondo1);
}
.base-npc:hover .bnpc-data {opacity:1;transition:0.5s;}
.base-npc:hover .bnpc-photo {outline-offset: 15px;transition:0.5s;}
.base-npc .bnpc-name span {
font-size: 11px;
background: var(--grupo-color);
color: var(--textobase);
font-weight: 700;
padding: 5px 10px;
margin: -5px;
border-radius: 7px;
text-shadow: var(--sombra);
}
.base-npc .bnpc-text {
margin: 15px;
padding-right: 10px;
font-size: 12px;
overflow: auto;
height: 120px;
}
.base-npc {
width: 605px;
margin: 0 auto;
display: flex;
}
.base-npc .bnpc-img {
width: 200px;
border: var(--borde2);
height: 200px;
background: var(--fondo2);
margin-right: 10px;
}
.base-npc .bnpc-right {
width: 390px;
border: var(--borde2);
height: 200px;
position: relative;
overflow: hidden;
}
.base-npc .bnpc-name {
border-bottom: var(--borde2);
background: var(--fondo2);
display: flex;justify-content: flex-end;
align-items: center;
padding: 15px;
text-transform: uppercase;
font-weight: 900;
color: var(--grupo-color);
}
.base-npc.alt {flex-direction: row-reverse;}
.base-npc.alt .bnpc-img {margin-right: 0px;margin-left: 10px;}
.base-npc.alt .bnpc-name {justify-content: flex-start;}
.base-npc br {display: none;}
.base-npc .bnpc-text br {display: block;}
- INSTRUCCIONES DE USO:
— Las imágenes son de 170x170px.
— El código HTML contiene UN (1) NPC (es decir, que no es la lista de dos que se muestra en el ejemplo). En caso de querer más, basta con añadirlo.
— Si el código se deja por defecto, la parte de la foto se alineará siempre a la izquierda como sale en el primer ejemplo. Si se quiere conseguir el efecto mostrado arriba, o si simplemente preferís la parte de las fotos a la derecha, tenéis que buscar la clase base-npc y añadirle alt tras dejar un espacio.
Es decir, así:
< div class="base-npc alt" > Contenido < /div >
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Acción Administrativa
- Código:
<div class="admintalk">
<div class="at-icon"><i class="icofont-checked"></i></div>
<div class="at-title">Acción Administrativa</div>
<div class="at-line"></div></div>
Acción Administrativa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
- Código:
<div class="admintalk">
<div class="at-icon"><i class="icofont-checked"></i></div>
<div class="at-title">Acción Administrativa</div>
<div class="at-line"></div>
<div class="at-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div></div>
- CSS AISLADO:
- Código:
/*** ACCIONES ADMIN ***/
.admintalk .at-line {
height: 5px;
background: var(--gradient1);
border-radius: 10px;
margin: -10px 0px;
}
.admintalk .at-text {
border: var(--borde2);
padding: 35px;
background: var(--fondo3);
font-size: 13px;
}
.admintalk .at-icon {
font-size: 40px;
line-height: 100%;
background: var(--gradient1);
-webkit-background-clip: text;
color: transparent;
margin: 0 auto;
margin-bottom: -10px;
width: fit-content;
}
.admintalk {
width: 400px;
margin: 0 auto;margin-bottom:25px;
}
.admintalk .at-title {
border: var(--borde2);
background: var(--fondo2);
padding: 15px;
text-transform: uppercase;
text-align: center;
font-size: 13px;
font-weight: bold;
}
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Nombre A. Apellido
Historia. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
Extra. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.
the more you shoot people, the harder it is to sleep
Dato: Respuesta
Dato: Respuesta
Dato: Respuesta
Dato: Respuesta
Dato: Respuesta
Dato: Respuesta
- HTML:
- Código:
<style>.expediente {--foto-expediente: url(https://i.ibb.co/svN3ZCC/joel.png);}</style>
<div class="expediente"><div class="exp-up">
<div class="exp-name">Nombre A. Apellido</div>
</div><div class="exp-middle"><input type="radio" name="pest" id="pesta1" checked/><input type="radio" name="pest" id="pesta2"/><input type="radio" name="pest" id="pesta3"/><div class="exp-pestis"><label for="pesta1" title="FOTO"></label><label for="pesta2" title="HISTORIA"></label><label for="pesta3" title="EXTRA"></label></div><div class="env-middle"><div class="pholi ep1"></div>
<div class="pholi ep2"><div class="pest-text">[b]Historia[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div></div>
<div class="pholi ep3"><div class="pest-text">[b]Extra[/b]. Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent. Vivamus parturient sapien platea facilisis metus dictum justo quis, sagittis commodo litora per vestibulum fusce himenaeos.</div></div></div></div><div class="exp-down">
<div class="exp-quote"><i class="icofont-quote-left"></i> the more you shoot people, the harder it is to sleep</div>
<div class="exp-data">
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
<div><b>Dato:</b> Respuesta</div>
</div></div></div>
- CSS AISLADO:
- Código:
/*** EXPEDIENTE ***/
/**/
.expediente input#pesta1:checked ~ .exp-pestis label[for="pesta1"] {background:var(--grupo-color);}
.expediente input#pesta2:checked ~ .exp-pestis label[for="pesta2"] {background:var(--grupo-color);}
.expediente input#pesta3:checked ~ .exp-pestis label[for="pesta3"] {background:var(--grupo-color);}
.expediente input#pesta1:checked ~ .env-middle .ep1 {bottom:-400px;}
.expediente input#pesta2:checked ~ .env-middle .ep2 {bottom:0px;}
.expediente input#pesta3:checked ~ .env-middle .ep3 {bottom:0px;}
.exp-pestis label {
width: 15px;
height: 15px;
display: block;
margin-right: 10px;
padding: 0px;
line-height: 100%;
border: 2px solid var(--grupo-color);
border-radius: 100%;
cursor: pointer;
}
.pholi {
position: absolute;
width: 600px;
height: 400px;
background: #080808db;
transition: 0.5s;
left: 0px;
backdrop-filter: blur(5px);
bottom: -400px;
box-sizing: border-box;
padding: 45px;
}
.pest-text {
height: 100%;
overflow: auto;
padding-right: 10px;
margin-right: -10px;
font-size: 13px;
}
.env-middle {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.exp-pestis {
position: absolute;
right: 20px;
top: 38px;
font-size: 25px;
display: flex;
}
.expediente input {display:none;}
/**/
.exp-middle {
height: 400px;background:var(--foto-expediente);
}
.exp-data div b {
color: var(--grupo-color);
font-weight: 900;
margin-right: 10px;
}
.exp-down {
border-top: 3px solid var(--grupo-color);
background: var(--fondo2);
box-sizing: border-box;
padding: 10px;
}
.exp-quote i {
position: absolute;
left: 0px;
height: 100%;
display: flex;
align-items: center;
top: 0px;
font-size: 16px;
width: 50px;
justify-content: center;
color: var(--grupo-color);
}
.exp-quote {
border: var(--borde2);position:relative;
padding: 5px;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
padding-left: 50px;
font-style: italic;
background: var(--borde2-c);
margin-bottom: 10px;
}
.exp-data {
border: var(--borde2);
display: flex;
flex-wrap: wrap;border-bottom: none;border-right: none;
}
.exp-data div {
width: 50%;
box-sizing: border-box;
border-right: var(--borde2);
height: 35px;
border-bottom: var(--borde2);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
overflow: hidden;
}
.expediente .exp-up {
height: 100px;
border-bottom: 3px solid var(--grupo-color);
background: var(--fondo2);
display: flex;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
padding-left: 30px;
}
.exp-name {
display: block;
background: var(--grupo-color);
width: fit-content;
padding: 10px 15px;
text-transform: uppercase;
font-weight: 900;
text-shadow: var(--sombra);
border-radius: 8px;
}
.expediente {
border: var(--borde2);
width: 600px;
margin: 0 auto;
background: var(--fondo3);
position: relative;
display: flex;
flex-direction: column;
}
.expediente br {display: none;}
Admin
esto es un rango
Mensajes :
63
Localización :
localización
Empleo /Ocio :
empleo
Profesión :
Paranoico
Humor :
whatever
Nombre X Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse
Nombre X Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse
Nombre X Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse
Nombre X Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse
Nombre X Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse, congue lacus penatibus dapibus turpis ligula aliquet sociis torquent.
Nombre X Apellido
Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse.
- HTML:
- Código:
<div class="relaciones1">
<!!><div class="rela1" style="--colorela:#FFF;--rfoto:url(IMG-200x320)"><div class="rela2">
<div class="rel1-name">Nombre X Apellido</div>
<div class="rel1-text">Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse</div></div>
</div><!!>
<!!><div class="rela1" style="--colorela:#FFF;--rfoto:url(IMG-200x320)"><div class="rela2">
<div class="rel1-name">Nombre X Apellido</div>
<div class="rel1-text">Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse</div></div>
</div><!!>
<!!><div class="rela1" style="--colorela:#FFF;--rfoto:url(IMG-200x320)"><div class="rela2">
<div class="rel1-name">Nombre X Apellido</div>
<div class="rel1-text">Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum, velit tincidunt vivamus congue senectus praesent class dictum vulputate, vehicula nullam tortor sodales montes nulla aenean. Vehicula gravida tempor litora neque nisi diam eget cursus curabitur duis habitasse</div></div>
</div><!!>
</div>
- CSS AISLADO:
- Código:
/*** RELACIONES ***/
.rela1:hover .rel1-text {bottom:0px;transition:0.5s;}
.rela1:hover .rel1-name {bottom:350px;transition:0.5s;}
.rel1-name {
background: var(--colorela);
opacity: 1;
text-transform: uppercase;
font-size: 12px;
font-weight: 900;
text-shadow: 1px 1px 1px black;
line-height: 100%;transition:0.5s;
bottom: 10px;
position: absolute;
left: 10px;
padding: 10px;
max-width: 150px;
border-radius: 6px;
}
.relaciones1 {
display: flex;
flex-wrap: wrap;
margin: 20px;
}
.rela1 {
border: var(--borde2);
width: 200px;
margin: 5px;
height: 320px;
overflow: hidden;
position: relative;background:var(--rfoto);
}
.rela2 {
border: 1px solid var(--colorela);
margin: 5px;
height: 305px;
overflow: hidden;
position: relative;
}
.rel1-text {
position: absolute;
left: 0px;
bottom: -350px;
background: #0e0e0ec9;
backdrop-filter: blur(3px);
height: 100%;
box-sizing: border-box;
border: 20px solid transparent;
font-size: 11px;
overflow: auto;
padding-right: 5px;transition:0.5s;
}
- INSTRUCCIONES DE USO:
— Las imágenes son de 200x320 px.
Permisos de este foro:
No puedes responder a temas en este foro.