En esta publicación, le presentaré 15 propiedades CSS con fragmentos de código.

CSS (Hojas de estilo en cascada) es la columna vertebral del diseño web y se utiliza para diseñar la presentación visual de sitios web. Si bien es posible que ya esté familiarizado con muchas propiedades de CSS, existen algunas propiedades menos analizadas que pueden mejorar sus capacidades de estilo.

Saltemos directamente a ello.🚀

acentuar el color

Cuando se trata de entradas como casillas de verificación y botones de opción, los navegadores a menudo incluyen un color predeterminado que puede no armonizar del todo con el esquema de color seleccionado de su interfaz de usuario.

Para mantener la coherencia en su interfaz de usuario, puede utilizar la propiedad accent-color para cambiar el color predeterminado de las entradas.

Por ejemplo:

<form>
   <input type="radio" id="html" />
   <label for="html">HTML</label>
   <input type="radio" id="css" />
   <label for="css">CSS</label>
   <input type="radio" id="js" />
   <label for="js">JavaScript</label>
</form>

CSS:

input {
  accent-color: green;
}

Producción:

Propiedades CSS

filtro de fondo

A veces es posible que desees aplicar un efecto de filtro (efecto de desenfoque) al área detrás de un elemento. Para ello, puede utilizar la propiedad backdrop-filter.

Por ejemplo:

<div class="container">
  <div class="box">
     <p>This is an example of backdrop-filter property.</p>
  </div>
</div>

CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  width: 350px;
  background: url(img.webp) no-repeat center;
}
.box {
  padding: 10px;
  font-weight: bold;
  color: white;
  background-color: transparent;
  backdrop-filter: blur(10px);
}

Producción:

color de intercalación

Cuando trabaja con elementos de entrada o de área de texto, puede cambiar el color del cursor de texto de estos elementos para que coincida con el esquema de color de su página web, utilizando la propiedad caret-color.< /span>

Por ejemplo:

<input type="text" placeholder="Your Name" />

CSS:

input {
  caret-color: red;
}

renderizado de imágenes

Puede utilizar la propiedad image-rendering para controlar la representación de imágenes escaladas y optimizar la calidad.

Tenga en cuenta que esta propiedad no afecta a las imágenes que no están escaladas.

img {
  image-rendering: pixelated;
  /* Other values: auto, smooth, high-quality, crisp-edges, pixelated, initial, inherit */
}

recuadro

Mientras trabaja con posiciones, puede usar la propiedad inset en lugar de usar topright, propiedades.bottomleft

Por ejemplo:

div {
  position: absolute;
  top: 20px;
  right: 25px;
  left: 16px;
  bottom: 23px;
}

/*You can write the above property as*/
div {
  position: absolute;
  inset: 20px 25px 16px 23px;
}

modo de mezcla

Si desea establecer la combinación del contenido de un elemento con su fondo, puede utilizar la propiedad mix-blend-mode.

Por ejemplo:

<div>
  <img src="cat.jpg" alt="cat" />
</div>

CSS:

div {
  width: 600px;
  height: 400px;
  background-color: rgb(255, 187, 0);
}
img {
  width: 300px;
  height: 300px;
  mix-blend-mode: luminosity;
}

Producción:


Esta propiedad tiene los siguientes valores:

normal, multiplicar, pantalla, superponer, oscurecer, aclarar, sobreexponer color, subexponer color, diferencia, exclusión, matiz, saturación, color, luminosidad.

ajuste de objeto

Puedes configurar el comportamiento de cambio de tamaño de una imagen o vídeo para que quepa en su contenedor usando la propiedad object-fit.

Por ejemplo:

<div>
  <img src="cat.jpg" alt="cat" />
</div>

CSS:

div {
  width: 500px;
  height: 400px;
  border: 3px solid purple;
}
img {
  width: 500px;
  height: 300px;
  object-fit: cover; 
/* Other values: fill, contain, cover, scale-down, none, initial, inherit */
}

Producción:

posición del objeto

La propiedad object-position se usa con la propiedad object-fit para especificar cómo se debe colocar una imagen o video con las coordenadas x/y dentro de su cuadro de contenido.< /span>

Por ejemplo:

<div>
  <img src="cat.jpg" alt="cat" />
</div>

CSS:

div {
  width: 500px;
  height: 400px;
  border: 3px solid purple;
}
img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  object-position: bottom right;
}

Producción:


En pocas palabras, aquí he especificado el object-position: bottom right; que significa que mostrará la parte inferior derecha de la imagen al cambiar el tamaño de la imagen.

desplazamiento de contorno

Puedes utilizar la propiedad outline-offset para especificar el espacio entre un contorno y el borde de un elemento.

Por ejemplo:

<div></div>

CSS:

div {
  width: 300px;
  height: 300px;
  border: 3px solid purple;
  outline: 3px solid rgb(81, 131, 148);
  outline-offset: 10px;
}

Producción:

eventos de puntero

Puedes controlar la reacción de un elemento a eventos de puntero usando la pointer-events propiedad.

Por ejemplo:

<div>
   <p class="first">
      Please <a href="https://shefali.dev/blog">Click here</a>
   </p>
   <p class="second">
      Please <a href="https://shefali.dev/blog">Click here</a>
   </p>
</div>

CSS:

.first {
  pointer-events: none; 
/*here all the pointer events will be set to none. So the user can't 
click on the link.*/
}
.second {
  pointer-events: auto;
}

comportamiento de desplazamiento

Puedes usar la propiedad scroll-behavior para lograr un desplazamiento suave sin usar JavaScript con solo una línea de CSS.

Por ejemplo:

html {
  scroll-behavior: smooth;
}

justificar texto

Puedes usar la propiedad text-justify para establecer el método de justificación del texto cuando estableces el valor de text-align en justify.

Por ejemplo:

p {
  text-align: justify;
  text-justify: inter-character;
/*Other values: auto, inter-word, inter-character, none, initial, inherit*/
}

Aquí, establecí el valor en inter-character para que aumente o disminuya el espacio entre caracteres cuando cambie el tamaño de la ventana. También puedes probar otros valores.

desbordamiento de texto

A veces el texto es demasiado grande para caber en su contenedor. En este caso, para controlar el comportamiento del texto, puede utilizar la propiedad text-overflow.

Por ejemplo:

<div>
  <p>This is an example of text-overflow.</p>
</div>

CSS:

div {
  width: 100px;
  height: 40px;
  border: 3px solid purple;
}
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Producción:

Propiedades CSS

selección de usuario

La propiedad user-select se puede utilizar para controlar la capacidad del usuario para seleccionar el texto.

Por ejemplo:

<div>
   <p>You can't select this text.</p>
</div>
<p>You can select this text.</p>

CSS:

div {
  width: max-content;
  height: 40px;
  border: 3px solid purple;
  user-select: none;
}

salto de palabra

La propiedad word-break se utiliza para especificar cómo deben dividirse las palabras al llegar al final de una línea o al cambiar el tamaño de la ventana.

Por ejemplo:

p {
  word-break: break-all;
  /* Other values: normal, break-all, keep-all, break-word, initial, inherit */
}
Shopping cart0
Aún no agregaste productos.
Seguir viendo
0