¿Cómo funciona :has()? :has() es un selector o pseudo-clase que indica que vamos a aplicarle estilo al elemento superior que se encuentra antes de un elemento determinado. El elemento posterior al que nosotros queremos es un elemento hijo o un elemento hermano. Otra forma de explicarlo es la siguiente: :has() Leer más…
Significado: Outline significa contorno y es ese contorno que suele aparecer cuando le damos clic a un <input> aunque también puede ser definido en otros elementos como: <span>, <a>,<p>, etc. Aquí te dejo un vídeo con los ejemplos que veremos más adelante. Diferencia entre border y outline La diferencia es Leer más…
¿Cómo seleccionar el primer elemento dentro de un documento html? first-of-type: Es un selector o pseu-doclase de css que representa el primer elemento (de su tipo) entre un sin numero de elementos del documento html. Osea: Si tenemos varios <h1>, <div> ,<input> o cualquier otro elemento solo hará referencia al Leer más…
¿Cómo seleccionar el primer elemento hijo? Definición: first-child: Es una pseudo-clase que selecciona solo el primer elemento hijo de un grupo de elementos. (Para todos los que no quieran leer les dejo un vídeo corto de first-child.😜) Sintaxis: Para usar esta pseudo-clase primero va el elemento seguido de 2 Leer más…
flex-wrap Es una propiedad del flexbox que nos ayuda con la distribución de los elementos en el contenedor. A continuación veremos 3 valores de flex-wrap. 1. nowrap El valor nowrap es el valor por defecto o inicial de flex-wrap, hace que los elementos o ítems entren todos en una Leer más…
¿Qué es flexbox? Es un método o procedimiento de diseño de páginas webs unidimensional osea que solo tiene una dimensión. En otras palabras al ser flexbox unidimensional estamos indicando que: flexbox solo maneja una dimensión a la vez, esta puede ser fila o columna pero no ambas al mismo tiempo. Leer más…
Llevo mucho tiempo usando css grid y aun hay cosas que no tengo claras, por ese motivo hoy quiero revisar y hacer ejemplos sobre justify-items y justify-conyent. Empecemos definiendo que hace cada una de estas propiedades. justify-items: justify-items es una propiedad que alinea el elemento en el eje x (lado Leer más…
align-self align-self es una propiedad de css que aliena (o reposiciona) el elemento respecto al eje Y de una cuadrícula o grilla. Nota: align-self solo se aplica a un único elemento o casilla de la cuadrícula. Entre los valores de align-self se encuentran los siguientes: – start – end Leer más…
rem y em en css Son unidades de longitud relativa. ¿Pero relativo a que? En el caso de em quiere decir que es relativo o toma el tamaño de letra de su elemento padre. Mientras que rem toma el tamaño de letra del elemento raíz (root). Nota: Es importante saber Leer más…
blur() css blur es una función de css que genera un desenfoque gaussiano esto es un efecto de suavidad o difuminado. En otras palabras blur genera un efecto borroso más o menos.😅 Yo probé esto en una imagen, texto y elemento div. Nota: Cuando blur esta en 0 no se Leer más…