Flexbox se basa en un contenedor flexible (flex container), que a su vez contiene varios elementos flexibles (flex items). El contenedor otorga sus propiedades a los elementos, es decir: los elementos o flexboxes deben su flexibilidad al hecho de estar dentro del contenedor.
Como se observa en el segundo ejemplo, al aplicar los boxes, crea esto 3 boxes y pueden contener múltiples elementos para su uso.
El Flexbox se describe como un Sistema Unidimensional ya que los elementos se organizan en filas o o columnas pero nunca se combinarán ambas.
Utilizando los Div class se puede hacer los flexbox y después puedes aplicar una interacción o solo de forma visual.
La propiedad CSS overflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.
Usando la propiedad overflow con un valor distinto a visible, valor por defecto, creará un nuevo contexto de formatos de bloques. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.
Como se observa en el 2do ejemplo es una propiedad que puede recortar el contenido, desplazarlo o mostrarlo, de esa manera sin afectar el resto de su contenido de la página web, ya que aplicando el overflow con scroll u otra opción puedes hacer que se haga diferentes maneras de interpretar el texto.
Código del elemento: h3 {
width: 395px;
height: 100px;
border: solid;
overflow: scroll;
}
Como su nombre indica, Text-shadow aplica una capa o una sombra a un texto que deseamos hacer que aparezca con una forma de sombras como si de una luz lo alumbrace. También aplica de formas diferentes la sombra dependiendo de la opción, aplicando solamente el Text-shadow puedes hacer que cualquier texto tenga una sombra de diferentes maneras o variantes utilizando el código del elemento.
Código del elemento: h4{
text-shadow: 2px 2px 2px lime;
}
La propiedad box-shadow de CSS se utiliza para arrojar una o más sombras a un elemento. Prácticamente, cualquier elemento puede obtener una sombra utilizando esta propiedad.
Box-shadow permite implementar fácilmente sombras múltiples (externas o internas) en los elementos, especificando valores de color, tamaño, desenfoque y desplazamiento.
Así mismo con el box-shadow aplica mediante la creación de un box y aplicando el código del elemento se crea lo que se visualiza en el ejemplo.
Código del elemento: .box{
width: 400px;
height: 180px;
background-color: #AAAAAA;
box-shadow: 10px 5px 5px black;
}
Las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D.
Esta es una de las tantas opciones que se puede hacer con el elemento Transform.
Con el transform aplicando el código del ejemplo, puedes rotar la imagen de la manera que quieras, y aplicando los grados, se puede mover de un lado a otro dependiendo de los grados asignados. Puede poner el cursor en el 2do ejemplo para ver el ejemplo.
Código del elemento: .caja1{
width: 150px;
height: 150px;
}
.caja2{
background-color: gray;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.caja2:hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}