Propiedades de CSS intermedio

By:

 En este articulo veremos características o propiedades de CSS, aun nivel intermedio. 


'Text-decoration' CSS

Esta característica permite cambiar el texto su decoración, tenemos:
  • Underline basico: crea una linea debajo del texto: subrayado. Los enlaces por defecto tienen esta opción activada.
  • Underline dotted: crea una linea punteada debajo del texto.
  • Underline wavy: crea una linea ondulada debajo del texto.
  • Underline overline: crea dos líneas arriba y debajo del texto.
  • Underline dashed: crea una linea punteada pero de pequeñas líneas.
  • Underline double: crea dos líneas en la parte inferior.
  • None: deja sin decoración en el texto.
El formato para usar esta propiedad es: text-decoration: underline [tipo de linea] [color]. No es obligatorio usar el tipo y el color, también esta por individual las propiedades.

Viewport, vista de diseño

El viewport es todo lo que se ve, es el todo básico o primario de una pagina, es el "padre" de todo los objetos visibles.
Además, la vista de diseño esta en los navegadores y nos da herramientas como para ver la visualización en otros equipos.
Podemos editar el tamaño del viewport para mejorar como lo ven nuestros usuarios: <meta name="viewport" content="width:device-width, initial-scale:1.0"> en el html/headers.


Unidades de medida

Relativos (unidades que cambian, se adaptan, son dinámicas), hay:
  • Porcentaje (20%): esta unidad se adapta al tamaño de manera porcentual.
  • REMs (2rem): es el tamaño relativo de la tipografía de todo el documento. 
  • VW (100vw): es un pedacito del viewport, que va de 1 a 100, se adapta al viewport.
Absolutas (unidades que son fijas, no dinámicas):
  • Pixeles (23px): es la medida pixel a pixel, es fijo y no se adapta.
  • Grados (90deg): es la medida de grados.
Las unidades vistas anteriormente son las mas usadas, hay mas, pero estas son las mas importantes.

Heredar en CSS

Es sencillo, en la propiedad a heredar solo escribimos inherit que traerá el valor del contenedor del elemento en cuestión.


'Background-size'

Podemos definir la ubicación de la imagen (si es el caso) en el objeto, y son:
  • Contain: la imagen se ajusta bien al objeto, puede perder calidad, también si no es suficiente el tamaño puede repetir la imagen.
  • Cover: estira la imagen para que tenga la mejor calidad, pero ignora el tamaño de su contenedor, puede cortarse.
  • Manual: podemos elegir el tamaño exacto, con dos valores numéricos, o uno o dos porcentuales, es decir valores de unidad de medida.
Podemos usar background-repeat: no-repeat para evitar que la imagen se repita.

Función 'Linear-gradient'

Esta función toma 2 parámetros mínimos, o mas; recibe colores y hace un degrado de los colores seleccionados. Se usa: linear-gradient(color1, color2, color3opcional).

Posicionamiento

Ubica el objeto según nuestras necesidades, tenemos:
  • Static: este es el valor por defecto, no hace nada.
  • Relative: activa 4 valores nuevos (debajo de la lista esta la explicación) lo que hace es que lo movamos de su posición original sin perder el espacio original, es decir, el espacio antes de moverlo se respeta y se mantiene sin ocupar por otros objetos.
  • Absolute: activa 4 valores nuevos... Hace lo mismo que relative, pero, el espacio original no se guarda y el objeto queda "suelto" por la pantalla y podemos ponerlo donde se desee.
  • Fixed: activa los mismo 4 valores... Origina que el objeto siempre este a la vista del usuario, es decir, se queda en una posición fija de la pantalla sin importar el scroll.
  • Sticky: activa igualmente 4 valores. Logra mezclar relative con fixed, entonces, según la distancia puesta a su contenedor, cuando el usuario cumple la distancia, es decir por ejemplo, si tenemos 100px en la parte de arriba, hará que si la distancia es mayor o igual a 100px mantendrá posición relative, pero al ser menor: se volverá fixed.
Entonces, los 4 valores que se activan son: top, left, right, bottom; en las posiciones que usan estas propiedades, deben tener un valor para denotar su funcionamiento.

Z-index

Esta propiedad es de gran ayuda con las posiciones, también funciona para otras cuestiones. Esta propiedad logra generar que objetos se visualizaran primero. Entre mayor sea el numero, será el primero que se vea, al contrario, menor sea su numero, será el que se vera debajo de todos.

'Box-shadow'

Esta característica creara una sombra (a un nivel mas técnico, lo que hace es duplicar el objeto y con un color plano), también tendrá una opción de la opacidad. Para usarlo: box-shadow: valorx valory valorDifuminarOpcional tamañoOpcional colorOpcional. Con la coma puedes hacer una nueva sombra.

'Box-radius'

Esta propiedad es sencilla, es la redondez de las puntas de los objetos, para que sean mas suaves.

Pseudoclases objeto:pseudoclase

  • Hover: la clásica, se ejecuta cuando el mouse pasa por encima del objeto (solo funciona en pc o sistemas con mouse).
  • Active: se ejecuta cuando se le da click a un objeto, y se desactiva al dejar de presionar.
  • Target: primero en el HTML se puede referenciar objetos ahí mismo, para ello, ponemos un ID al objeto a referenciar, luego en el botón que ejecutara esta acción, en su href, pondremos el ID. Ahora, en CSS se ejecuta la pseudaclase cuando se hace la referencia.
  • Focus: se ejecuta cuando el elemento esta enfocado o seleccionado, es decir, en formularios cuando el usuario da click a una caja de texto.
  • Checked: se ejecuta cuando un checkbox cambia.
  • Root: imposible olvidarse de el, es la pseudoclase que nos ayuda a crear variables.
  • Optional: se ejecuta, en formularios, cuando NO tienen la propiedad required.
  • Required: se ejecuta, en formulario, en los campos CON la propiedad required.
  • Existen mas pseudoclases, pueden verla en Pseudoclasses.

Pseudoelementos objeto::pseudoelemento

  • After: solo puede existir uno por elemento. Crea un elemento desde CSS después del objeto.
  • Before: solo puede existir uno por elemento. Igual a after, pero crea el elemento antes.
  • First-letter: edita la primera letra del objeto.
  • Podremos ver mas elementos en Pseudoelements, aunque varios están en prueba, o no son compatibles con los navegadores.

Transform

Es la propiedad de "posición" la cual podemos editar para mover el objeto.
Para mover, o rotar, o etc.
  • TranslateX: mueve hacia la derecha o izquierda en el eje x. translateX(55px).
  • TranslateY: mueve hacia arriba o bajo en el eje y. translateY(-200px).
  • Rotate: rota el objeto: rotate(90deg).
  • Scale: escala el objeto haciéndolo mas grande o pequeño. scale(2).
  • Skew: deforma el objeto en grados, por buenas practicas, se usa skew(x,y).
En varias de las opciones existe la edición por eje.
Algo importante es que al editar varios valores, se debe poner en una sola linea de código, así: transform: translateX(20px) rotate(90deg) scale(0.5); Al ponerlo en otra linea, se cancelaran los anteriores.

Transiciones

Algo a tener en cuenta es que hay objetos que nos son animables. Para usar esta característica tenemos:
  • Transition-duration: es el tiempo que durará la animación.
  • Transition-property: es la selección de que queremos que se anime, en defecto esta en all, pero esto consume muchos recursos; podemos elegir el background-color, el transform, etc.
  • Transition-timing-function: es una opción avanzada del tiempo de la animación, pero en curvas, por ejemplo:
    • Ease: empieza lento, acelera, desacelera, y vuelve a acelerar (por defecto).
    • Ease-in: empieza lento y termina rápido.
    • Ease-out: empieza sin ejecutar, luego acelera, y termina acelerando mas.
    • Ease-in-out: empieza acelerando, baja a 0, acelera y luego acelera aun mas.
    • Linear: acelera constantemente.
  • Transition-delay: es el tiempo de espera antes de ejecutar la animación.
Los valores se pueden poner uno por uno. Pero se puede todo en una misma linea: transition: duración propiedad demora curva / transition: 5s transform 0.5s ease-in; Es una forma ordenada de usarlo pero no es obligatoria, algunas propiedades tampoco son obligatorias, eso si: el primer tiempo es la duración y el segundo es el delay.


Animaciones

Estas no necesitan ser ejecutadas por pseudocositas 😂 y se crean como una función (eso si, al no tener una condición se ejecuta por siempre o al empezar, para evitar esto ponemos condiciones como en las pseudocositas o con sass).
En CSS en el objeto ponemos: animation-name: NombreFuncion y animation-duration: tiempo.
Ahora aparte: @keyframes NombreFuncion {}
Dentro de la "función" podemos agregar from{} (es el inicio de la animación) y to{} (final de la animacion). O mejor aun: usamos porcentajes 0%{} (el inicio) opcionalmente 50%{} (la mitad) 100%{} (el final).

Aparte, podremos usar animation-iteration-count: infinite; esto es las veces que se repetirá la función. Que también puede ser infinito.
Podemos definir la acción de la animación:
  • Animation-direction: es como será el orden para efectuar la animación.
    • Normal: es el por defecto, y ejecuta la animación normalmente.
    • Reverse: hace que se ejecute al revés.
    • Alternate. hace que al principio se ejecute normal, pero al terminar devuelve toda la animación, para que no termine de golpe.
  • Animation-fill-mode: es como terminara y guardara sus propiedades.
    • None: por defecto, no hace nada.
    • Forwards: al terminar, se queda como finalize la animación, sin importar como estaba originalmente.
    • Backwards: guarda las propiedades, ejecuta la animación, y carga lo guardado.
  • Animation-play-state: define el estado de la animación, si esta en curso o pausa.

Alternativas al div

Div es la típica etiqueta para hacer divisiones, el problema de usarlo demasiado es que hace mas difícil la lectura del código, además de que no ayuda al SEO y al HTML semántico.
Las alternativas tenemos:
  • Main: es la etiqueta del contenido principal de la pagina.
  • Section: es para agrupar por una sección lógica, como en un articulo la parte de comentarios, por ejemplo.
  • Article: es para secciones aparte del contenido, por ejemplo, en el medio del documento una especie de publicidad.
  • Header: es para representar la cabecera la pagina.
  • Footer: es para la ultima parte de una pagina.
  • Nav: este es para la navegación en las paginas.
  • Aside: esta etiqueta es para contenido que no tiene que ver con la pagina. Como publicidad.
  • Figure: es para imágenes o figuras o gráficos dentro de la pagina web.
  • Code: como su nombre lo dice, es para el apartado donde queramos escribir código.
  • Mark: es parecido a span, pero es para resaltar textos importantes.
 

Overflow

Se trata de como evitar el desbordamiento en un objeto. Lo haremos asi:
En la propiedad overflow:
  • Visible: no hace nada, es el default, y desborda el contenido (se sale).
  • Hidden: oculta el contenido que se pueda desbordar, y ademas puede crearse una animacion para poder mostrar todo el contenido.
  • Clip: hace lo mismo que hidden, pero NO permite animarlo.
  • Scroll: crea barras para poder hacer scroll vertical y horizontal.
  • Auto: elije la mejor opcion para mostrar y evitar desbordamiento.
  • Hidden visible: oculta el contenido extra y crea un scroll.

En la propiedad overflow-wrap:

  • Normal: no recorta las palabras y deja que se desborden, default.
  • Anywhere: recorta las palabras en cualquier punto para evitar el desbordamiento.
  • Break-word: hace lo mismo que la anterior, pero suaviza mejor los cortes.

Tambien podemos ser mas precisos y definirlos por cada eje, asi

  • overflow-x: aqui podemos elegir cualquier propiedad normal de oveflow, pero solo se aplicara en el eje x.
  • overflow-y: aqui es para el eje vertical.

Form-sizing

Es una nueva funcionalidad que llegara después de 11 de octubre, la cual aun no se dará soporte ya que todavía no se puede usar... Pero la cual sirve parecido a la propiedad 'overflow', que ayudara a los 'inputs' de un formulario a adaptarse al contenido que el usuario escribe.



Practicas

El link de la pagina es CSSlearn y podrás ver ejemplos prácticos de algunos temas vistos anteriormente.


Bibliografía