#tablitas

Yo acá, de nuevo, después de mucho tiempo...

Estaba aburrida y me puse a hacer este diseño que simplemente se me ocurrió. Es una firma sencilla con espacio para poner dos iniciales en la parte izquierda superior, tres textos cortos y un texto ligeramente mas largo en el centro.

La imagen es de 180x180 tengan en cuenta que se va a recortar para entrar en la forma que se muestra. Traten de que el texto no sea mas largo del que ahí aparece porque se puede empezar a salir del div.

La imagen que usé la pueden usar también, la hice con IA y viene con la tablita.

Les dejo entonces el link a ControlC y a CodePen

En codepen solo deben copiar el apartado del HTML, lo de CSS no.

Me inspiré en Nightwalker de Ten y creé esta tablita. Se va a estirar cuan largo sea el texto. En el subtitulo les recomendaría poner algo corto porque el recuadro marrón no se expande. Los botoncitos de abajo de todo tienen el atributo "title" para que agreguen información adicional. Dejé en el css el crédito de la fuente. En cuanto a la imagen es de 600x300px y pueden ponerla de cualquier color que se va a ajustar con el filtro que ven en la preview.

Lo pensé para que sea usada como para postear, pero la realidad es que pueden usarla como prefieran.

Les dejo el link a ControlC y a CodePen.

En codepen solo deben copiar el apartado del HTML, lo de CSS no.

Me inspiré en Calico de DPR Ian y creé esta tablita. Tiene un largo fijo, asi que lo que no entre se irá directo en scroll como se vé en la imagen. El título puede ser tan largo como lo es la tablita, si excede esa medida puede que se deforme. Es bastante sencilla, si usan la etiqueta "b" para la negrita, e "i" para la itálica las letras tomarán el formato que se ve en la imagen.

Lo pensé para que sea usada como para postear texto plano, pero la realidad es que pueden usarla como prefieran.

Les dejo el link a ControlC y a CodePen.

En codepen solo deben copiar el apartado del HTML, lo de CSS no.

Esta es una tablita para una tienda, tiene bastante espacio superior para poner texto aunque también es flexible y se puede achicar. Los titulos de "tipo de ítem" también se pueden quitar y en la parte donde se exponen las imágenes, estas se van acomodando solas. Al pasar el cursor por cada una abre un pequeño div con información y también, al sostener el cursor sobre cualquiera de las imágenes estas muestra su correspondiente tooltip, útil para poner el nombre del ítem.