Menu

sábado, 12 de enero de 2019

Lista de colores en HTML

¡Hola, hola, mis queridos soñadores! ¿Cómo están? Para el Origireto, hice un diseño sencillo, pero diferente para los retos, debido a que la consigna así lo ameritaba para diferenciar microrrelatos de relatos y además, agregar el número del mes en que han sido usados.


Debido a esto, me tomé a la tarea de hacer una listita que pudiera editar de manera sencilla y como le gustó a la organizadora, la voy a publicar por si alguien quiere usarla.

Para descargarla completa, clic aquí, que además, les dejo un listado con colores que utilicé.

Y si quieren ver más modelitos de tablillas e índices, pueden hacerlo por aquí.



Texto

Texto

Texto

Texto

Texto

Texto


Este es el código básico, con el relleno blanco y nada más. Si quieren cambiarle el color a los cuadritos, lo que deben hacer es cambiarle el valor a esta partecita del código:

background: #fff;

Sí, justo lo que está marcado en rojo. Ahí es donde buscan el color del código en HTMLcopian y pegan.

Como algunos están en el Origireto, yo hice los cuadritos para los relatos y los microrrelatos, así si no se animan a editar el código o les parece más sencillo copiar y pegar, aquí tienen el resultado:

Codigo relato: #79C6EC
Código micrrorelato: #FFFD83

Texto
Texto


Texto
Texto


Por último y ya para ir cerrando ese mini tutorial, para colocar un número o un símbolo en el cuadrito, es tan fácil como escribir algo antes del </div> del código. Les marcaré exactamente dónde deben hacerlo:

<div style="background: #FFFD83; border: 1px solid #000; display: inline-block; font-family: "georgia"; font-size: 11px; height: 12px; margin-right: 5px; padding-bottom: 2px; text-align: center; width: 12px;"></div>Texto

El div que está marcado en rojo es al que me refería, entonces, si queremos escribir algo en el cuadrito, lo correcto es escribir antes de ese texto ¿no? Quedaría de esta manera:

<div style="background: #FFFD83; border: 1px solid #000; display: inline-block; font-family: "georgia"; font-size: 11px; height: 12px; margin-right: 5px; padding-bottom: 2px; text-align: center; width: 12px;"> 1 </div>Texto

El número lo escribí en azul para que puedan verlo mejor y darse cuenta de dónde hacer el agregado de texto. Esto, si le cambian el witdh, que es el ancho, pueden hacerlo ajustando el texto que ustedes quieran, no sólo un número, dependerá de qué es lo que deseen hacer para poder adaptarlo a su gusto.



Y es tan sencillo como eso. Arriba tienen todos los packs de códigos para descargar y si necesitan ayuda con algo aquí, pueden dejarlo por los comentarios.

¡Un abrazo!

7 comentarios:

  1. Gracias por el tutorial , te mando un beso

    ResponderEliminar
  2. Ya está el proximo jueves de relatoshttps://neogeminis.blogspot.com/2019/01/convocatoria-juevera-para-el-17-de-enero.html

    Besos.

    ResponderEliminar
  3. Me encanta lo educativo de tus entradas lml
    ¡Un abrazo!

    ResponderEliminar
  4. !Genial, me parecen magníficas tus entradas tutoriales! Todo esta bello. Mil gracias por compartir, Roxana. Me llevo anotado, debo practicar.
    Abrazo!

    ResponderEliminar
  5. Te recomiendo este blog, que merece más lcomentaristas.
    Es de una blogera con creatividad.

    http://rockeandomientrassepueda.blogspot.com/

    Besos.

    ResponderEliminar
  6. Yo creo que me liaría más si tengo cada cosa en un color, en vez de todo en el mismo. Pero tu esfuerzo no cae en saco roto, descuida. Por si te puede interesar existe una web interesante con los colores hexadecimales. Seguramente la conozcas ya, pero bueno...

    Te dejo aquí el enlace: https://www.cerotec.net/tabla-colores-web/

    Un besazo.

    ResponderEliminar

¡Hola! ¿Cómo estás? Gracias por pasar a leer mi blog y agradezco que vayas a comentar. Me encanta leer sus opiniones.

Pueden escribir lo que gusten, tienen todo el espacio que quieran para comentar ¡Y no se echen para atrás por ser una entrada vieja! Yo responderé el comentario sin importar la fecha <3

¡Qué tengas un lindo día!

¡Un abrazo enorme!