Presentación temáticas resumen CSS

expresion grafica

resumen de tematicas

Empezar

ÍNDICE

paginación CSS

centrar imagenes

menus desplegables

galeria de imagenes

CSS grid

unidades en css

Estilo de imagenes

imagenes responsivas

Colores CSS

Menús desplegables CSS

Menú desplegable básico/ Dropdowns

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

pruebalo tu mismo

Menú desplegable

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

Pruebalo tu mismo

Galería de imágenes CSS

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

Puebalo tu mismo

Sprites de imagen CSS

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

pruebalo tu mismo

Imágenes de estilo CSS

Imágenes redondeadas

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

img { border-radius: 50%; }

img { border-radius: 8px; }

Imágenes responsivas

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

Pruebalo

centrar Imágenes

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

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.

Pruebalo tu mismo

Columnas de cuadrícula

Elementos de cuadrícula

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

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

Propiedad de visualización

fFILAS DE CUADRICULA

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

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

Contenedor de cuadrícula CSS

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.

pruebalo tu mismo

La propiedad grid-template-columns

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.

Pruebalo tu mismo

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

La propiedad grid-template-rows

La propiedad justify-content

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

Unidades CSS

Longitudes relativas

Longitudes absolutas

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.

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.

Efectos de sombra CSS

box-shadow

text-shadow

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.:

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):

Colores CSS

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

Colores CSS

Colores hexadecimales

La palabra clave

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.

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

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 CSS

Colores HSLA

Colores HSL

Colores RGBA

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).

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.

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).

paginación CSS

Paginación sencilla

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 CSS

Paginación activa y flotante

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

paginación CSS

Botones redondeados activos y flotantes

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

Pruebalo tu mismo

paginación CSS

Espacio entre enlaces

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

Pruebalo tu mismo

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; }