NOTA: Esto no es un curso, son una serie de apuntes y prácticas que se llevaron a cabo mientras se tomaba el Curso de CSS Desde 0 de Soy Dalto.

Seguílo en Instagram... es un crack.

  1. RANGO DE JERARQUÍA

    Rango de jerarquía para la aplicación de estílos.

    Especificidad
  2. SELECTOR UNIVERSAL: *

    3. El selector * sirve para seleccionar todos los elementos.

  3. SELECTOR-CLASES

    En css colocar: .nombreDeClase

  4. SELECTOR-ATRIBUTO

    En css colocar: [type="text"]

  5. SELECTOR-ID

    En css colocar: #nombreDelID

  6. SELECTOR-ETIQUETA

    En css colocar: Simplemente colocar una etiqueta en general.

RELATIVAS

  1. vw

    1% del ancho de la ventana gráfica.

  2. vh

    1% de la altura de la ventana gráfica.

  3. em

    La medida em es equivalente a 16px por em.

  4. ex

    Altura x de la fuente del elemento.

  5. ch

    La medida de avance (ancho) del glifo "0" de la letra del elemento.

  6. rem

    Tamaño de la letra del elemento raíz.

  7. lh

    Altura de la línea del elemento.

  8. vmin

    1% de la dimensión más pequeña de la ventana gráfica.

  9. vmax

    1% de la dimensión más grande de la ventana gráfica.

FIJAS

  1. centímetros

    cm = 96px/2,54

  2. Milímetros

    mm = 1mm = 1/10 de 1cm

  3. Cuartos de milímetros

    Q = 1Q = 1/40 de 1cm

  4. Pulgadas

    in = 1in = 2,54cm = 96px

  5. Picas

    pc = 1pc = 1/6 de 1in

  6. Puntos

    pt = 1pt = 1/72 de 1in

  7. Píxeles

    px = 1px = 1/96 de 1in

    Configuraciones básicas para Fonts

  1. font-size: 2em;

    Se utiliza para dar un tamaño determinado a los Fonts.

  2. font-family: Georgia;

    Se utiliza para dar un tipo de letra específico, se puede colocar más de un tipo de letra, pero siempre tomará el primero que se determine, si el primero no existe, tomará el siguiente.

  3. line-height: 1.9;

    Se utiliza para abarcar más espacio hacia arriba y hacia abajo de una línea de texto.

  4. font-weight: normal;

    Se utiliza para darle más grosor a un texto.

  5. Fonts importados (link)

    Se utiliza para importar Fonts de páginas externas, con la etiqueta link y colocando la referencia.

  6. TEXT SHADOW

    text-shadow: 10px 20px 30px #color

    Los valores de la propiedad text-shadow se dividen en 4: El primer valor (10px) define la posición horizontal de la sombra, comenzando de izquierda a derecha.

    El segundo valor (20px) define la altura que se posiciona la sombra del texto, de arriba hacia abajo.

    El tecer valor (30px) define la difuminación que obtendrá la sombra, entre menor el valor, menor la difuminación.

  7. HERRAMIENTA DE FONTS

    Herramienta de Google con todos gran variedad de fondos

    Ir a Google Fonts

    Configuraciones del Padding:

    Su configuración se comienza con la propiedad "Padding:" y se dan los valores comenzando desde arriba (top -> rigth -> bottom -> left) y en sentido del reloj sobre el elemento al cual se le está agregando el Padding.

    El Padding agrega un espacio entre el contenido que está dentro del contenedor, y el contenedor.

  • Padding: top

    Configura la parte superior del Padding.

  • Padding: rigth

    Configura la parte derecha del Padding.

  • Padding: bottom

    Configura la parte inferio del Padding.

  • Padding: left

    Configura la parte izquierda del Padding.

    Configuraciones del Margin:

    Su configuración se comienza con la propiedad "Margin:" y se dan los valores comenzando desde arriba (top -> rigth -> bottom -> left) y en sentido del reloj sobre el elemento al cual se le está agregando el Margin.

    Determinado por valor, el Margin agrega un espacio al rededor del contenedor del elemento al que le estamos agregando.

  • Margin: top

    Configura la parte superior del Margin.

  • Margin: rigth

    Configura la parte derecha del Margin.

  • Margin: bottom

    Configura la parte inferio del Margin.

  • Margin: left

    Configura la parte izquierda del Margin.

  • position: relative;

    El valor static concede las propiedades top, bottom, left y right al elemento, puede moverse dependiendo a los valores de las propiedades. sin perder el espacio de origen del elemento.

  • position: absolute;

    El valor absolute concede las propiedades top, bottom, left y right al elemento, puede moverse dependiendo a los valores de las propiedades y el espacio del elemento reservado en un principio, pasa a estar sin ocupar, por lo que el siguiente elemento utiliza ese espacio.

  • position: fixed;

    El valor fixed concede las propiedades top, bottom, left y right al elemento, puede moverse dependiendo a los valores de las propiedades y el elemento se mantendrá presente en el ViewPort todo el tiempo.

  • position: sticky;

    El valor sticky es una combinación de Static, con fixed, ya que dependiendo de donde se posicione en un comienzo

  • zIndex

    Mueve elementos por encima de otros elementos, dependiendo el valor que se le asigne. Entre mayor el valor, más prioridad se le da al elemento.

Caja-1
Caja-2
Caja-3
Caja-4
  • INLINE

    Valor de la propiedad Display que mantiene las cajas o los elementos, en una sola línea, no se pueden modificar dimensiones.

    Caja-1 Caja-2 Caja-3 Caja-4
  • BLOCK

    Valor de la propiedad Display que convierte en bloque los elementos, concede la posibilidad de editar las dimenciones del elemento al que se le aplica.

    Caja-1 Caja-2 Caja-3 Caja-4
  • INLINE - BLOCK

    Valor de la propiedad Display que los elementos se coloquen en línea y se les concede la capacidad de cambiar las dimenciones.

    Caja-1 Caja-2 Caja-3 Caja-4
  • AUTO

    La propiedad auto almacena dentro del contenedor el texto que no cabe en una caja y añade una barra de scroll, para poder desplazarse dentro del contenedor y poder leer el texto completo.

    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • SCROLL

    El valor scroll añade la barra de scroll horizontal, aunque no tenga utilidad.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • ::first-line

    Modifica la primera línea del texto de un elemento. Funciona unicamente en los elementos que son Inline-block y block.

  • ::first-letter

    Puede modificar las propiedades de la primera letra de un elemento. Funciona unicamente en los elementos que son Inline-block y block.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • ::placeholder

    Permite cambiar las propiedades del Placeholder de una caja de texto

  • ::selection

    Se utiliza para dar propiedades a los elementos que sean seleccionados (sombreados por el puntero).

    Prueba seleccionar el texto 1 y el texto 2 para comparar.

    Texto 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Texto 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • ::before

    Añade con la propiedad "content: " "", un contenido al comienzo del elemento, el contenido no forma parte ni afecta al DOM y no puede ser seleccionado. Funciona para elementos en línea y de bloque.

  • ::after

    Añade con la propiedad "content: " "", un contenido al final del elemento, el contenido no forma parte ni afecta al DOM y no puede ser seleccionado. Funciona para elementos en línea y de bloque.

  • :hover

    Modifica las propiedades de un elemento, cuando el puntero pasa por encima del elemento, dependiendo a las propiedades que se le asignaron desde la pseudo clase hover.

  • :link

    Modifica las propiedades de un enlace, sólo si el mismo nunca ha sido visitado

  • :visited

    Modifica las propiedades de un enlace, sólo si el mismo ya ha sido visitado

  • :active

    La pseudo-clase se activa cuando se mantiene dando click en el elemento que se le aplicó. Los efectos del cambio dependerán de las configuraciones de las propiedades.

    Deformito
  • :focus

    La pseudo-clase :focus cambia las propiedades del elemento que sea seleccionado o clickeado sin necesidad de mantener presionado el click.

  • Contain

    Valor Contain: La imagen completa se ajusta a su contenedor, sin importar que queden bordes vacíos.

  • Cover

    Valor Cover: La imagen cubre todo el contenedor que le corresponde, centrandoce a sí misma y cubriendo todos los bordes.

  • None

    Valor None: Coloca la imagen en el contenedor, sin importar que deje bordes vacíos. Coloca el tamaño real de la resolución, sin importar nada.

  • ScaleDown

    Valor ScaleDown: Conserva el valor de la resolución más pequeña y coloca la imagen dentro del contenedor, ajustandola aunque deje bordes vacíos.

  • Left

    Recorre la imágen hacia la izquierda, dentro de su contenedor.

  • Right

    Recorre la imágen hacia la derecha, dentro de su contenedor.

  • Top

    Recorre la imágen hacia arriba, dentro de su contenedor.

  • Button

    Recorre la imágen hacia abajo, dentro de su contenedor.

  • PX, EM, %, ETC

    Es posible utilizar medidas para recorrer las imágenes, dentro de sus contenedores.

  • Página de lista de cursores:

    Hacer Click aquí para visitar la página con variedad de cursores.

  • rgb(red, green, blue)

    Ejemplo de aplicación: background:rgb(255,255,255)

  • rgba(red, green, blue, alpha)

    Ejemplo de aplicación: background:rgba(255,255,255,.3)

    Con la letra "a" agregada a la propiedad "rgb" se agrega como un cuarto parametro a los valores, para dar un nivel de opacidad al color o color de fondo.

  • rgba Exadecimal

    Es la manera de utilizar la base hexadecimal, para seleccionar colores.

    Imágen ilustrativa que explica su uso:

  • FLEX CONTAINER

    Bloque el cual contiene items o elementos los cuales pueden ser acomodados y ajustar sus dimensiones de forma responsiva con CSS.

  • FLEX ITEM

    Elementos que se encuentran dentro de un contenedor o bloque FLEX CONTAINER

    • EJEMPLO DE FLEX CONTAINER
    F-item
    F-item
    F-item
    F-item
    F-item

  • CROSS AXIS & MAIN AXIS

    En resumidas palabras, es la manera en que se acomodan los elementos, o en la que pueden ser orientados, dentro de un contenedor. Desde un punto A a un punto B START & END.

  • ROW

    Es la manera en que se acomodan los elementos de forma predeterminada, dentro de un contenedor.

    EJEMPLO DE FLEX CONTAINER: ROW;
    F-item1
    F-item2
    F-item3
    F-item4
    F-item5

  • COLUMN

    Los elementos se acomodan en forma de columna.

    EJEMPLO DE FLEX CONTAINER: COLUMN;
    F-item1
    F-item2
    F-item3
    F-item4
    F-item5

  • ROW-REVERSE

    Acomoda de forma espejo, los elementos que hay dentro del contenedor.

    EJEMPLO DE FLEX CONTAINER: ROW-REVERSE;
    F-item1
    F-item2
    F-item3
    F-item4
    F-item5

  • COLUMN-REVERSE

    Acomoda la columna de reversa.

    EJEMPLO DE FLEX CONTAINER: COLUMN-REVERSE;
    F-item1
    F-item2
    F-item3
    F-item4
    F-item5

  • FLEX-WRAP: WRAP;

    Recorre los items de forma uniforme hacia abajo, en caso de que el espacio del CONTAINER se reduzca.

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6

  • FLEX-WRAP: WRAP-reverse;

    Al igual que Wrap, causa el mismo efecto en los items, con la diferencia que los acomoda de reversa..

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6

Funciona para acomodar más de una línea de items, de manera ordenada dependiendo al valor.

VALORES:

  • ALIGN CONTENT: FLEX-START

    Los items se acomodan en la parte superior del contenedor flex. Nótese que a diferencia del uso de Align-items, los items se acomodan de manera más aproximada el uno del otro.

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6
  • ALIGN CONTENT: FLEX-END

    .

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6

Propiedades reservadas o principalmente usadas para Flex Items.

  • FLEX-GROW

    Se puede utilizar para abarcar espacio de sobra con un item. Se muestra en el ejemplo el item 1 con la propiedad flex-grow con valor de 1, y el item 6 con un valor de 2.

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6

  • FLEX-SHRINK

    En el item 1 se ha aplicado flex-shrink, y a diferencia de las demás, cuando el contenedor minimiza su espacio, el item 1 no reduce su width o flex-basis del mínimo declarado.

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6

  • FLEX-BASIS

    Se utiliza como un width, pero flex-basis tiene jerarquía más alta. En el siguiente ejemplo se muestra el item 1 con un valor de medida más alto que el width del resto de las figuras.

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6

  • ORDER

    Se utiliza para alterar el orden de los items dentro de un contenedor. En el siguiente ejemplo se muestra el item 1 con orden alterado, con propiedad order y valor 4

    F-item1
    F-item2
    F-item3
    F-item4
    F-item5
    F-item6

  • GRID TEMPLATE

    Para crear un Grid container, se debe agregar la propiedad display: grid a cualquier contenedor (div). Hecho lo anterior, se debe proceder a utilizar las propiedades grid-template-rows y grid-template-columns para definir cuantas filas y columnas se desea agregar al grid container.


  • GRID REPEAT

    Propiedad shorthand que puede ser utilizada para agregar filas y columnas a un grid-container.

    Ejemplo:

    grid-template-rows: repeat(2, 1fr);

    Propiedad repeat incluye dos parametros, el primero define el numero de iteraciones y el segundo la medida (se puede agregar mas de 1 parametro despues del primero para definir la medida de la segunda, tercera, cuarta.... columna).

    1
    2
    3
    4
    5
    6
    7
    8
    9

  • GRID-GAP

    Funciona para dar un espacio entre los grid-items, pero no afecta al margin de los mismos.

    Ejemplo sin grid-gap:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Ejemplo con grid-gap:

    1
    2
    3
    4
    5
    6
    7
    8
    9

  • GRID-START & GRID-END

    Define la línea o punto desde el que un grid-item comienza (grid-start) y el mismo finaliza(grid-end).

    En el siguiente ejemplo, se utilizan las propiedades:

    grid-column: 1 / span 2;

    grid-row: 1 / span 2;.

    1
    2
    3
    4
    5
    6
    7
    8
    9

  • GRID-AUTO-ROWS & GRID-AUTO-COLUMNS

    Funciona para dar una medida específica al grid explícito (las filas o columnas que no forman parte del grid implícito).

    1
    2
    3
    4
    5
    6
    7
    8
    9
    implí
    implí

    GRID-AUTO-FLOW-ROW (Predeterminado)

    Mantiene las sobras del grid (grid explícito), como filas (en la parte del fondo abajo)..

    1
    2
    3
    4
    5
    6
    7
    8
    9
    implí
    implí

    GRID-AUTO-FLOW-COLUMNS

    Mantiene las sobras del grid (grid explícito), como columnas (en la parte de la derecha, al fondo)..

    1
    2
    3
    4
    5
    6
    7
    8
    9
    implí
    implí

  • .


  • Min-content

    Acomoda los grid items, de manera que utilizará la medida mínima, hasta el primer espacio que haya dentro del grid item, para establecer una medida.

    Max-content (hacer hover)

    Acomoda los grid items, de manera que utilizará la longitud completa del grid item, para establecer una medida.

    EJEMPLO DE CÓDIGO:

    grid-template-columns: repeat(3, min-content);

    grid-template-rows: repeat(3, min-content);

    EN :HOVER

    grid-template-columns: repeat(3, max-content);

    grid-template-rows: repeat(3, max-content);

    1
    2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    4
    5
    6
    7
    8
    9
    implí
    implí

  • Valor minmax();

    Se utiliza para asignar un mínimo y máximo de medida a un grid container.

    EJEMPLO VISUAL Y DE CÓDIGO:

    grid-template-columns: repeat(3, minmax(40px,1fr));

    1
    2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    4
    5
    6
    7
    8
    9
    implí
    implí

  • AUTO-FILL

    Es sustituto del valor que define cuantas filas o columnas se desean crear, sirve para rellenar la grilla de grid items, dependiendo del tamaño que el grid container vaya obteniendo.

    NOTA:

    Aunque no hayan más childelements presentes en código html, se seguirán creando grid-items del mismo tamaño, dentro del espacio de sobra del grid-container.

    EJEMPLO VISUAL Y DE CÓDIGO:

    grid-template-columns: repeat(auto-fill, minmax(40px,1fr));

    1
    2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    4
    5
    6
    7
    8
    9
    implí
    implí

  • AUTO-FIT

    Es sustituto del valor que define cuantas filas o columnas se desean crear, sirve para ajustar el espacio del grid-container, con las medidas de los grid items.

    NOTA:

    Aunque no hayan más childelements presentes en código html, se seguirán creando grid-items del mismo tamaño, dentro del espacio de sobra del grid-container.

    EJEMPLO VISUAL Y DE CÓDIGO:

    grid-template-columns: repeat(auto-fit, minmax(100px , 1fr));

    grid-template-rows: repeat(2, 100px);

    1
    2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
    4
    5
  • JUSTIFY-CONTENT & ALIGN-CONTENT

    Funciona para asignar una pocisión dentro de un mismo Grid-container.

    EJEMPLO VISUAL Y DE CÓDIGO:

    grid-template-columns: repeat(3, minmax(100px,100px));

    grid-template-rows: repeat(3, minmax(100px,100px));

    justify-content: start;

    align-content: start;

    :HOVER

    justify-content: end;

    align-content: end;

    1
    2
    3
    4
    5
    6
    7
    8
    9

  • JUSTIFY-ITEM & ALIGN-ITEM

    Funciona para asignar una pocisión dentro de un mismo Grid-item.

    EJEMPLO VISUAL Y DE CÓDIGO:

    grid-template-columns: repeat(3, minmax(100px,100px));

    grid-template-rows: repeat(3, minmax(100px,100px));

    justify-items: start;

    align-items: start;

    :HOVER

    justify-items: end;

    align-items: end;

    1
    2
    3
    4
    5
    6
    7
    8
    9

  • .

    EJEMPLO VISUAL Y DE CÓDIGO:

    1
    2
    3
    4
    5
    6
    7
    8
    9
GALERÍA GRID

Práctica orientada a la aplicación de GRID, en una galería de imágenes.

ÍR A LA GALERÍA
  • GRID AREAS

    Funciona para repartir espacio de un Grid-Contanier entre los elementos que se le asignen una cantidad de espacio.

    EJEMPLO DE USO Y DE CÓDIGO:

    HTML

    CSS

    HEADER
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    FOOTER
  • @MEDIA (Screen)

    Es utilizado para adaptar contenido de una página web, a distintas resoluciones, esto mediante condicionales.

    EJEMPLO DE CÓDIGO:

    body {


    background: #000;


    }

    @media only screen and (min-width: 500px) and (max-width: 1000px;){


    body {


    background: #fff;


    }

    }

    Con la condición anterior, estámos declarando que si el ancho de la pantalla es de mínimo 400px y máximo de 1000px, el fondo de pantalla será blanco, fuera de ese rango, el fondo será negro.

  • PORTRAIT & LANDSCAPE

    Su traducción al español, son RETRATO (Portrait) y PAISAJE (Landscape).

    En resumen, no son más que la orientación de la pantalla o resolución que tiene un dispositivo.

    LANDSCAPE

    Orientación principalmente usada en PC o computadoras de escritorio.

    PORTRAIT

    Orientación principal de Smartphones.

SITIOS CON DISEÑO RESPONSIVO

Prácticas de la elaboración de un par de sitios con diseño responsivo.

  1. SITIO RESPONSIVO (FLEX)
  2. SITIO RESPONSIVO (GRID)

El progreso de un cambio.

  • TRANSITION-PROPERTY & TRANSITION-DURATION

    Con la propiedad transition-property es posible seleccionar una o varias propiedades en específico, para pasar a definir la duración de la trasicion, con la propiedad transition-duration.

    EJEMPLO VISUAL Y DE CÓDIGO:

    HTML

    CSS


  • LINEAR, EASE, EASE-IN, EASE-OUT, EASE-IN-OUT

Círculo animado

Maneras de crear animaciones en CSS

Propiedades necesarias:

animation-name: Funciona para enlazar @Keyframes a algúna clase.

animation-duration: Establece una duración para la animación.

animation-iteration-count: Define la cantidad de veces que se repetirá la animación.

animation-direction: Establece si la animación va en orden o de reversa, etc.

animation-fill-mode: se deben tener en cuenta los principales valores fowards que funciona para establecer el final de la animación, como su estado final; y both que sirve para asignar los valores de la animación desde un comienzo.


Efecto líquido

El resultado de la combinación de la propiedad filter y sus valores contrast y blur.

Información de MDN a cerca de Animations

Cubo de bezier
  • Herramienta CUBO DE BEZIER

    Herramienta dedicada para el aprendizaje y modificaciones de la curba de bezier, en CSS.

    QUEDA PENDIENTE AQUÍ, UNA CAJA CON ELEMENTOS DONDE SE LE APLIQUEN LOS CAMBIOS DE ANIMACIONES, CON COORDENADAS DEL CUBO DE BEZIER

TRANSFORM
CAJA-1
CAJA-2
CAJA-3
CAJA-4

HERRAMIENTA CLIP PATH

Herramienta que permite crear formas y adaptarlas a código para usarlas en CSS.

Click aquí para hacer Clippy

Click aquí para ir a CSS matic.

PENDIENTE HACER UNA LISTA DE GENERADORES

  • Background-image:

    Código para introducir una imágen de fondo en cualquier contenedor, por medio de CSS:

    background-image: url(https://www.teahub.io/photos/full/7-76929_82-4k-hd-wallpapers-hd-wallpapers-laptop.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    IMAGEN DE FONDO


  • IMAGEN DE FONDO ARREGLADA

    Código para introducir una imágen de fondo arreglada (fixed) en cualquier contenedor, por medio de CSS:

    background-image: url(https://m.media-amazon.com/images/I/81+kCidHgVL.png);

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: 37% top;
VALORES DE FILTER (FUNCIONES):
  • none

    Es el valor por defecto.

  • blur()

    Aplica un difuminado o desenfoque al contenedor que se le aplica.

    SIN BLUR()

    :hover CON BLUR(5px)

    METAL GEAR SOLID

  • backdrop-blur()

    Aplica un desenfoque al fondo del contenedor, sin afectar al contenido de adentro, ni los márgenes.

    METAL GEAR SOLID



  • BRIGHTNESS

    Valor para ajustar el brillo de una imágen.

    METAL GEAR SOLID

  • CONTRAST

    Valor para ajustar el contraste de una imágen.

    METAL GEAR SOLID

  • DROP-SHADOW & GRAYSCALE

    Drop-shadow:Valor para colocar sombra con forma dentro de una imágen png.

    Gray-scale: Valor que modifica la escala de grises en la imágen.

  • DIRECTION

    Funciona para dar una dirección a un contenedor, ya sea de izquierda a derecha, o de derecha a izquierda.

    ltr: de izquierda a derecha (left to right)

    rtl: de derecha a izquierda (right to left.)

    initial: Inicial.

    inherit: Inhereditario.

  • LETTER SPACE

    Funciona para separar las letras una de la otra.

  • SCROLL BEHAVIOR

    Funciona para dar un efecto más fluído y lento al desplazamiento que se presenta cuando se da clic en un enlace que redirige a una parte más abajo de la página.