10 propiedades de CSS que probablemente no conoces

CSS es un lenguaje de hoja de estilo esencial para todo desarrollador web, el cual tiene muchas propiedades que se utilizan para cambiar y diseñar la apariencia de una página web. Por lo tanto, CSS nos facilita diseñar páginas web y hacerlas receptivas.

CSS ahora ofrece muchas nuevas funciones y propiedades que le facilitarán la vida al codificar su proyecto. Estas son algunas de ellas:

1. La propiedad Selección de usuario

Si desea evitar que los usuarios resalten o seleccionen texto en una página web, la propiedad CSS user-select sería útil. La propiedad determina si se puede seleccionar o no el texto de un elemento.

Esta propiedad es útil si no desea que los usuarios copien y peguen texto de su sitio web.

El ejemplo de código es:

p{
user-select: none;
}

2. La propiedad coloca-elementos

La propiedad CSS place-itemses es una forma abreviada de las propiedades align-items y allow-items. Facilita la alineación de elementos en ambos sentidos (en línea y en bloque) dentro de un sistema de diseño como Flexbox o Grid. La propiedad puede tener dos valores al mismo tiempo. Sin embargo, si solo usa un valor, ese valor se utilizará como un segundo valor.

La propiedad place-itemspuede tener muchos valores diferentes, incluidos el centro, el inicio, el final, la extensión y muchos más.

El ejemplo de código es:

div{
place-items: center;
}

3. La propiedad clip-path

La propiedad clip-path es muy útil e interesante ya que nos permite usar CSS para diseñar varios tipos de formas complicadas (elipses, polígonos, círculos y más formas diferentes).

La propiedad le permite diseñar formas complicadas especificando qué parte de un elemento debe mostrarse. Clip-path puede tener varios valores, incluida una función de forma y una fuente de clip. Se puede encontrar más información sobre la propiedad en los documentos de MDN.

El ejemplo de código es:

div{
clip-path: ellipse(25% 40% at 50% 50%);
}

4. El ajuste de objeto de la propiedad CSS

La propiedad object-fit le permite especificar o definir cómo se debe cambiar el tamaño del contenido de un elemento sustituido (IMG, video, etc.) para que se ajuste a su contenedor. Todos los navegadores principales admiten esta propiedad.

Tiene los siguientes valores posibles: fill , contains , cover , scale-down y none . Se puede encontrar más información sobre estos valores en esta página de MDN .

El ejemplo de código es:

img{
object-fit: cover;
}

El ejemplo de código anterior permite que una imagen permanezca con su relación de aspecto mientras llena la dimensión especificada. Eso es como recortar la imagen para que encaje.

5. La propiedad mix-blend-mode

Otra propiedad de CSS interesante y que rara vez se menciona es mix-blend-mode. Esta poderosa propiedad en CSS especifica y define cómo se debe combinar el contenido de un elemento con el contenido y el fondo del elemento principal.

En pocas palabras, define la combinación de un elemento con otro elemento detrás de él.

El ejemplo de código es:

.parent-element img{
position: absolute;
}

.parent-element h1 {
mix-blend-mode: overlay;
}

6. La propiedad background-blend-mode

Otra propiedad interesante del modo de fusión en CSS es background-blend-mode, que le permite especificar y poner una combinación entre la imagen de fondo y el color de fondo de un elemento.

La propiedad viene con varios valores, como normal, multiplicar, pantalla, etc. Le permite definir varios modos de fusión.

Un ejemplo de código es:

.element{
background: url(“trees.png”), url(“papers.png”);
background-blend-mode: normal;
}

7. La propiedad cambiar de tamaño

La propiedad resize permite al usuario cambiar el tamaño de un elemento en una página web haciendo clic y arrastrando la esquina derecha del elemento. Como resultado, especifica si y cómo un usuario puede cambiar el tamaño de un elemento.

Esta propiedad se usa con frecuencia en elementos como textarea, lo que permite al usuario expandir suavemente el área de texto para ingresar texto de formato largo. Además de eso, se puede utilizar para cambiar el tamaño de cualquier elemento.

La propiedad de cambio de tamaño tiene cuatro valores posibles:

• Vertical: el usuario puede cambiar el tamaño del elemento verticalmente.
• Horizontal: el usuario puede cambiar el tamaño del elemento horizontalmente.
• Ambos: el elemento tiene la capacidad de ser escalado en ambos sentidos.
• Ninguno: el elemento no es redimensionable.

Un ejemplo de código es:

textarea{
resize: none;
}

8. Visibilidad de la cara posterior

En CSS, la propiedad backface-visibility especifica si la cara posterior de un elemento debe mostrarse o no cuando se gira hacia el usuario. Cuando se hacen tarjetas invertidas con efectos de desplazamiento, esta propiedad se utiliza comúnmente. Tiene dos valores posibles: visible u oculto.

Un ejemplo de código es:

.element{
backface-visibility: hidden;
}

9. La propiedad de desplazamiento suave

Si desea tener fácilmente una función de desplazamiento suave en su página web, entonces la propiedad scroll-behavior en CSS puede hacer el trabajo. Todo lo que tiene que hacer es usar la etiqueta html como selector de la propiedad. Luego dale el valor smooth.

Aquí está el ejemplo de código:

html{
scroll-behavior: smooth;
}

10. La propiedad de intercalar color

CSS también se puede usar para cambiar el color del signo de intercalación en las entradas de texto. Puede lograr esto utiliza la propiedad caret-color.

Aquí está el ejemplo de código:

input{
caret-color: red;
}

En conclusión, CSS tiene muchas características y propiedades útiles pero poco conocidos para desarrolladores, por lo que solo necesitamos seguir aprendiendo cosas nuevas para mantenernos actualizados.