Cajas de texto sencillas con CSS

En este artículo os voy a dejar simplemente algunos ejemplos sencillos de cajas de texto implementados con CSS, por si os sirven de ayuda o si os resultan útiles para vuestras páginas web.

Ejemplo 1:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

.aviso {
    background-color: #fff;
    border-left: 5px solid #5499C7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-size: 14px;
    text-align: left;
    padding: 15px;
    color: #2E4053;
    width: 100%;
}

Ejemplo 2:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

.aviso2{
    background-color: #fff;
    border-left: 5px solid #f65d52;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-size: 14px;
    text-align: left;
    padding: 15px;
    color: #2E4053;
    width: 100%;
}

Ejemplo 3:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

.aviso3{
    background-color: #fff;
    border-left: 5px solid #16A085;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-size: 14px;
    text-align: left;
    padding: 15px;
    color: #2E4053;
    width: 100%;
}

Ejemplo 4:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

.aviso4 {
    background-color: #FCF3CF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-size: 14px;
    text-align: left;
    padding: 15px;
    color: #2E4053;
    width: 100%;
}

Ejemplo 5:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

.aviso5 {
    background-color: #F5EEF8;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-size: 14px;
    text-align: left;
    padding: 15px;
    color: #000;
    width: 100%;
}
Scroll al inicio
WordPress Appliance - Powered by TurnKey Linux