ReInSpirit

Como hacer cajas de colores con esquinas redondeadas con CSS en Wordpress

por 30 comentarios

Para utilizar ciertos estilos con CSS no necesitamos ser programadores, dise帽ores profesionales ni nada por el estilo. Podemos incluir ciertos elementos en nuestro sitio web utilizando el c贸digo que ya existe. Agradecemos que compartan este tutorial por brindar esta informaci贸n.

Si lo que necesitamos en nuestro dise帽o son cajas de colores con esquinas redondeadas para incluir contenidos en su interior sigue leyendo este art铆culo:

Vamos a ver como podemos hacer esto de forma r谩pida y sencilla. Si queremos crear cajas de color sin esquinas tambi茅n se puede utilizar este c贸digo, lo 煤nico que hace falta es eliminar una parte de este para que quede con la esquina normal.

馃煢 A帽adir cajas de contenido con esquinas redondeadas

El secreto para hacer sus esquinas redondeadas es el siguiente c贸digo.

-webkit-border-radius: 10px;
border-radius: 10px;

Si lo necesitas puedes quitar f谩cilmente el efecto de esquina redonda quitando el c贸digo anterior dentro de los corchetes.

.box-blue {
margin:0 0 25px;
overflow:hidden;
padding:20px;
background-color:#6BD5F1;
border:1px solid #afcde3;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Puede utilizar este c贸digo y crear m谩s c贸digo para cada color. Adem谩s puedes cambiar los colores del c贸digo hexadecimal y utilizar tu propio color 煤nico.

El c贸digo de color azul anterior hace que las esquinas queden redondeadas. Puedes cambiar los valores en p铆xeles para modificar a tu propio gusto.

Aqu铆 puedes ver un ejemplo.

Resultados Utilizando 5 px de radio

5px

Resultados Utilizando 20px radio

20px

A帽adir el c贸digo en el editor HTML.

Una vez que hemos a帽adido el c贸digo para el archivo style.css de nuestro theme de Wordpress, a帽adimos este c贸digo en el editor HTML de la entrada o p谩gina.

Cada caja usar谩 un selector diferente.

caja

馃煩 C贸digo para rect谩ngulos con esquinas redondeadas

Aqu铆 est谩 el c贸digo CSS para las cajas con esquinas redondeadas.

/* Cajas con contenido de color */

.box-blue,
.box-gray,
.box-green,
.box-grey,
.box-red,
.box-yellow {
	margin:0 0 25px;
	overflow:hidden;
	padding:20px;
	-webkit-border-radius: 10px;
        border-radius: 10px;
}

.box-blue {
	background-color:#d8ecf7;
	border:1px solid #afcde3;
}

.box-gray {
	background-color:#e2e2e2;
	border:1px solid #bdbdbd;
}

.box-green {
	background-color:#d9edc2;
	border:1px solid #b2ce96;
}

.box-grey {
	background-color:#F5F5F5;
	border:1px solid #DDDDDD;
}

.box-red {
	background-color:#f9dbdb;
	border:1px solid #e9b3b3;
}

.box-yellow {
	background-color:#fef5c4;
	border:1px solid #fadf98;
}

Copia y pega el c贸digo CSS de arriba en el archivo style.css del tema de Wordpress. El siguiente c贸digo lo tienes agregar en el editor de texto para cada color de la caja.

/* A帽ade una de estas lineas HTML en tu editor de texto de WordPress para cada caja*/

<div class="box-blue">Incluye tu contenido aqu铆.</div>

<div class="box-gray">Incluye tu contenido aqu铆.</div>

<div class="box-green">Incluye tu contenido aqu铆.</div>

<div class="box-grey">Incluye tu contenido aqu铆.</div>

<div class="box-red">Incluye tu contenido aqu铆.</div>

<div class="box-yellow">Incluye tu contenido aqu铆.</div>

Es posible cambiar de forma sencilla los colores editando el c贸digo hexadecimal para los colores del fondo y los bordes para hacerlos a gusto de cada uno.

En la siguiente imagen puedes ver una prueba con el CSS y HTML del c贸digo de los ejemplos anteriores:

cajas de colores con esquinas redondeadas

Ahora ya puedes crear tus propias cajas de colores sin necesidad de tener conocimientos avanzados o tener que instalar un plugin.

..Entradas Relacionadas

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  4. Zona Ocho dice

    Buenas…pues el destino me ha vuelto a traer por aqu铆, jeje. Te voy a tomar como referencia para todo este tipo de cosillas.

    Tengo una duda que a ver si t煤 me puedes resolver: en Firefox no me aparecen las esquinas redondeadas…y me estoy volviendo loco!

    Gracias de nuevo

    Responder

    • Pedro Mendez dice

      Hola bienvenido de nuevo a esta, nuestra casa jeje. 驴Tienes una url para poder ver donde aparecen las cajas? Y as铆 lo veo yo desde mi navegador a ver que tal

      Responder

  8. Gu铆a de Tailandia dice

    Hola,

    Muchas gracias por el post, es justo lo que estaba buscando y no encontraba. Pero tengo una pregunta. No hay un plugin para hacer estas cajas de colores sin tener que estar metiendo un div a mano?
    Veo que muchos bloggers ponen al final de sus post en un recuadro de estos, con un color de fondo diferente, diciendo me qued茅 en este hotel, puedes comprar esta gu铆a, etc… con enlaces de afiliados. Pero no s茅, esperaba que wordpress tuviese alguna forma de hacer estas cajas con un par de clicks…

    En cualquier caso, gracias por el post, porque me sirve para hacer lo mismo.

    Saludos.

    Responder

    • Pedro Mendez dice

      Hola se帽@r Gu铆a jejej,
      Pues se pueden hacer con plugins de shortcodes o con los constructores de p谩ginas tipo Visual Composer o Divi, pero el problema es que si cambias de plugin o de page builder lo pierdes todo. Por este motivo para el dise帽o siempre es preferible no tirar de plugins y hacerlo a mano. De todas formas solo es copiar y pegar un par de c贸digos. Saludos!

      Responder

  9. Alberto dice

    Buenas! queria saber si se puede centrar el cuadro de alguna manera ya que lo intento poner en un slideshow y no se como moverlo hacia la derecha. Gracias y genial aporte!

    Responder

      • Boos dice

        Bueno deja me explico mejor, mi intenci贸n es poner tres cajas contenedoras de manera horizontal con espacios de 2px entre ellas y dentro de estos contenedores o cajas colocar texto e im谩genes al igual que un bot贸n, soy nuevo en esto y estoy aprendiendo te agradezco tu tiempo

        Responder

  11. deibis contreras dice

    Hola buenas tardes muy bueno tu post, me sirvio de mucho, yo me encuentro realizando una pagina local y me gustar铆a que el cuadro de color se viera simplemente en unas de las columnas de una , como se podra realizar,
    cabe destarcar que en esa columna tengo varias celdas

    caracas.

    ma帽ana como estas

    tiene que ser todo el cuadro pegado

    si no no funciona

    esto es un nuevo d铆a

    sigo aprndiendo

    cuando coloco este codigo el cuadro de colores me cubre toda la tabla, yo quiero que me cubra simplemente todala primera columna,

    Gracias y saludos.

    Responder

  12. Randy dice

    Hola amigo,

    Me gustar铆a saber como pones el c贸digo html y css en colores y con los n煤meros de las l铆neas a la izquierda, como lo has hecho en este post.

    Un saludo!!

    Responder

    • Pedro Mendez dice

      Hola Randy. Pues solo tienes que poner el c贸digo html a principio del texto 

      <div class="box-blue">Incluye tu contenido aqu铆.</div>

      y listo

      Responder

  15. InteresTrips dice

    Hola!

    Muchos blogs utilizan este tipo de recuadros de colores para resaltar y llamar la atenci贸n de los lectores.

    Dentro de este universo de variedades que se puede encontrar en la web, hay algunos m谩s est茅ticos que otros, pero siempre hablando de este tipo de recuadros css.

    Ahora bien, la consulta de rigor que a muchos aficionados del SEO les preocupa o compete:

    -Este tipo de c贸digo genera un impacto relevante en el tiempo de carga de la p谩gina web?

    -Entiendo hacerlo manualmente introduciendo un c贸digo deber铆a tener menos impacto que si utilizamos un plugin de wordpress.

    Nunca dejan de cumplir su o objetivo, realmente llaman la atenci贸n.

    Gracias, Saludos!

    Responder

    • Pedro Mendez dice

      Hola,
      Es mas el beneficio que perjudicial, pues mejora la usabilidad y la lectura en los contenidos.
      Gracias por tu aporte.
      Saludos!

      Responder

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.