En este articulo veremos características o propiedades de CSS, aun nivel intermedio.
1. '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.
2. 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.
3. 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.
- Pixeles (23px): es la medida pixel a pixel, es fijo y no se adapta.
- Grados (90deg): es la medida de grados.
4. Heredar en CSS
Es sencillo, en la propiedad a heredar solo escribimos inherit que traerá el valor del contenedor del elemento en cuestión.
5. '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.
6. 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).
7. 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.
8. 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.
9. '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.
10. 'Box-radius'
Esta propiedad es sencilla, es la redondez de las puntas de los objetos, para que sean mas suaves.
11. 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: un sistema simple de navegación. En el HTML:
<a href="#Articulo">Boton</a>
<div id="Articulo"> Ejemplo </div>
Y, si queremos hacer algo con el estilo, con CSS, haremos ejemplo:
#Articulo:target {
display: block;
}
- Focus: se ejecuta cuando el elemento esta enfocado o seleccionado, es decir, en formularios cuando el usuario da clic 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.
- Has: ejecuta un código según una condición, la cual es si elemento tiene otro elemento se activara. Ejemplo:
div:has(input:checked) {
color: green;
}
- Is: es un simplificador y de legibilidad. Pero esto ya existe desde siempre, ejemplo:
:is(section, div, article) p {
background-color: black;
}
// Hacen lo mismo, pero 'is' es mas legible
section p, div p, article p {
background-color: black;
}
- Where: se usa para definir estilos, pero su importancia es baja. Es ideal para crear un estilo general, pero que se pueda adaptar mas adelante.
- Not: se ejecuta el código según una condición, la cual es todo elemento que no tenga o sea el parámetro dado. Ejemplo:
:not(.listo) {
color: white;
} // Todo elemento SIN la clase 'listo' sera afectado
- Nth-child: según una "función matemática" se elegirán los elementos. Por ejemplo elegir todos los elementos 'p' pares:
div p:nth-child(2n) { // Elegir pares
color: red;
}
- Nth-child con of: el anterior es limitado, y se puede dañar fácilmente agregando elementos diferentes. Pero podemos solucionarlo con 'of'. Ejemplo, donde en el div pueden haber otros elementos, solo se tendrán en cuenta los párrafos:
div p:nth-child(2n of p) { // Elegir pares, solo teniendo en cuenta los p
color: red;
}
- Existen mas pseudoclases, pueden verla en Pseudoclasses
12. 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.
13. 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).
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.
14. 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.
15. Animaciones
Crear animaciones con un control de su timeline, podemos usar 'from' y 'to' o porcentajes.
Ejemplo con from (el inicio), to (el final):
@keyframes Animacion {
from { display: none; }
to { display: auto; background-color: red; }
}
Ejemplo con porcentajes:
@keyframes AnimDos {
0% { transform: skewX(0deg); }
50% { transform: skewX(45deg); }
0% { transform: skewX(0deg); }
}
En el elemento, para usar la animación hacemos:
.Caja {
view-timeline-name: --animacion-caja; // Nombre del timeline
view-timeline-axis: block; // Para ser vertical (solo una de las opciones)
view-timeline-axis: inline; // Para ser horizontal
}
Luego tenemos que asociarla (en el misma parte del código):
animation-timeline: --animacion-caja; // El timeline a usar
animation-name: Animacion; // La animacion a usar
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.
- Both: no desaparezca la animación luego de terminada.
- Animation-play-state: define el estado de la animación, si esta en curso o pausa.
16. 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.
17. Overflow
Se trata de como evitar el desbordamiento en un objeto. Lo haremos así:
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.
También 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.
18. 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.
19. Control de tamaño, responsividad
19.0 Tamaños generales
- Muy pequeño (móviles o dispositivos pequeños): max 480px.
- Pequeños (móviles y/o tablets): max 768px.
- Mediano (computadores portátiles o pantallas no tan grandes): max 1280px.
- Grande (TVs y superpantallas): de 1280px en adelante.
19.1 Media query
Según el tamaño general de la pagina, ejecutaba un código, por ejemplo si queremos que un objeto sea responsivo, podríamos usarlo para que se vea bien en PCs y móviles.
Ejemplos:
/* Media query Moviles */
@media (max-width: 768px) {
div {
width: 100px;
}
}
/* Media query PC */
@media (min-width: 768px) {
div {
width: 400px;
}
}
19.2 Container query
Según el tamaño de un contenedor especifico (esto para hacer los elementos mas responsivos y específicos en su diseño), ejecuta un código, por ejemplo si el elemento se vuelve cada vez mas pequeño, ocultaremos el botón:
div {
container-type: inline-size;
}
@container (max-width: 200px) {
.Boton {
display: none;
}
}
Para efectuar esta característica, debemos hacer que el contenedor tenga la propiedad ´container-type', las opciones son:
- None: por defecto, no activa nada.
- Size: activará los 'container' según el ancho y alto.
- Inline-size: activará los querys según el ancho nada mas.
- Style: activará los querys basados en el estilo.
Luego ahí si escribimos el query, el tamaño como condición y que pasará.
20. Operaciones
Para calcular números que cambien según el caso y dar responsividad. Ejemplo:
section {
width: calc(200px + 20%);
}
21. Tener valor mínimo, máximo y por defecto
21.1 Todos a la vez
Para tener 3 valores en 1, como funciona el 'clamp(mínimo, preferido, máximo)':
- Mínimo: es el limite al cual llegará al hacerse mas pequeño.
- Preferido: es el valor por defecto que tomará.
- Máximo: es el limite el cual llegará al agrandarse.
.Card {
width: clamp(100px, 50%, 100%);
}
21.2 Mínimo y máximo (no las entiendo 😳)
Existe también 'min' y 'max', donde toma 2 valores, pero su funcionalidad no la comprendo... Diría yo que usar 'clamp' es suficiente.
22. Mezcla de color
Queremos mezclar 2 colores, podemos usar 'color-mix(sistema de color, color porcentaje, color2 porcentaje2)', ejemplo:
div {
background-color: color-mix(in srgb, red 70%, black 30%);
}
El ejemplo anterior, usa el sistema RGB, y usa el 70% de rojo y 30% de negro.
Sistemas de color
El tradicional RGB.
Uno que da mas gama de colores y realistas OKLCH.
Otro, maneja el color con porcentaje de negro y blanco, sistema HWB.
23. Efectos con 'mix-blend-mode'
- Normal: es el por defecto y no hace nada.
- Plus-lighter: da un acabado muy brilloso.
- Color-burn: da un oscuro al color, como de quemado.
- Existen muchas mas opciones, pueden verlo en las pruebas o aquí.
24. Optimizacion de contenido
Podemos definir para que los objetos se carguen solamente cuando necesitemos. Lo logramos con 'content-visibility':
- Auto: se esconde cuando no esta siendo visualizado.
- Hidden: oculta el elemento siempre.
- Visible: muestra el elemento siempre, por defecto.
En el header del HTML hacemos lo siguiente:
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="style.css" media="print" onload="this.media='all'"></noscript>
Esta linea de codigo, es para los estilos NO prioritarios.
La segunda linea, es para el caso que el navegador tenga desactivado el JS.
25. Carrusel
Debe haber un contenedor, y tener varios elementos hijos.
Primero el ejemplo:
.Carrusel {
display: flex; // Un display para ordenar
overflow-x: auto; // Carrusel horizontal
scroll-snap-type: x mandatory; // Control de movimiento horizontal
scroll-behavior: smooth; // Movimiento suave
gap: 10px;
}
.Carrusel .Objeto {
scroll-snap-align: center; // Centrar el elemento del scroll
}
En el carrusel, usamos 'overflow' (para ocultar, lo vimos aqui mismo) y usamos:
- Scroll-snap-type (movimiento)
- x: movimiento horizontal.
- y: movimiento vertical.
- Hay mas... (PROBAR)
- Scroll-snap-type (ubicacion)
- Mandatory: los lementos se mantegan iguales.
- Scroll-behavior: tipo de movimiento.
- Smooth: movimiento suave.
- Center: centrado en el carrusel.
🛠 Practicas
El link de la pagina es CSSlearn y podrás ver ejemplos prácticos de algunos temas vistos anteriormente. Y el código, en SCSS.