CSS (каскадные таблицы стилей) — одна из самых популярных технологий в веб-дизайне, позволяющая разработчикам создавать визуальные и адаптивные проекты. Для веб-разработчика владение CSS имеет решающее значение для воплощения вашего дизайнерского замысла в жизнь и обеспечения хорошего пользовательского опыта на всех устройствах. Вот несколько советов о CSS, которые вы, возможно, не знали:

1. Неоморфсима:

Нейморфсиме, называемый мягким дизайном пользовательского интерфейса, представляет собой популярное направление дизайна, сочетающее в себе скевоморфизм и плоский дизайн. в этом стиле используются тени и блики для создания гладкого вида. Вот как это работает:

Сначала мы создаем тонкий фон: чтобы начать с Neumotphsime, выберите мягкий цвет фона, например светло-серый,

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

затем создаем элемент с этими стилями

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

наконец, мы добавляем тень к элементу при наведении

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

так что у нас получился такой красивый вид

и ты тоже можешь это сделать

просто добавьте вставку к тени блока, вот так

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

2. Min() и Max() и зажим():

эти инструменты делают веб-сайты и приложения более динамичными и отзывчивыми. вы можете использовать эти функции для управления размером и изменением размера элемента. и создание гибкой типографики здесь:

функция min() позволяет вам установить наименьшее значение из списка, вот как

до

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

после

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

функция max() работает так же, как функция min(), но принимает большее значение из списка, вот как:

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

иногда вы устанавливаете ширину, минимальную и максимальную ширину в одном контейнере, есть еще одна функция с именем зажим(), вот как она работает

до

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

После

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

3. Селектор :Has() и :Not():

селектор :not() представляет элементы, которые не соответствуют списку селекторов

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

селектор :has() представляет элемент, если какой-либо из относительных селекторов, переданных в качестве аргумента, соответствует

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

4. Градиент текста:

для этого трюка мы не можем напрямую добавить градиент к цвету текста, вот так

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

что мы делаем вместо этого

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

и вуаля, мы получаем потрясающий эффект

Заключение:

Освоив одну из этих техник CSS, вы поднимете свои навыки веб-дизайна на новую высоту. с помощью лишь небольших корректировок с помощью этих методов вы можете добиться ошеломляющих визуально результатов и сделать свой дизайн более красивым и удобным для пользователя.

подробнее можно узнать на сайте: https://designobit.com/