CSS (folhas de estilo em cascata) é uma das tecnologias mais populares em web design, permitindo aos desenvolvedores criar designs visuais e responsivos. Como desenvolvedor web, dominar o CSS é crucial para dar vida à sua visão de design e garantir uma boa experiência do usuário em todos os dispositivos. Aqui estão algumas dicas que você talvez não conheça em CSS:

1. Neumorfsima:

Neumorphsime, referido ao design de UI suave, é uma tendência de design popular que combina skeuomorfismo e design plano. este estilo usa sombras e realces para criar uma aparência suave. aqui está como funciona:

Primeiro, criamos um fundo sutil: para começar com Neumotphsime, escolha uma cor de fundo suave como cinza claro,

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

então criamos um elemento com esses estilos

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

finalmente, adicionamos uma sombra de caixa ao elemento ao passar o mouse

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

então temos esse visual legal

e você também pode fazer isso

basta adicionar uma inserção à sombra da caixa como esta

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

2. Min() e Max() e braçadeira():

essas ferramentas estão tornando sites e aplicativos mais dinâmicos e responsivos. você pode usar essas funções para controlar o dimensionamento e redimensionamento do elemento. e criando tipografia flexível aqui como:

a função min() permite definir o menor valor de uma lista aqui como

antes

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

depois

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

a função max() funciona da mesma forma que a função min() mas pega o valor maior de uma lista aqui é como:

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

às vezes você define a largura e a largura mínima e máxima em um contêiner, há outra função chamada clamp() aqui é como funciona

antes

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

Depois

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

3. O seletor :Has() e :Not():

o seletor :not() representa elementos que não correspondem a uma lista de seletores

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

o seletor :has() representa um elemento se algum dos seletores relativos que são passados ​​como um argumento corresponder

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

4. Gradiente de texto:

para este truque, não podemos adicionar um gradiente à cor do texto diretamente assim

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

o que fazemos

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

e pronto, conseguimos esse efeito incrível

Conclusão:

Ao dominar uma dessas técnicas CSS, você elevará suas habilidades de web design a novos patamares. com apenas pequenos ajustes nessas técnicas, você pode obter resultados visualmente impressionantes e tornar seu design mais bonito e fácil de usar.

você pode conferir mais em: https://designobit.com/