¡Hola creadores! ¿Qué tal están? Hoy les dejaré la tabla que hice hace un tiempo. No estoy muy conforme con el resultado pero por ahora es lo que puedo brindar. Para más adelante podré hacer algo mucho más bonito, lo prometo. Antes de continuar quiero aclarar que no es un tutorial en si, no tengo otro lugar para ponerlo y por eso lo coloqué como un Tutorial HTML (cambiado a Recurso HTML :)). En realidad les daré el código de la tabla que es personalizable. Si quieren editarla y no les sale pueden preguntarme. También si quieren armar algo y no les sale, puedo pegarles una mano :)
¿Qué se puede personalizar?
- Tamaño de cada porción. Pueden hacerlo más grande o más chico, dependiendo de cuanto texto quieren ingresar. También pueden colocar la barra de desplazamiento si quieren que quede un tamaño más chico en la parte de la descripción y no se alargue tanto
- El título, el cuerpo y el cuadro
- Colores. Pueden cambiar todos los colores si lo desean. Iba a hacer diferentes opciones de colores pero no pude
- Fuentes.
- Fuentes.
- Imagen
- Muchas más cosas
- Muchas más cosas
Si quieren saber como pueden editar este tipo de tabla pueden visitar mis tutoriales HTML anteriores, en los que explico lo básico que conozco, por lo menos. Aquí pueden encontrarlos → click
NOTA: Yo les paso una imagen del cuadro porque con la plantilla que tengo me marca una línea que realmente no existe. Así que si tienen plantillas tengan en cuenta que puede cambiar el diseño de la tabla, el resultado.
Tabla personalizable
NOTA2: La fuente usada es Vibur y su código es el siguiente:
<link href="https://fonts.googleapis.com/css?family=Vibur" rel="stylesheet">
Código con fuente
<link href="https://fonts.googleapis.com/css?family=Vibur" rel="stylesheet"><table style="background-color: black; border-bottom: 10px solid #bc3541; border-left: 5px solid #ee5b6c; border-right: 10px solid #bc3541; border-top: 5px solid #ee5b6c; height: 600px; padding: 10px; width: 600px;"><tbody><tr><td><center><div style="background-color: #f99d71; border: 2px double white; color: white; font-family: "vibur" , cursive; font-size: 40px; padding: 5px; text-align: center; text-shadow: 2px 2px 2px black; width: 400px;"><div class="separator" style="clear: both; text-align: center;">Título</div></div></center></td><td><div style="background-image: url(IMAGEN); border-radius: 100%; border: solid 3px; height: 200px; margin-left: 20px; width: 200px;"></div></td></tr><tr><td><div style="color: white; height: 400px; padding: 10px; width: auto;"><div style="text-align: justify;">Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</div></div></td><td><div style="background-color: white; height: 300px; padding: 12px; text-align: center; width: auto;"><u>xxx</u>: -<br /><u>xxx</u>: -<br /><u>xxx</u>: -<br /><u>xxx</u>: -</div></td></tr></tbody></table>
Ejemplo
♡_____ ♡ AAAAAAAAH, qué bonita que está.
ResponderBorrarMe la anoto por si en algún momento puedo ocuparla.
Gracias, Yuki.
¡Hola! Muchas gracias por anotártela :)
BorrarUn beso
¡Hola! ¡Qué bonita te ha quedado! Me gustó mucho <3 Sobre donde o cómo ponerla, podrías agregarla como recurso, ya que no es un tutorial, que encajaría mejor.
ResponderBorrar¡Un abrazo! Y gracias por campartirla <3
¡Hola! Pues que buena idea me diste. Lo coloqué como recurso aunque no tengo una sección que se llame así, quizá vaya a editar alguna
BorrarUn beso
Holaaa
ResponderBorrarMuy interesante la entrada, me parece de mucha utilidad ^^
Quedó muy bonito
Un beso!
¡Hola! Me alegro que te guste mucho, muchas gracias por los ánimos
BorrarUn beso
¡Hola, Yuuki!
ResponderBorrarMe parece un tutorial o recurso muy bueno para los que quieren algo diferente:D Tal vez cuando haga algún cambio en el blog vuelva a esta entrada.
¡Besos!
¡Hola! Me alegro que te guste :)
BorrarNo creo que sea lo mejor de lo mejor la verdad, pero bueno, gracias por tenerlo en cuenta
Un beso
Genial, gracias por el tuto Yuuki
ResponderBorrarDe nada Satoshi-san ^^
Borrar¡Muy buen tutorial! No había visto uno así hasta ahora y siempre sirven estas cositas para el blog, me encantan los detalles de este estilo. Gracias ♥
ResponderBorrar