Hola que tal, hoy haremos cajas de colores con Html usando Css, una excelente forma de empezar muy bien el mes empezando a diseñar, y entrando al mundo de diseño web.
Como podemos observar Bootstrap utiliza la clase Alert-primary para identificar el color celeste, en realidad se pueden utilizar muchas clases como :
alert alert-success
alert alert-danger
alert alert-danger
Todas estas clases tienen un color que los distingue, así que lo único que tienes que hacer aquí es cambiar la clase.
En fin, vayamos entonces a lo que hemos venido, y es crear nuestras propias cajas html con CSS.
<div class="caja-roja"> Esta es una caja roja </div>
caja-roja {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
height: 100px;
margin: 0 auto 0 auto;
overflow: hidden;
padding: 40px;
width: 230px;
}
Como puedes observar tu puedes modificar a como en realidad te encante, pero bien este es un pequeño tutorial de CSS para principiantes, espero que en realidad te haya encantado, ya sabes que puedes pedirnos mas pequeños tutoriales de diseño web, muchas gracias.
Como crear Cajas de colores con Html usando CSS
Realmente vamos a ver una parte tal y como lo hace un gran framewok conocido, Bootstrap utiliza mucho las clases en las etiquetas DIV, y vamos a imitar esto pero le meteremos colores muy bonitos que de seguro te encantarán.Imitando diseños de Bootstrap.
Bueno veamos como lo hace Bootstrap, pues es un modelo el cual vamos a seguir pero obvio que nosotros empezaremos a utilizar mucho nuestros propios estilos.<div class="alert alert-primary" role="alert">
This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>Como podemos observar Bootstrap utiliza la clase Alert-primary para identificar el color celeste, en realidad se pueden utilizar muchas clases como :
alert alert-success
alert alert-danger
alert alert-danger
Todas estas clases tienen un color que los distingue, así que lo único que tienes que hacer aquí es cambiar la clase.
En fin, vayamos entonces a lo que hemos venido, y es crear nuestras propias cajas html con CSS.
Creando cajas con HTML y CSS
Bueno vayamos a hacer como lo hace bootstrap, definiremos primeramente nuestro identificador DIV con una clase de esta manera.<div class="caja-roja"> Esta es una caja roja </div>
Diseño CSS
Ahora que ya tenemos nuestro identificador procederemos a ponerle nuestros estilos css que le darán un aspecto fabuloso.caja-roja {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
height: 100px;
margin: 0 auto 0 auto;
overflow: hidden;
padding: 40px;
width: 230px;
}
Como puedes observar tu puedes modificar a como en realidad te encante, pero bien este es un pequeño tutorial de CSS para principiantes, espero que en realidad te haya encantado, ya sabes que puedes pedirnos mas pequeños tutoriales de diseño web, muchas gracias.
0 comentarios: