Cajas con estilo en HTML y CSS

Buenas, hoy les traigo cajas para códigos, avisos, mensajes... Están hechas con HTML y CSS, por lo que las podrán usar en sus páginas web sin problema. Aquí tienes una demostración:


Demostración:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Para insertar una o varias de estas cajas en tu web, deberás poner los siguientes códigos (el código para el HEAD solo es necesario que lo pongas una vez). Si no sabes donde poner los códigos, haz clic aquí.

CÓDIGO HTML

<div class="box_jdesigns.jimdo.com">

    <p style="text-align: center;">

    </p>

    <h3 style="text-align: center; color: white; font-size:20px; line-height:25px;">

        <br>

        Tu texto va aquí.<br>

        <br>

    </h3>

</div>

En el código HTML puedes modificar las siguientes partes:

  • Para cambiar el color de letra, modifica la parte en verde.
  • Para modificar el tamaño de letra, modifica la parte en rojo, pero luego súmale 5 al número que hayas puesto y pónlo en lugar del 25px que aparece en amarillo claro. Ten cuidado de no borrar "px" o no funcionará.
  • Para modificar el texto que aparece en la caja, modifica la parte en naranja.

CÓDIGO PARA EL HEAD

<style type="text/css">

.box_jdesigns.jimdo.com{

background-image: url(http://2.bp.blogspot.com/-IO3j9J8CwI4/VHmf9ZD-K7I/AAAAAAAAJ54/8RxTonGEX4Q/s1600/colorful-triangles-background.jpg);

font-family: Open Sans;

color: white;

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

-moz-border-radius: 5px 10px;

text-align: center;

text-color: white;

width: 100%;

align: center;

padding: 10px;

}

</style>

En el código CSS para el HEAD de tu web puedes modificar las siguientes partes:

  • Para cambiar la imagen de fondo, sutituye el link en rojo por el de tu imagen.
  • Para cambiar el ancho, modifica (en tanto por ciento) la parte en naranja. Si sustituyes "%" por "px", podrás trabajar con anchuras en píxeles.

Escribir comentario

Comentarios: 2
  • #1

    c (miércoles, 22 febrero 2017 22:29)

    ccc

  • #2

    Spotify (miércoles, 27 septiembre 2017 13:27)

    Hola