Examen Fernando Delgado

FLEXBOX

DESCRIPCION

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.

EJEMPLO 1:

CODIGO:

.flex-container {
	display: flex;
	border-style: solid;
	border-color: black;
	padding: 20px;
}

uno

EJEMPLO 2:

CODIGO:

.flex-containerW {
	display: flex;
	flex-wrap: wrap;
	border-style: solid;
	border-color: black;
	padding: 20px;
}

uno

OVERFLOW

DESCRIPCION

La propiedad CSS overflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

EJEMPLO 1:

CODIGO:

.foverflowV {
   padding: 4px;
   background-color: coral;
   border: 1px solid;
   width: 200px;
   height: 110px;
   overflow: visible;
}

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

EJEMPLO 2:

CODIGO:

.foverflowS {
   padding: 4px;
   background-color: coral;
   border: 1px solid;
   width: 200px;
   height: 110px;
   overflow: scroll;
}

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

TEXT SHADOW

DESCRIPCION

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.

EJEMPLO 1:

CODIGO:

.red-text-shadow {
	font-size: 20px;
   text-shadow: red 0 -2px;
}

TEXTO DE EJEMPLO

EJEMPLO 2:

CODIGO:

.white-with-blue-shadow {
	font-size: 20px;
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}

TEXTO DE EJEMPLO

BOX SHADOW

DESCRIPCION

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.

EJEMPLO 1:

CODIGO:

.boxS {
    background-color: darkblue;
    width: 200px;
    padding: 50px;
    text-align: center;
    margin-left: :auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 5px 5px 10px;
}

Hello World

EJEMPLO 2:

CODIGO:

.boxs2 {
    background-color: gold;
    width: 140px;
    padding: 50px;
    text-align: center;
    margin-left: :auto;
    margin-right: auto;
    border-radius: 20px;
    box-shadow:0 30px 40px -30px #111;
}

Hello World

TRANSFORM

DESCRIPCION

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.

EJEMPLO 1:

CODIGO:

.transf{
    background-color: hsl(150, 70%, 30%);
    width: 100px;
    height: 100px;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    transform: rotate(54deg);
}

Hello World

EJEMPLO 2:

CODIGO:

.transf2{
    background-color: hsl(130, 70%, 30%);
    width: 100px;
    height: 100px;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    transform: rotate(35deg);
}

Hello World