CSS

CSS:

    • Flexbox
      • Propiedades:
        • contenedor-flex: padre
          • display:flex
          • flex-direction: establece el eje principal del contenedor y su contenido
            • flex-direction: row  (default)
            • flex-direction: row-reverse 
            • flex-direction: column
            • flex-direction: column-reverse
          • flex-wrap: determina la existencia o no de saltos de línea y su sentido
            • flex-wrap: nowrap  (default)
            • flex-wrap: wrap
            • flex-wrap: wrap-reverse
          • justify-content: establece la dirección de los items en el eje principal (reparto del espacio)
            • justify-content: flex-start  (default)
            • justify-content: flex-end
            • justify-content: space-between
            • justify-content: center
            • justify-content: space-around
          • align-items: establece la alineación de los items en el eje transversal (reparto de espacio)
            • align-items: flex-start
            • align-items: flex-end
            • align-items: center
            • align-items: baseline
            • align-items: stretch  (default) Si defino el 'alto' lo respeta.
          • align-content: establece la alineación de filas respecto del eje transversal (Importante: solo con más de una línea)
            • align-content: flex-start
            • align-content: flex-end
            • align-content: center
            • align-content: space-between
            • align-content: space-around
            • align-content: stretch  (default) Si defino el 'alto' lo respeta.
        • flex-items: fills
          • align-self: Sobreescribe" la propiedad ALIGN-ITEMS para el elemento.  
            • align-self: auto  (default) (hace caso al resto de colegas)
            • align-self: flex-start
            • align-self: flex-end
            • align-self: center
            • align-self: baseline
            • align-self: stretch
          • flex-grow: default "0".
            • Si hay espacio sobrante indica lo que puede crecer un elemento para ocuparlo.
              • Esta propiedad solo se aplica si el espacio disponible es positivo (el tamaño del contenedor es mayor a la suma de los flex-items y sus márgenes).
              • El número indica la proporción en la que se reparten.
              • NO que vaya a ser el doble que el otro, sino que va a recibir el doble del espacio vacío
              • Por defecto no crecen (0)
            • flex-grow: n  (n= 0, 1, 2.....) ( no puede ser negativo)
              • Espacio que va a crecer cada item con flex-grow= (Espacio disponible / 𝝨valores flex-grow) * valor-flexgrow
            • flex-shrink: (default "1")
              • Si hay desbordamiento establece la capacidad de "encoger". Por defecto, encogen (1)
            • flex-basis: (default auto)
              • Es el ancho que tienen los elementos antes de empezar a crecer o encoger.
              • Tiene poco sentido sin flex-shrink y flex-grow, sobreescribiría el valor width si lo hubiera.
              • .item { flex: flex-grow [flex-shrink] [flex-basis]; }
            • order: (default "0")
              • Cambia el orden de colocación que correspondería según su orden en HTML.
              • Regla nemotécnica( pensar como z-index).
              • Valores positivos y negativos.
                • Positivos: colocan al final de la pila
                • Negativos: colocan al principio de la pila
      • Enlaces:

    • FlexBoxResponsive

    • Pseudo elementos Before-After
      • Pseudo-elementos ::before y ::after
        • Añado contenido como primer hijo (BEFORE) o comoúltimo (AFTER) al elemento al que se lo aplico.
        • Es INDISPENSABLE establecer la propiedad CONTENTpara que funcione, aunque esté vacía:
        • Lo primero es definir el: content: ‘ ‘; LO PRIMERO , sino no sale nada
        • Por defecto un pseudoelement tiene por defecto: display inline Es aconsejable establecer a continuación un display: inline-block, o, block, list-item, etc...
        • Cada nodo del DOM, solo puede tener un pseudo-elemento before y after, excepto si el nodo no tiene contenido(ej: una imagen o un input no pueden tener pseudo-elementos, es decir una etiqueta sin cierre)
        • NO EXISTEN EN EL DOM. Es contenido que se genera dinámicamente desde el CSS. (No puedo indicar cuál es en el HTML)
        • Importante: Como los márgenes y paddings verticales en % no se refieren al alto de su padre, sino a su ancho, nos podemos aprovechar de ésto. Técnica utilizada en el link de 'cuadrados responsive'.
        • Diferencias entre  pseudo-clases y pseudo-elememtos:
          • pseudo-clases se indican con ":"
          • pseudo-elementos se indican con "::"
          • pseudo-clase es un estado temporal de un elemento que sí existe en el DOM
          • un pseudo-elemento no existe en el DOM
      • Triángulos css:




      • Simulador-browserstack
      • <meta name="viewport" content="width=device-width, initial-scale=1">
      • Anchos, margins y paddings en %, em, rem, vw o vh.
      • TARGET / CONTEXTO = RESULTADO EN %
      • ¿Cuándo %?
        • Cuando necesito que el valor sea un porcentaje del alto o ancho del contenedor.
        • OJO!!! padding y margin verticales se refieren al ANCHO del contenedor.
        • OJO 2!!! height: 100% (o cualquier otro porcentaje) NO HACE NADASI EL PADRE NO TIENE ALTO ESPECIFICADO O HEREDA (REGLA PRESENTE) DE SUS ANCESTROS.
        • Ejemplo %:
      • PX, EM or REM Media Queries?

      • REM: se refiere al tamaño de fuente establecido en el HTML y si no se ha establecido, al del NAVEGADOR. (R de root).
        • Definición REM y EM:
        • ¿Por qué REM y no EM?
          • Cuando no quiera que un valor (height, line-height, padding, margin...) esté afectado por un cambio de font-size en el elemento o en sus ancestros. (Es un tamaño “fijo” hasta que cambie el font-size del HTML).
        • ¿Por qué REM y no PX?
          • Si un usuario incrementa o disminuye el tamaño de su fuente en el navegador, las proporciones del layout se mantendrán.
        • Ejemplo REM:
      • LAYOUT FLEXIBLE: EM VS REM
        • EM: se refiere al tamaño de fuente establecido EN EL PROPIO SELECTOR y está afectado por la HERENCIA.
        • ¿Cuándo EM?
          • Cuando quiera que un valor (height, line-height, padding, margin...) crezca o disminuya proporcionalmente con un cambio de font-size en el elemento o en sus ancestros.
          • En MEDIA QUERIES: Siempre EN LAS MEDIA QUERIES se refiere al font-size del NAVEGADOR
        • Ejemplo EM:
      • MEDIA QUERIES
        • Establecemos condiciones a partir de las cuales se aplicarán reglas CSS distintas.
        • MOBILE FIRST: Partimos del CSS que se aplicará en las resoluciones más pequeñas y modificamos con MIN-WIDTH.
        • @media all/screen and (min-width: breakpoint){  }
        • ¿DÓNDE?
          • Agrupadas por breakpoints: más mantenible, menos líneas. Preferible para CSS estándar.
          • En contexto: work-flow mucho más rápido, más flexible, con preprocesadores.
      • IMÁGENES
        • Las imágenes deben estar dentro de contenedor.
        • MAX-WIDTH (max-height): Imágenes fluidas. Consigo que no salga de sucontenedor, pero que tampoco exceda SU PROPIO TAMAÑO para NO PIXELAR.
        • img{ max-width: 100%; height: auto; }
        • DISTINTOS TAMAÑOS: srcset, etiqueta picture, media queries... (mucha información en internet.
        • Usar SVG cuando podamos: Ligeras y calidad óptima para todas las resoluciones.
        • Ejemplo imágenes fluidas:





    • En construcció




  • Selectores css
    • Selectores básicos
    • Complex selectors
    • .prueba.grande{} : Se hace referencia al elemento .prueba que tiene también la clase .grande.
    • .prueba .grande{} : Se hace referencia a cualquier descendiente del elemento .prueba que tenga la clase .grande.
    • div:not(.box){background-color: yellow;}
  • ss-TRICKS
    • Remove the spaces inline-block
      •  nav { font-size: 0;} nav a { font-size: 16px;}
    • Truco line-height: si a un texto de una linea
      • le damos el alto de su contenedor , el texto se centra en vertical.
      •   line-height: 10rem; height : 10rem; text-align:center;

      • Si quitamos "position:relative" del container, el width del content será el 30% del abuelo
      .container { position:relative; width: 50%; }
      .content { position:absolute; width: 30%; }

    • Viewport units CSS: 
      • width:100vw; (anchura del 100% de la anchura de la ventana gráfica)
      height:50vh; (altura del 50% de la altura de la ventana gráfica)
      line-height:3vh; (altura de línea del 3% de altura de la ventana gráfica)

    • Cuando un elemento tiene todos sus hijos flotando, pierde su altura
      • Mejor solución si el contenido cabe: dar al padre: overflow:hidden
        • en un menu con subopciones no iría bien
      • Si no va bien la anterior solución, utilizar pseudo-elementos
        • padre::after{content: ''; display: block; clear: both;} 
          • De esta manera el padre ya no tiene todos los hijos flotando y no pierde la altura.  
        •  Tecnicas limpiezas overflow
        • Una vez se define overflow:hidden a un elemento, se crea un block-formating-context
        • Para mas información: Block-formating-context

    • Centrado horizontal: 
      • Display inline-block + text-align center del padre
      • Ancho desconocido: display:table + margin lateral auto
      • Ancho desconocido: position absolute left 50% + translatex(-50%) (¡¡¡ ojo con la anchura del padre:siempre que ponemos posiciones absolutas, si no tenemos mas hijos y no hemos definido altura, el padre se queda sin altura)

    • Centrado vertical: cuadrados perfectos(dimensioines en em )
      • Texto(de una sola línea sin espacios)+Alto del padre conocido ---> line-height = altura del padre.
      • Si puedo poner al padre display:table ---> display:table-cell+vertical-align:middle
      • Alto conocido ---> position:absolute 50% + margin top negativo 1/2 del alto(¡¡¡ NO porcentajes !!!)
      • Alto desconocido ---> position:absolute top:50% +transform:translatey(-50%)
    • Centrado en horizontal y vertical:
      • Con tablas: display table-cell + vertical align middle + text align center
      • Dimensiones conocidas ---> position:absolute 50% 50% + margin negativo 1/2 ancho (¡¡¡ no porcentajes))
      • Todo desconocido ---> position absolute 50% 50% + translate(-50%, -50%)
    • Links interesantes centrado
    • Ejemplo centrado:




Entradas populares de este blog

Angular

Imagen
Angular basics Angular Router Jumpstart Angular Web oficial Ventajas 5 ventajas llibre  Llibre ng-book2 Repositori Forms ngModules Tutorials Digital Ocean Angular Setup Guide Quick Start       Style Guide Buenas Prácticas: curso escuela it Buenas Prácticas Repositorio Precarga modulos: preloadingStrategy: PreloadAllModules Comandos Angular CLI ng Material Angular material iconos Angular Boostraphttps://www.digitalocean.com/community/tutorials/angular-viewchild-access-component-es The Most Powerful Angular UI Component Library PrimeNg PrimeNg-components Plugin Chrome para debug Angular Maps console AGM-Angular Google Maps: instalación AGM-Angular Google Maps: components Tutorial Curso Angular 8 EscuelaIT Objetivos Repositorio Pdf completo Ejemplo de Angular desplegado en node.js Cod e Ejemplo CRUD + Firebase Repositorio Ejemplo Building a Real-Time Chat App with React and Firebase Es interesant pe...
Leer más

Ionic & Capacitor

Ionic Ionic framework Developer Hub Get started with Ionic Crear cuenta Ionic Components Comunicación entre componentes @ViewChild Ionic documentación Api Ionic & Firebase Ventajas e inconvenientes IonicThenesDocumentación plantillas  Base datos Sección navegación blog Post Ionic themes tutorials Ionic Full Starter App Install with CLI sudo npm install -g ionic Crear aplicación: elegimos el tipo que queramos ionic start myApp tabs ionic start myApp blanck ionic start myApp sidemenu Al crear la app nos pide si la queremos en Angular. Vemos que nos crea una estructura basada en angular en la carpeta myApp Ir a la carpeta myApp y ejecutamos ionic serve Para levantar ionic lab:  ionic serve --lab En Visual Studio Code instalar las extensiones Auto Close Tag Ionic 4 Snippets Probar con dispositivo Descargar la app ionic DevApp en la App Store En el terminal del mac sudo npm i -g cordova En la carpeta del proyecto ionic co...
Leer más

Spotify

Spotify SPOTIFY: Acceder amb Chrome (en Safari las pruebas de accesos me fallan ?????) Developper Crear aplicación Acceder a DASHBOARD Create a client ID  para crear una app Ya tenemos el  Client ID  y  Client Secret  que serán necesarios para la API. Instalar POSTMAN Token: Ir a Docs, web API, Authorization Guide Seleccionar:  Refreshable app authorization:  Client Credentials Flow Acceso al token:  Ir a Postman y dar de alta para obtener el token Indicar: POST Teclear:  https://accounts.spotify.com/api/token En la pestaña  Body  dar de alta los key-value KEY                                                 VALUE grant_type                        Client_credentials client_id              ...
Leer más