Primeras Cajas CSS3
Las cajas se crean mediante las propiedades CSS y las etiquetas a las que se las quieras poner tanto directas o con los selectores "id" y "class".Para crear una forma o una "caja" las propiedades basicas que debemos utilizar son:
Principales:
Estas son las etiquetas o propiedades principales para crear cajas ya sean de colores o con imagenes y las que faltan sub-elementos que contiene cada propiedad.
Otra de las propiedades que se estaran manejando mucho es la Utilizacion de :hover, mas adelante cuando lo utilicemos se les explicara la funcion y se les explicara su utilizacion.
<style type=text/css">
.prueba-1{
color :#fff;
background :#000;
padding :10px;
}
/* En dado caso que nosotros queramos agregarle las puntas redondeadastendriamos que agregarle la propiedad border seguido de la sub-propiedad radius quedaria asi "border-radius" de esta forma le agragaran las esquinas redondeadas */
.prueba-2{
color :#fff;
background :#000;
padding :10px;
border-radius :10px;
}
/* En este caso le pondremos algo de sombra en color azul para que resalte del negro y utilizaremos la propiedad box con la sub-propiedad shadow quedaria "box-shadow" */
.prueba-3{
color :#fff;
background :#000;
padding :10px;
border-radius :10px;
box-shadow : 1px 1px 3px blue;
/* En este caso tenemos 4 propiedades que le dan el efecto de sombra los primeros 3 hacen referencia a la posicion, grosor, y desbanesimiento de la sombra, el cuarto valor hace referencia al color y pueden ponerlo en valor rgba, valor alfanumerico y nombre en ingles. (en los comentarios digan si quieren que se les explique y pondre la explicacion de los valores si no lo quieren pueden jugar con los valores para que vallan checando su utilidad)*/
}
</style>
color :#fff;
background :#000;
padding :10px;
}
/* En dado caso que nosotros queramos agregarle las puntas redondeadastendriamos que agregarle la propiedad border seguido de la sub-propiedad radius quedaria asi "border-radius" de esta forma le agragaran las esquinas redondeadas */
.prueba-2{
color :#fff;
background :#000;
padding :10px;
border-radius :10px;
}
/* En este caso le pondremos algo de sombra en color azul para que resalte del negro y utilizaremos la propiedad box con la sub-propiedad shadow quedaria "box-shadow" */
.prueba-3{
color :#fff;
background :#000;
padding :10px;
border-radius :10px;
box-shadow : 1px 1px 3px blue;
/* En este caso tenemos 4 propiedades que le dan el efecto de sombra los primeros 3 hacen referencia a la posicion, grosor, y desbanesimiento de la sombra, el cuarto valor hace referencia al color y pueden ponerlo en valor rgba, valor alfanumerico y nombre en ingles. (en los comentarios digan si quieren que se les explique y pondre la explicacion de los valores si no lo quieren pueden jugar con los valores para que vallan checando su utilidad)*/
}
El resultado de la clase anterior es el siguiente
<span class="prueba-1"><span>
<!-- el resultado seria el siguiente:-->
<span class="prueba-1">prueba<span>
prueba-1
<!-- con la propiedad border-radius-->
<span class="prueba-2"><span>
<span class="prueba-2">prueba<span>
prueba-2
<!-- con la propiedad box-shadow-->
<span class="prueba-3"><span>
<span class="prueba-3">prueba<span>
prueba-3
<!-- el resultado seria el siguiente:-->
<span class="prueba-1">prueba<span>
prueba-1
<!-- con la propiedad border-radius-->
<span class="prueba-2"><span>
<span class="prueba-2">prueba<span>
prueba-2
<!-- con la propiedad box-shadow-->
<span class="prueba-3"><span>
<span class="prueba-3">prueba<span>
prueba-3