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%;
}