Cajas bordeadas con color y texto.
Un sencillo tutorial con CSS
Voy a explicar como hacer con CSS una caja para texto asimétrica y bordeada como esta:
¡Hola! Soy una caja muy estilosa
Si además quieres que el texto interior lleve un enlace con un estilo diferente puedes consultar mi entrada del blog:
Cómo crear un estilo nuevo para enlaces en WordPress
Para empezar, 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:
.caja {
font-family: sans-serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
background:#ee0467 }
He indicado tipo, tamaño, grosor y color de fuente, así como el color de fondo de la caja (background).
Ahora, 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">¡Hola! Soy una caja muy estilosa</div>
O la etiqueta class para párrafos:
<p class="caja">¡Hola! Soy una caja muy estilosa</p>
Y el resultado será este:
Vamos a seguir dándole propiedades a nuestro texto en caja. Recuerda que en esta web puedes encontrar una buena lista de propiedades CSS.
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 {
font-family: sans-serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
background: #889ccf;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
Nuestra caja resultante hasta el momento queda así:
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:
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, la Century Gothic :
text-align: center; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
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">Hola! Soy una caja muy estilosa</div>
Ya puedo ver el resultado final:
¡Hola! Soy una caja muy estilosa
/*----------- CAJA ----------- */
.caja {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
color: #ffffff;
font-size: 18px;
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;}
😉 Yeah!
Si te ha gustado el contenido comenta, comparte o mira cómo hacemos nuestras páginas web.
Muy buenas, Me ha gustado el articulos, No soy muy de comentar jeje, pero aqui estoy, un abrazo y gracias por el blog,
Muchas gracias, Natalia! 🙂
Agradecemos un montón los comentarios 😉
No dejes de subir contenido! Muy bien explicado 🙂
Gracias!
Buenas… Esta muy buena la informacion, pero tengo una duda, como hago para colocar otra caja en un lugar determinado de la página??? como coloco una caja pequeña arriba y otra al lado y otra en medio de la pantalla. ya que no se como ubicar cajas o distribuir cajas o cuadros en la página. Gracias por tus comentarios y la ayuda…
Hola Jose!
Si quieres colocar una caja al lado de la otra vas a tener que hacer 3 columnas. Si estas trabajando en WordPress y tu plantilla no tiene el código integrado hay un montón de plugins que te permiten insertar de forma automática el código de columnas para que no tengas que no tengas que generarlas en html. Por ejemplo «WP-columna» (https://es.wordpress.org/plugins/wp-columna/) . Si, por el contrario, trabajas en html puedes generar tablas online a través de esta aplicación:
http://www.tablesgenerator.com/html_tables.
De todos modos puedes escribirnos a info@marabelia.com y te ayudaremos de forma personalizada. Un saludo!
Gracias bonito tutorial y bien explicado. Aun no lo pruebo pero pienso implementarlo para crear botones compartir redes sociales ya que quiero quitar los que tengo para acelerar mi pagina.
Buen articulo.
Gracias! 🙂
Hola, que bonito diseño, me gusta mucho. Un saludo!
Muchas gracias, Guillermo!
Fácil, rápido y excelentemente bien explicado. ¡¡ Gracias!!
Muchas gracias!!! 🙂
Muchas gracias, me ha solucionado lo que necesitaba. Excelente.
¿Cómo hago más pequeño la caja del comentario?
Haciendo el font-size y el padding más pequeño…
Hola Antonio!
Creemos https://marabelia.com/css-font-size-responsive/
Gracias por comentar!
Hola Antonio!
Necesitarás medidas responsive: https://marabelia.com/css-font-size-responsive/
Muy útil información muy clara y precisa les agradezco mucho, saludos
Muchas gracias, me sirvió muchísimo.
épico, gracias de corazón
Mil gracias! 🙂
Muy buen tutorial!
Me funciona bien para navegador desde pc, pero desde movil no veo que la caja se muestre.
Que adaptaciones habria que hacer?
Hola Pedro!
En este artículo tienes la respuesta: https://marabelia.com/css-font-size-responsive/
Gracias por comentar! Un saludo!
¡Este articulo/tutorial está increible! lo amo junto a tu pagina web.
Me surgieron dos dudas:
1) ¿Como puedo achicar el ancho de la caja para que se ajuste al texto o simplemente para que no sea tan grande que toque los bordes de la página?.
2): ¿Cual es el codigo del linear gradient hermoso que utilizas en esta página, el que dice «Cajas de texto con estilo CSS»?.
¡Muchisimas gracias de antemano!.
Hola Ricardo!
1) Prueba a indicar el padding del ancho con la unidad de %. Por ejemplo 5%. Es una unidad responsive y te acoplará muy bien.
2) Si quieres un fondo de caja gradiente puedes aplicarle un background seleccionando colores aquí: https://developer.mozilla.org/es/docs/Web/CSS/linear-gradient.
El CSS de las títulos de nuestra web es privado y nos ha llevado mucho trabajo elaborarlo, pero si realmente estás interesado escríbenos a hola@marabelia.com y veremos qué podemos hacer.
Un saludo!
Hola. Necesito escribir un texto que empiece fuera del recuadro que lo contiene. Podéis aconsejarme? Gracias.
Envíanos un ejemplo! 😉
Hola. Necesito escribir un texto que empiece fuera del recuadro que lo contiene.
Gracias.
Muchas gracias !!!! buen aporte. tengo una consulta………………… como haga para que la caja aparesca donde me plasca, por ejemplo, sobre una tabla o una imagen … etc !!! ??? Saludos y desde ya muchas gracias
Muchas gracias, me ha ayudado mucho.
Muchas gracias
como puedo darle un ancho y largo especifico
Muy linda pagina y muy buena explicación, muchas gracias!
Muchas gracias, lo que buscaba!
En verdad funciona jaja
¡Por fin he conseguido hacer una caja con tu tutorial!
Mil gracias 🙂
https://ideasdeocio.com/entradas-eurovision-turin-2022-benidorm-fest/
Mil gracias!
Saludos, me parece un muy buen articulo, no encontre especificamente lo que buscaba, pero si encontre una muy importante guia, referente a las opciones en el diseño de box. Gracias
Nota: prefiero trabajar todo el codigo de diseño web paso a paso, sin utilizar prediseños, en este momento estoy rediseñando mi website soy un entusiasta en esto, apenas me entero que he utilizado varios bootstrap.