Scribd
Cargar
14 vistas3 páginas

Mejores Caracteristicas CSS

El documento detalla las mejores características de CSS para el diseño web, incluyendo Flexbox y CSS Grid para layouts flexibles y complejos. También se mencionan variables CSS, media queries, transiciones, y efectos visuales que mejoran la experiencia del usuario. Otras características destacadas son el soporte para fuentes web, scroll snap, y la manipulación de variables CSS desde JavaScript.

Cargado por

davidrr1710
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
14 vistas3 páginas

Mejores Caracteristicas CSS

El documento detalla las mejores características de CSS para el diseño web, incluyendo Flexbox y CSS Grid para layouts flexibles y complejos. También se mencionan variables CSS, media queries, transiciones, y efectos visuales que mejoran la experiencia del usuario. Otras características destacadas son el soporte para fuentes web, scroll snap, y la manipulación de variables CSS desde JavaScript.

Cargado por

davidrr1710
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Mejores características de CSS para crear una web

1. Flexbox:

Sistema de diseño flexible que permite alinear y distribuir espacio entre elementos.

- Propiedades clave: display: flex;, justify-content, align-items, flex-direction.

2. CSS Grid:

Sistema de diseño de cuadrícula bidimensional que facilita la creación de layouts complejos.

- Propiedades clave: display: grid;, grid-template-columns, grid-gap, grid-area.

3. Variables CSS (Custom Properties):

Definir valores reutilizables facilita el mantenimiento del diseño.

- Ejemplo: --primary-color: #3498db; color: var(--primary-color);

4. Media Queries:

Permite ajustar el diseño según el tamaño de pantalla.

- Ejemplo: @media (max-width: 768px) { /* estilos */ }

5. Transiciones y Animaciones:

Efectos visuales para mejorar la experiencia de usuario.

- Ejemplo: transition: all 0.3s ease;, @keyframes y animation.

6. Shadow Effects:

Añadir sombras para dar profundidad a los elementos.

- Ejemplo: box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);


7. Pseudo-elementos y Pseudo-clases:

Aplicar estilo a partes específicas de un elemento o al interactuar con el usuario.

- Ejemplo: ::before, :hover, :nth-child().

8. Clipping y Masking:

Crear formas no rectangulares y controlar la visibilidad.

- Ejemplo: clip-path, mask-image.

9. Unidades Modernas:

Unidades que se adaptan mejor a pantallas diferentes (vh, vw, rem, fr).

10. Filtros (Filters):

Aplicar efectos gráficos a imágenes o elementos.

- Ejemplo: filter: blur(5px);, grayscale, contrast.

11. Soporte para Fuentes Web:

Integración de fuentes personalizadas desde Google Fonts.

- Ejemplo: @font-face, font-family.

12. Scroll Snap:

Control de desplazamiento suave, ideal para carruseles.

- Ejemplo: scroll-snap-type, scroll-snap-align.

13. CSS Shapes:

Permite que el texto siga formas no rectangulares.


- Ejemplo: shape-outside.

14. Blend Modes:

Mezclar el contenido de un elemento con el de debajo.

- Ejemplo: mix-blend-mode, background-blend-mode.

15. CSS Variables a nivel de JavaScript:

Manipular variables CSS desde JavaScript para mayor interactividad.

- Ejemplo: element.style.setProperty('--primary-color', '#ff0000');

También podría gustarte