| |
|---|
|
👉 Snippet: En este post aprenderemos cómo diseñar cajas de colores con HTML y CSS para destacar textos. |
👉 Estaremos estudiando las cajas de colores en HTML y CSS para destacar los textos más importantes en nuestras webs y blogs. De esta manera conseguiremos salir del típico artículo plano, en el que tanto los textos importantes como los de relleno tienen el mismo aspecto.
Esta es una técnica muy útil para crear textos destacados, que también podrás implementar en tus Call to Action o CTA, las famosas llamadas a al acción en cristiano 😉
Portafolio de temas
- 1 ¿Por qué destacar textos con cajas de colores?
- 2 ¿Cómo hacer cajas de colores en HTML y CSS?
- 3 Diseñar una caja de colores con HTML + CSS
- 4 Ejemplos de cajas de colores HTML y CSS
- 5 Crear cajas de colores en HTML y CSS con bordes diferentes
- 6 Cajas múltiples anidadas
- 7 La forma PRO de crear tus cajas de colores en HTML y CSS
- 8 Consultas
😎 ¿Por qué destacar textos con cajas de colores?
Es conocido que el tiempo de estancia o permanencia en una página es un factor muy determinante para el posicionamiento. Por lo que es probable que, cuanto más a gusto esté el lector en un post, más tiempo pasará en esa web. Y, esto se logra conjugando calidad del argumento con la calidad de la presentación del mismo.
Además, es muy seguro que el mensaje que quieras transmitir llegará mucho mejor a los visitantes de tu web o blog. 😉
Todos sabemos que los usuarios escanean y que, en general, no se detienen a leer el texto completo. De hecho, este servidor suele saltarse los párrafos largos, en el entendido que el autor se habrá preocupado por destacar aquellos importantes. ¡Es un común denominador en los lectores!, "querer ir al grano". particularmente en la actualidad, donde hay muchísima información en internet, y el lector cuando aterriza en una web es con un propósito ya predeterminado.
Aunque por increíble que parezca, no siempre es así 😳
¿No te encuentras con post que no tienen negritas o puntos y aparte? ... ¡aburrido verdad!!!
No cuesta nada, escribir párrafos cortos, añadir algunas negritas, cursivas y dividir en apartados para hacer la lectura más agradable. El artículo de por sí es interesante e importante para todo autor, pero para extrapolar esas cualidades, hay que trabajar en el diseño. 🙄
Sin embargo, si aún siguiendo estas reglas básicas de SEO OnPage, ves que no es suficiente o que algunos de tus párrafos necesitan algo más de amor o atención, puedes diseñar cajas de colores HTML con CSS para destacar lo textos.
IR A PORTAFOLIO😎¿Cómo hacer cajas de colores en HTML y CSS?
La técnica para crear cajas de colores en tu web es bastante sencilla. Aunque veremos también una opción más PRO al final del post, que es «casi» igual de fácil.
Lo ideal es aprender un poco de HTML, ya que trabajaremos desde el editor HTML.
➡ Si usas WordPress, pues desde el editor HTML de WordPress
Por lo menos, para que sepas de qué estamos hablando y que te resulte más sencillo el tutorial 😀
No obstante, te dejo los códigos a la vista para que puedas copiar y pegar en tu web, «sin tener ni papa» de conocimiento de HTML o CSS. Así igualmente podrás tener este tipo de cajas en tu web.
IR A PORTAFOLIO😎 Crear las cajas de colores en 7 pasos
Metodología 😀
Consideraciones previas:
Para que la exposición mantenga una estructura metodológica y pedagógica, que te permita orientarte más fácilmente, evitando confusiones o divagaciones, se expone seguidamente la secuencia recomendada para la elaboración de cajas de colores con HTML y CSS para destacar tus textos. Los pasos son muy sencillos. Simplemente replícalos con cuidado en el orden expuesto y siguiendo al detalle todas las instrucciones y recomendaciones que fundamentan cada uno de los 7 pasos. En algunos de ellos se suministran enlaces externos de apoyo (como generadores) para ampliar o facilitar la puesta en práctica del conocimiento. Verás que no requieres muchos conocimientos de HTML y CSS
Aquí los 7 pasos 😀
😎 Diseñar una caja de colores con HTML + CSS
Vamos a diseñar una caja básica siguiendo los pasos antes enumerados.
1 Para definir el elemento HTML, escribe o «copia y pega» este código en tu editor HTML. Puedes apoyarte con cualquiera de los generadores online de códigos, como el que consigues en esta página.
<p style="background:color preferido;">¡Hola mundo!</p>
Como se aprecia, trabajarás colocando dentro de la etiqueta <p> el atributo (background) que es el que nos permitirá conferir color a nuestra caja.
2 Luego, para darle un color de fondo (background), consulta el código que corresponde a tu color preferido, en una paleta de colores; para tal finalidad, puedes consultar los códigos en el enlace siguiente de colores
Puedes ver que puedes colocar el nombre del color: Crimson o su código RGB: #8000FF .
El resultado será:
<p style="background:Crimson;">¡Hola mundo!</p>
¡Hola mundo!
Como verás tenemos una caja, pero no con el aspecto que queremos 😳
3 Así que vamos con el paso 3, personalizar el texto. Que de momento pintaremos de blanco (color) y le daremos más grosor (font-weight).
<p style="background:Crimson; color:white; font-weight:bold;">¡Hola mundo! (caja de colores con texto blanco)</p>
¡Hola mundo! (caja de colores con texto blanco)
4 Como este contenedor tampoco es exactamente lo que queremos, vamos con el paso 4 para darle espacios internos a la caja (padding).
<p style="background:Crimson; color:white; font-weight:bold; padding:15px;">Tu primera
caja de colores con espacios internos</p>
Aquí la cosa va mejorando y se parece más a lo que buscamos ¿no?
5 Ok, pues añadamos entonces un borde (border), por ejemplo de 3px, que es el paso número 5.
<p style="background:Crimson; color:white; font-weight:bold; padding:15px; border:3px solid purple;">¡Hola mundo! )caja de colores con borde)</p>
¡Hola mundo! (caja de colores con borde)
6 Y como paso número 6, asignamos el margen superior (margin-top) e inferior (margin-bottom). En mi caso no ha sido necesario porque todos mis párrafos ya tienen un margen establecido.
No obstante, le aplico unos márgenes de 100px para que el efecto quede claro.
<p style="background:Crimson; color:white; font-weight:bold; padding:15px;border:3px solid purple;
margin-top:100px; margin-bottom:100px;">¡Hola mundo! (caja de colores con margen superior e inferior)</p>
¡Hola mundo! (colores con margen superior e inferior)
7 Y para finalizar, puedes también hacer ajustes en el tipo de letra. aplicando un font-family a tu caja. El html quedaría así:
<p style="background:Crimson; color:white; font-weight:bold; padding:15px;font-family:algerian;border:3px solid purple;
margin-top:100px; margin-bottom:100px;">¡Hola mundo! (caja de colores con margen superior e inferior)</p>
El resultado es el siguiente:
¡Hola mundo! (caja de colores con fuente algerian)
Y ahora, si quieres puedes alinear el texto al centro (text-align), cambiarle el tamaño (font-size) y ajustar los colores a tu gusto.
<p style="background:#FF813E; color:white; font-weight:bold; padding:15px; border:
3px solid #B34F19;margin-top:40px; margin-bottom:40px; text-align:center; font-size:22px;"> ¡Hola mundo!
(Tu primera caja de
colores personalizada con HTML + CSS)</p>
¡Hola mundo! (Tu primera caja de colores personalizada con HTML + CSS)
Para rematar la faena, vamos a redondear las esquinas (border-radius).
<p style="background:#FF813E;color:white; font-weight:bold; padding:15px; border:3px solid #B34F19; margin-top:40px;
margin-bottom:40px; text-align:center; font-size:22px; border-radius:10px;"> ¡Hola mundo! (Tu caja de colores
personalizada con HTML y CSS)</p>
¡Hola mundo! (Tu caja de colores personalizada con HTML y CSS)
PUNTUALIZANDO: Teniendo claro el concepto, ya eres capaz de crear cajas con los atributos que tú quieras 😆
😎Ejemplos de cajas de colores HTML y CSS
Si te apetece practicar, cambia en los ejemplos el color de fondo, el texto, el grosor y color del borde, la distancia entre la caja y el elemento anterior, el posterior… para conseguir diferentes tipos de cajas de colores HTML y CSS con las que llamar la atención sobre los textos.
<p style="background: #e2fdf4; color: #0ebd84; font-weight: bold; padding: 15px;
border: 2px solid #bdfae6; border-radius: 6px;">¡Hola mundo! (caja de color verde y cantos redondeados)</p>
¡Hola mundo! (caja de color verde y cantos redondeados)
<p style="background: #bdf0fa; color: #0c92ac; font-weight: bold; padding: 15px;
border: 2px solid #abecf9; border-radius: 6px;">¡Hola mundo! (caja de color azul y cantos redondeados)</p>
¡Hola mundo! (caja de color azul y cantos redondeados)
<p style="background: #fcdbe6; color: #f15c8e; font-weight: bold; padding: 15px;
border: 2px solid #fac9d9; border-radius: 6px;">¡Hola mundo! (caja de color rosa y cantos redondeado)s</p>
¡Hola mundo! (caja de color rosa y cantos redondeados)
<p style="color: #a2a2a2; font-weight: bold; padding: 15px; border: 2px solid #d8d8d8; border-radius: 6px;">¡Hola mundo!
(color blanco y cantos redondeados)</p>
¡Hola mundo! (caja de color blanco y cantos redondeados)
NOTA: Es posible que por la configuración de los párrafos de tu web, debas ajustar la propiedad line-height, que indica la distancia en altura entre las líneas de un mismo párrafo.
Con esto, creo que tienes información suficiente como para crear cajas HTML decoradas con CSS a partir de un párrafo. A pesar de ello, vamos a ver unos ejemplos más que te resultarán interesantes.
IR A PORTAFOLIO😎Crear cajas de colores en HTML y CSS con bordes diferentes
Si te has fijado, este es un recurso que utilizo mucho en todos mis blog (si además de éste, sigues mis otros blogs), y es tan fácil como el anterior.
En este caso lo que trabajaremos será solo el borde de uno o dos lados 😉
Siguiendo el mismo orden que en los ejemplos de cajas de colores, y solo modificando la propiedad border, podrás conseguir estos efectos:
<p style="background: #f7f5f5; font-weight: bold; padding: 15px; border-left: 5px solid #ff0080;">¡Hola mundo!
(Caja de colores HTML y CSS con borde a la izquierda)</p>
¡Hola mundo! (Caja de colores HTML y CSS con borde a la izquierda)
Si quieres el borde más grueso, solo tienes que asignarle más píxeles.
¡Hola mundo! (Caja de colores HTML y CSS con borde grueso a la izquierda)
Y si lo quieres a la derecha, cambia la propiedad border-left por border-right.
<p style="background: #f7f5f5; font-weight: bold; padding: 15px; border-right:5px solid #ff0080;">¡Hola mundo!
(Caja de colores HTML y CSS con borde a la izquierda)</p>
¡Hola mundo! (Caja de colores HTML y CSS con borde a la derecha)
Para bordes arriba y/o abajo, utiliza las propiedades border-top y border-bottom.
<p style="background: #f7f5f5; font-weight: bold; padding: 15px;
border-top:2px solid #ff0080; border-bottom:2px solid #ff0080;">¡Hola mundo! (Caja de colores HTML y CSS con
borde arriba y abajo)</p>
¡Hola mundo! (Caja de colores HTML y CSS con borde arriba y abajo)
Si le asignas border y border-radius solo a uno de los lados, también quedará curioso 😀
<p style="background: #f7f5f5; font-weight: bold; padding: 15px;
border-left:8px solid #ff0080; border-top-left-radius:8px; border-bottom-left-radius:8px;"> ¡Hola mundo!
(Caja de colores HTML y CSS con borde redondeado a la izquierda)</p>
¡Hola mundo! (Caja de colores HTML y CSS con borde redondeado a la izquierda)
O puedes poner el border y el border-radius en lados opuestos.
¡Hola mundo! (Caja de colores HTML y CSS con borde y borde redondeado en lados opuestos)
Pero también se puede hacer este trabajo con el contenedor <div>. Veamos:
El html es:
<div class="box-lime">¡Hola mundo!</div>
El CSS es:
<style>
.box-lime
{
margin:0 0 25px;
overflow:hidden;
padding:20px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: 00FF00;
border:1px solid #32CD32; ;
}
</style>
El resultado es:
Como verás, una vez le coges el truco no es nada complicado 😆
IR A PORTAFOLIO😎 Cajas múltiples anidadas
Cajas múltiples anidadas hace referencia a la posibilidad de colocar varias cajas (cajas múltiples) dentro (cajas anidadas) de una caja (o más de una, como se aprecia en el ejemplo) principal. Con la facilidad de la amplia explicación detallada anterior, vamos a analizar la tabla siguiente, hecha con códigos HTML, y, a la que le seguirán comentarios sobre cada una.
HOLA MUNDO
Modelo 1
Modelo 2
Modelo 3
HOLA MUNDO sería la caja principal. Dentro de esta caja se encuentra "ANIDADA" una caja VERDE, la cual a su vez anida a tres cajas más, identificadas como Modelos 1, 2 y 3. Es decir, una caja puede contener (anidar) otra caja que contiene a su vez otras cajas.
Puede apreciarse que los modelos 1, 2 y 3 fueron diseñadas con estilos diferente. El Modelo 1 con radio derecho (sin color) y con un borde izquierdo a color.
El modelo 2 fue diseñado con sus 4 bordes redondeados. Y, el modelo 3, tipo rectangular con sus bordes izquierdo y derecho a color.
Todas esos estilos fueron explicados en los párrafos anteriores, de manera que este modelo, sirve de práctica y repaso.
Además. intencionalmente se aplicaron tres estilos distintos, para enfatizar que el autor tiene la posibilidad de escoger el de su preferencia.
Puede apreciarse también como los modelos 1, 2 y 3 sobresalen de la sub-caja VERDE dando de esta forma un estilo particular.
El HTML es el siguiente: IR A PORTAFOLIO
😎La forma PRO de crear tus cajas de colores en HTML y CSS
👉 Uno de los inconvenientes de meter tanto código en línea para crear cajas de colores, es que «ese código solo sirve para ese elemento en esa URL».
Además, todo esto en un editor HTML, sobre todo en el de WordPress, puede resultar bastante abrumador. Por eso los profesionales del diseño web, suelen crear las cajas de otra forma.
👉 La idea es separar el código HTML del CSS
Pero no te preocupes que te hago un resumen rápido 😉
Asignando una clase a tu párrafo, conseguirás que cada párrafo de esa clase tenga un mismo estilo CSS previamente asignado. Y lo tendrá en cualquier URL de tu página web.
Es decir, si tienes 1 párrafo de la clase «caja-destacada» en 3 post diferentes, en todos tendrán el mismo estilo que has asignado una sola vez.
Escribe esto en tu editor HTML:
<p class="caja-destacada">¡Hola mundo!</p>
<div class="caja-destacada"> ¡Hola mundo! </div>
Luego, en mi hoja de estilo CSS style.css , voy a crear un nuevo estilo al que llamaré «caja» y le daré las propiedades básicas siguientes:
.caja-destacada {
font-family: sans-serif;
font-size: 38px;
font-weight: 400;
color: #ffffff;
background: #889ccf;
}
Los estilos CSS se pueden colocar en cualquiera de estos 3 lugares:
- Entre las etiquetas <style></style> del header.
- En el archivo style.css de tu tema.
- En el apartado de código CSS personalizado de tu plantilla.
He indicado tipo, tamaño, grosor y color de fuente, así como el color de fondo de la caja (background).
Seguidamente, en mi editor de html (en WordPress: editor de texto de página) voy a probar el estilo que acabo de crear. Para ello utilizo la etiqueta class convencional:
<div class="caja-destacada">¡Hola mundo!</div>O la etiqueta class para párrafos:
<p class="caja-destacada">¡Hola mundo!</p>Y el resultado será este (que será igual en ambos casos):
¡Hola mundo!Vamos a seguir dándole propiedades a nuestro texto en caja.
Para que el texto no se quede «pegado» a la caja, vamos a darle aire mediante el padding. Podemos darle un padding general o desglosar el padding para controlar mejor las proporciones. En este caso le voy a dar un padding de 20px por todos los lados:
padding: 20px;Pero si quisiera desglosarlo sería así:
padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;O así:
padding: 20px 20px 20px 20px;después le damos un margen a nuestra caja mediante la propiedad margin:
margin: 0 0 25px;Por último definimos el comportamiento de los elementos de la caja cuando no caben en su elemento contenedor, con la propiedad overflow:
overflow: hidden;En este caso, todo lo que quede fuera de la caja quedará oculto, pero podremos solucionarlo utilizando la etiqueta div para párrafos. De esa forma nada se saldra de nuestra caja pues la caja será todo el párrafo.
Nuestro código hasta el momento será este:
.caja-destacada { font-family: sans-serif; font-size: 38px; font-weight: 400; color: #ffffff; background: #889ccf; margin: 0 0 25px; overflow: hidden; padding: 20px; }Nuestra caja resultante hasta el momento queda así:
¡Hola mundo!Ahora voy a darle la propiedad border-radius para que mi caja tenga bordes redondeados. Para no complicarnos la vida os recomiendo que uticéis la herramienta CSSmatic que nos crea automáticamente el estilo de los bordes mientras lo vamos previsualizando. También nos permite definir el grosor y color del borde así como el fondo de la caja.He decidido darle un radio de 35px en las esquinas superior izquierda y superior derecha para crear cajas asimétricas. también le he añadido un borde de 2px en un tono más oscuro:
border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; -webkit-border-radius: 35px 0px 35px 0px; border: 2px solid #5878ca;Mi caja casi está lista:
¡Hola mundo!Observado el resultado voy a cambiar algunas propiedades y a añadir alguna más para ajustar el diseño.
Haré que por defecto los textos de mi caja queden centrados con la propiedad text-align y cambiaré la font-family a una tipografía geométrica sin serif, que sería la algerian, Un último efecto, muy usado actualmente es el de sombra, con solo agregar shadow. :
text-align: center; font-family: algerian; -webkit-box-shadow: 82px 5px 122px -9px rgba(240,34,75,0.75); -moz-box-shadow: 82px 5px 122px -9px rgba(240,34,75,0.75); box-shadow: 82px 5px 122px -9px rgba(240,34,75,0.75);Con estos últimos cambios ya tengo la caja que estaba buscando. En el editor de html de mi WordPress, llamo a mi caja mediante la etiqueta div class:
<div class="caja-destacada">Hola mundo!</div>Ya puedo ver el resultado final:
.¡Hola mundo!
La importancia de redactar esta publicación en varias secciones de la caja, es que se puede apreciar el comportamiento de sus diferentes elementos, que para el inexperto, sin conocimientos básicos, que busca decorar su web copiando modelos, pueda ajustar los valores y saber la finalidad de cada componente de la caja y que aparecen en el siguienrte código, que hemos construído "paso a paso" quedando de la forma siguiente:
/*----------- CAJA ----------- */ .caja-destacada { font-family: algerian; color: #ffffff; font-size: 38px; font-weight: 400; text-align: center; background: #889ccf; margin: 0 0 25px; overflow: hidden; padding: 20px; border-radius: 35px 0px 35px 0px; -moz-border-radius: 35px 0px 35px 0px; -webkit-border-radius: 35px 0px 35px 0px; border: 2px solid #5878ca; -webkit-box-shadow: 82px 5px 122px -9px red; -moz-box-shadow: 82px 5px 122px -9px red; box-shadow: 82px 5px 122px -9px red; }😉 Yeah!
Y tendrás una caja como la que hemos configurado, lista para ser usada en cualquier parte de la web, solo asignando a cualquier párrafo la clase «caja-destacada», o el nombre que le hayas puesto.
