Box model
El Box model es una de las manera que tenemos para maquetar
nuestro sitio web, como su nombre lo indica se considera que todo
elemento es considera como un modelo de caja. Este modelo esta
conformado por una serie de propiedades.
Margin
Padding
Border
Content
[Link]
Box model
Margin: es el margen entre
elemento y elemento o
margen si no lo hubiese.
Border: es el borde de cada
elemento.
Padding: es el relleno de
cada elemento.
Content: es el contenido del
elemento, ejemplo: imagen,
texto, etc.
[Link]
Valores del Box model
Valores para Margin, padding
y borders:
rem / em / % / pt / px / vh / vw
Valores para Border:
solid / dashed / dotted /
double / groove / inset / outset
/ ridge
[Link]
Box model
Cada una de las dimensiones que
ingresemos a cada elemento ya sea
rellenos , bordes , dimensiones del
contenido se suman.
Por ejemplo tenemos 200px del ancho
contenido + 10px de relleno izquierdo +
10px del derecho + 10px del borde
izquierdo + 10px del derecho + 20px de
los margenes. Tengo un total de 260px
de ancho del elemento de igual manera
hacemos esto para definir la totalidad de
la altura del elemento
[Link]
La propiedad border
[Link]
La propiedad border
La propiedad border es una de las "propiedades shorthand"
que define CSS y que se utilizan para establecer de forma
abreviada el valor de una o más propiedades individuales. En
este caso, se trata de una de las propiedades shorthand más
completas, ya que permite establecer hasta 12 propiedades de
forma simultánea.
La propiedad border se utiliza para establecer el mismo grosor,
estilo y/o anchura de todos los bordes de un elemento.
[Link]
La propiedad border
[Link]
La propiedad border-radius
[Link]
La propiedad border-radius
La propiedad border-radius nos permite establecer un radio para
redondear las esquinas de un elemento; el valor que toma es un valor
numérico con unidades que pueden ser: px, em, pt, %, etc.
La sintaxis quedaría de la siguiente manera: border-radius: 10px;
[Link]
La propiedad border-radius
Podemos crear diferentes bordes y formas con esta propiedad incluso
círculos y óvalos mas abajo tenemos algunos ejemplos
[Link]
La propiedad box-shadow
[Link]
La propiedad box-shadow
La propiedad box-shadow nos permite poner sombra a las cajas con
CSS, para que esta propiedad funcione se deben especificar ciertos
valores separados por espacios, dichos valores determinarán las
dimensiones y características de la sombra
Principales valores de box-shadow:
Para especificar una sombra, se declara la propiedad box-shadow y a
continuación se colocan los valores que determinaran la forma de
sombra; para que entiendas, la sintaxis quedaría algo así: box-shadow:
ejeX ejeY blur spread color;
[Link]
La propiedad box-shadow
Sombra en X.- específica el tamaño de sombra a lo largo del eje X, se trata de un valor
numérico con su respectiva unidad de medida longitudinal, en nuestro caso pueden ser px, em,
etc. los valores positivos crean sombras hacia la derecha y valores negativos hacia la
izquierda.
Sombra en Y.- especifica la dimensión de la sombra a lo largo del eje Y, es decir verticalmente,
es un valor numérico con su unidad de medida longitudinal, ya sea px, em, etc. valores
positivos crean sombras hacia abajo y valores negativos sombras hacia arriba del elemento.
Color de sombra.- el color puede especificarse con palabras clave como: red, blue, Green,
yellow, etc. también con valores hexadecimales o con los ya conocidos y admitidos.
Desenfoque (blur).- este valor especifica un desenfoque o radio de desenfoque para la sombra
establecida, se trata de un valor numérico mayor a cero, es decir no admite valores negativos,
cuanto menor es el valor menos desenfocado es la sombra, cuanto mayor es el valor más
desenfocado es la sombra.
Propagación (spread).- el radio de propagación nos permite establecer cuanto se propaga la
sombra, puede admitir valores negativos, cuanto menor es el valor la sombra se encoge y
cuanto mayor es el valor que toma, la sombra se propaga.
[Link]
La propiedad box-shadow
Veamos el siguiente ejemplo de como aplicar esta propiedad
En el siguiente sitio web podemos interactuar con estos temas
[Link]
[Link]
La propiedad box-shadow
También podemos aplicar múltiples sombras y agregar sombras
internas con inset y outset para sombras externas
div{
box-shadow: inset 5px 5px
10px 10px gray ;
}
div{
box-shadow: outset 5px 5px
10px 10px gray ;
}
[Link]
Float
La propiedad CSS float ubica un elemento al lado izquierdo o derecho de su
contenedor, permitiendo a los elementos de texto y en línea aparecer a su
costado. El elemento es removido del normal flujo de la página, aunque aún sigue
siendo parte del flujo (a diferencia del posicionamiento absoluto).
[Link]
Elementos en línea y de bloque
[Link]