El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación, el flexbox hace su trabajo de la siguiente manera usando:
display:flexhola mundo
Codigo html:
<div class="flex">
<div>parte 1</div>
<div>parte 2</div>
<div>parte 3</div>
<br>parte
<br>contenido
<br>extra
<p>hola mundo</p>
Css:
.flex {display: flex; }
hola mundo
Codigo html:
<div class="flex2">
<div>parte 1</div>
<div>parte 2</div>
<div>parte 3</div>
<br>parte
<br>contenido
<br>extra
<p>hola mundo</p>
Css:
.flex2 { display: flex; flex-direction: row-reverse;}
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.
1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Codigo html:
<P class="Lin">1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</P>
Css:
.Lin {overflow: scroll}
1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX2
Codigo html:
<P class="Lin2">1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX2
</P>
Css:
.Lin2 {overflow: auto}
La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad text-decorations del elemento.
Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.
PRUEBA 1
Codigo html:
<P class="Tx">PRUEBA 1
</P>
Css:
.Tx {text-shadow: yellow 0 -4px}
PRUEBA 2
Codigo html:
<P class="Tx2">PRUEBA 2
</P>
Css:
.Tx2 { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: BLUE;
font: 1.5em Arial, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.
Codigo html:Contenido
"Contenido 2"
Codigo html:
<div> class=Bx2><p>Contenido 2
</P></div>
Css:
.Bx2 {
box-shadow: 0 0 0 2em aqua,
0 0 0 4em blue;
margin: 2em;
padding:1em;
}
La propiedad CSS transform te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.
Codigo html:
<div><img "class="Tr2">ALEX
</div>
Css:
.Tr2{
background-color: black;
width: 100px;
height: 100px;
color:aqua;
font-size: 2rem;
transform: skewY(-50deg);}