Presentación temáticas resumen CSS

Empezar

resumen de tematicas

expresion grafica

Colores CSS

imagenes responsivas

unidades en css

Estilo de imagenes

CSS grid

galeria de imagenes

menus desplegables

centrar imagenes

paginación CSS

ÍNDICE

Menús desplegables CSS

pruebalo tu mismo

Cree un cuadro desplegable que aparezca cuando el usuario mueva el mouse sobre un elemento.

Menú desplegable básico/ Dropdowns

Pruebalo tu mismo

Cree un menú desplegable que permita al usuario elegir una opción de una lista:

Menú desplegable

Puebalo tu mismo

CSS se puede utilizar para crear una galería de imágenes.

Galería de imágenes CSS

Sprites de imagen CSS

pruebalo tu mismo

Un objeto de imagen es una colección de imágenes agrupadas en una sola imagen. Una página web con muchas imágenes puede tardar mucho en cargarse y genera múltiples solicitudes al servidor. El uso de sprites de imágenes reducirá la cantidad de solicitudes del servidor y ahorrará ancho de banda

img { border-radius: 50%;}

img { border-radius: 8px;}

Imágenes de estilo CSS

Utilice la border-radiuspropiedad para crear imágenes redondeadas:

Imágenes redondeadas

Para centrar una imagen, establezca los márgenes izquierdo y derecho auto y conviértalo en un block elemento:

centrar Imágenes

Pruebalo

Las imágenes responsivas se ajustarán automáticamente para adaptarse al tamaño de la pantalla

Imágenes responsivas

Pruebalo tu mismo

CSS Grid

El módulo CSS Grid Layout ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que utilizar elementos flotantes ni posicionamiento.

Las líneas horizontales de los elementos de la cuadrícula se denominan ROWS

fFILAS DE CUADRICULA

Las líneas verticales de los elementos de la cuadrícula se denominan columns.

Un elemento HTML se convierte en un contenedor de cuadrícula cuando su propiedad display se establece en grid o inline-grid.

Propiedad de visualización

Columnas de cuadrícula

Un diseño de cuadrícula consta de un elemento principal, con uno o más elementos secundarios.

Elementos de cuadrícula

pruebalo tu mismo

Para hacer que un elemento HTML se comporte como un contenedor de cuadrícula, debe establecer la displaypropiedad en grido inline-grid. Los contenedores de cuadrícula constan de elementos de cuadrícula colocados dentro de columnas y filas.

Contenedor de cuadrícula CSS

Pruebalo tu mismo

La grid-template-columnspropiedad define la cantidad de columnas en el diseño de su cuadrícula y puede definir el ancho de cada columna. El valor es una lista separada por espacios, donde cada valor define el ancho de la columna respectiva. Si desea que el diseño de su cuadrícula contenga 4 columnas, especifique el ancho de las 4 columnas o "automático" si todas las columnas deben tener el mismo ancho.

La propiedad grid-template-columns

La justify-contentpropiedad se utiliza para alinear toda la cuadrícula dentro del contenedor.

La propiedad justify-content

La grid-template-rows propiedad define la altura de cada fila.

La propiedad grid-template-rows

Las unidades de longitud relativa especifican una longitud relativa a otra propiedad de longitud. Las unidades de longitud relativa escalan mejor entre diferentes medios de renderizado.

Las unidades de longitud absoluta son fijas y una longitud expresada en cualquiera de ellas aparecerá exactamente en ese tamaño. No se recomienda el uso de unidades de longitud absoluta en la pantalla, porque los tamaños de la pantalla varían mucho.

Longitudes relativas

Unidades CSS

Longitudes absolutas

La propiedad box-shadow CSS se utiliza para aplicar una o más sombras a un elemento. En su uso más simple, solo especifica una sombra horizontal y vertical. El color predeterminado de la sombra es el color del texto actual.:

box-shadow

text-shadow

La propiedad text-shadow CSS aplica sombra al texto. En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px):

Efectos de sombra CSS

Con CSS, los colores se pueden especificar de diferentes maneras: Por nombres de colores Como valores RGB, RGBAComo valores hexadecimales Como valores HSL (CSS3) Como valores HWB (CSS4) con la currentcolorpalabra clave

Colores CSS

Colores CSS

La palabra clave

La palabra currentcolor clave se refiere al valor de la propiedad de color de un elemento.

Colores hexadecimales

Un color hexadecimal se especifica con: # RR GG BB . RR (rojo), GG (verde) y BB (azul) son números enteros hexadecimales entre 00 y FF que especifican la intensidad del color.

Colores RGB

Los valores de color RGB son compatibles con todos los navegadores. Un valor de color RGB se especifica con: rgb( ROJO , VERDE , AZUL ). Cada parámetro define la intensidad del color como un número entero entre 0 y 255.

Colores CSS

Colores HSLA

Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad de un color. Un valor de color HSLA se especifica con: hsla(tono, saturación, luminosidad, alfa), donde el parámetro alfa define la opacidad. El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (completamente opaco).

Colores HSL

HSL significa Tono, Saturación y Luminosidad. Un valor de color HSL se especifica con: hsl(tono, saturación, luminosidad). El tono es un grado en la rueda de colores (de 0 a 360): 0 (o 360) es rojo 120 es verde 240 es azul La saturación es un valor porcentual: 100% es el color completo. La ligereza también es un porcentaje; 0% es oscuro (negro) y 100% es blanco.

Colores RGBA

Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color. Un valor de color RGBA se especifica con: rgba(rojo, verde, azul, alfa). El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (completamente opaco).

Pruebalo tu mismo

Paginación sencilla

paginación CSS

Si tiene un sitio web con muchas páginas, es posible que desee agregar algún tipo de paginación a cada página:

Pruebalo tu mismo

Paginación activa y flotante

paginación CSS

Resalte la página actual con una .active clase y use el :hover selector para cambiar el color de cada enlace de página al mover el mouse sobre ellos:

Pruebalo tu mismo

Botones redondeados activos y flotantes

paginación CSS

Agregue la border-radiuspropiedad si desea un botón "activo" y "desplazado" redondeado:

Pruebalo tu mismo

Espacio entre enlaces

paginación CSS

Consejo: agregue la marginpropiedad si no desea agrupar los enlaces de la página:

ACTIVIDAD

link de actividad de clase : https://docs.google.com/document/d/14XyUSqVeNu1f1eYjq08lzcfzD-tTcmB-gVaOOqrsSG4/edit?usp=sharing

¡GRACIAS!

img { display: block; margin-left: auto; margin-right: auto; width: 50%; }

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas!Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

.grid-container { display: grid; }