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!

16 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
    Respuestas
    1. ¡Gracias! Tengo la idea, a ver si llego a publicarla antes de que termine la semana <3

      ¡Muchos besos!

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

    ResponderEliminar
    Respuestas
    1. ¡Gracias! Mientras les sirva, yo encantada de hacerles el tutorial <3

      ¡Un abrazo!

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

    ResponderEliminar
    Respuestas
    1. ¡Qué bueno que las encuentres útiles! Con gusto, comparto así <3 si tienes dudas, me avisas.

      ¡Un abrazo!

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

    http://rockeandomientrassepueda.blogspot.com/

    Besos.

    ResponderEliminar
    Respuestas
    1. Voy a pasar a verlo ¡Gracias por la recomendación!

      ¡Muchos besos!

      Eliminar
  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
    Respuestas
    1. Puede ser un poco complejo, manejar tantos colores, más que nada, la organización que tiene blogger, pero si tienes algún editor que usar, como Visual Code, se vuelve muchísimo más sencillo hacerlo <3

      Me anoto la página que yo suelo usar la que dejé en el post y otra más xD

      ¡Un besito!

      Eliminar
  7. ¡Hola guapa!
    Vaya por dios, que trabajo... he comenzado a leer y todo me parecía chino. Pero es todo un detalle de tu parte.
    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. En serio, no es tan complicado como parece <3 si te animas alguna vez y quieres consultar, aquí me tienes

      ¡Un besito!

      Eliminar

¡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!

Te invito a soñar conmigo en: