CSS (hojas de estilo en cascada) es una de las tecnologías más populares en diseño web, que permite a los desarrolladores crear diseños visuales y responsivos. Como desarrollador web, dominar CSS es crucial para hacer realidad su visión de diseño y garantizar una buena experiencia de usuario en todos los dispositivos. Aquí hay algunos consejos que quizás no conozcas sobre CSS:

1. Neumorfosima:

Neumorphsime, referido al diseño de interfaz de usuario suave, es una tendencia de diseño popular que combina eskeuomorfismo y diseño plano. este estilo utiliza sombras y luces para crear una apariencia suave. Así es como funciona:

Primero, creamos un fondo sutil: para comenzar con Neumotphsime, elige un color de fondo suave como gris claro,

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

luego creamos un elemento con estos estilos

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

finalmente, agregamos un cuadro de sombra al elemento al pasar el cursor

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

así conseguimos este bonito aspecto

y tú también puedes hacer esto

simplemente agregue un recuadro a la sombra del cuadro como este

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() y Max() y abrazadera():

estas herramientas hacen que los sitios web y las aplicaciones sean más dinámicos y receptivos. Puede utilizar estas funciones para controlar el tamaño y el cambio de tamaño del elemento. y crear tipografía flexible aquí cómo:

la función min() le permite establecer el valor más pequeño de una lista aquí cómo

antes

.container {
  width:800px;
  max-width:90%;
}

después

.container{
  width: min(800px,90%);
}

la función max() funciona igual que la función min() pero toma el valor mayor de una lista, aquí se explica cómo:

.container{
  width: max(800px,90%);
}

a veces configuras el ancho y el ancho mínimo y máximo en un contenedor, hay otra función llamada abrazadera(), así es como funciona

antes

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

Después

.container {
  width: clamp(400px,50vw,800px);
}

3. El selector :Has() y :Not():

el selector :not() representa elementos que no coinciden con una lista de selectores

.container:not(:first-child) {
  background-color: blue;
}

el selector :has() representa un elemento si alguno de los selectores relativos a los que se pasa como argumento coincide

.container:has(svg) {
  padding: 20px;
}

4. Degradado de texto:

para este truco, no podemos agregar un degradado al color del texto directamente así

.text{
  color: linear-gradient(to right, red,blue);
}

qué hacemos en su lugar

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

y listo, obtenemos este increíble efecto

Conclusión:

Al dominar una de estas técnicas CSS, elevarás tus habilidades de diseño web a nuevas alturas. con solo pequeños ajustes en esas técnicas, puedes obtener resultados visualmente sorprendentes y hacer que tu diseño sea más hermoso y fácil de usar.

puedes consultar más en: https://designobit.com/