HERRAMIENTAS
W3SCHOOLS:
- CSS TUTORIAL
-
CSS DISPLAY
Especifica si se muestra un elemento y cómo se muestra.
- CSS MAX-WIDTH
-
CSS POSITION
Especifica el tipo de método de posicionamiento utilizado para un elemento. Valores: static, relative, fixed, absolute y sticky.
-
CSS OVERFLOW
Especifica si se recorta el contenido o se agregan barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en el área especificada. Valores: visible, hidden, scroll y auto.
-
CSS FLOAT
Especifica cómo debe flotar un elemento. Valores: left, right, none e inherit.
-
CSS INLINE-BLOCK
Muestra elementos de lista horizontalmente en lugar de verticalmente.
- CSS ALIGN
- CSS COMBINATORS
-
CSS PSEUDO-CLASS
Se usa para definir un estado especial de un elemento.
-
CSS PSEUDO-ELEMENT
Se utiliza para diseñar partes específicas de un elemento.
-
CSS OPACITY
Especifica la opacidad / transparencia de un elemento.
-
CSS 2D TRANSFORMS
Las transformaciones CSS le permiten mover, rotar, escalar y sesgar elementos.
- CSS 3D TRANSFORMS
-
CSS TRANSITIONS
Las transiciones CSS permiten cambiar los valores de propiedad sin problemas, durante un período determinado.
-
CSS ANIMATIONS
CSS permite la animación de elementos HTML sin utilizar JavaScript o Flash.
-
CSS FLEXBOX
El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño flexible y receptiva sin usar flotación o posicionamiento.
-
CSS MEDIA QUERIES
Las consultas de medios en CSS3 ampliaron la idea de los tipos de medios de CSS2: en lugar de buscar un tipo de dispositivo, miran la capacidad del dispositivo.
Las consultas de medios se pueden usar para verificar muchas cosas, como:
- Ancho y alto de la ventana gráfica.
- Ancho y alto del dispositivo.
- Orientación (¿la tableta / teléfono está en modo horizontal o vertical?).
- Resolución.
El uso de consultas de medios es una técnica popular para entregar una hoja de estilo personalizada en computadoras de escritorio, portátiles, tabletas y teléfonos móviles (como teléfonos iPhone y Android).
-
CSS RESPONSIVE
El diseño web receptivo hace que su página web se vea bien en todos los dispositivos.
El diseño web receptivo utiliza solo HTML y CSS.
El diseño web receptivo no es un programa ni un JavaScript.
-
RESPONSIVE TEXT
Se puede establecer con una vw unidad, lo que significa el "ancho de la ventana gráfica".
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador.
MOZILLA:
RESPONSIVE WEB DESIGN BASICS (GOOGLE):
SISTEMA DE 10 REJILLAS
W3SCHOOLS: SASS TUTORIAL
MANUAL DE SASS
BARRAS DE NAVEGACIÓN
- picture_as_pdf
- Vertical Navigation Bar 1
- Vertical Navigation Bar 2
- Horizontal Navigation Bar 1
- Horizontal Navigation Bar 2
- Horizontal Navigation Bar 3
- Horizontal Navigation Bar 4
- Horizontal Navigation Bar 5
- Horizontal Navigation Bar 6
- Horizontal Navigation Bar 7
- Horizontal Navigation Bar to Vertical Navigation Bar (Responsive)
- Vertical Navigation Bar to Horizontal Navigation Bar (Responsive)
- Horizontal Navigation Bar - Menu Desplegable
CSS3
CURTAIN MENU
-
W3SCHOOLS link
- Abre el menú sin animación
- Menú de navegación de cortina
- Desliza hacia abajo desde la parte superior
FLEX
CSS MEDIA QUERIES - EXAMPLES
W3.CSS IMAGES
-
W3SCHOOLS link