Что такое CSS?

CSS или каскадные таблицы стилей — это интерфейсный язык, используемый для улучшения внешнего вида вашего веб-сайта. Без CSS ваш сайт был бы просто скелетом без характера. CSS позволяет управлять макетом, цветами, шрифтами и другими визуальными аспектами веб-страницы.

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

Курсор

Хотя это может показаться незначительной деталью, смена курсора при наведении курсора на определенные объекты меняет правила игры! Обычно веб-сайты в основном текстовые, поэтому всякий раз, когда вы наводите курсор на что-либо, курсор становится текстовым.

  • По умолчанию Вы можете использовать курсор по умолчанию, когда вы наводите курсор на текст, но вам не нужен текстовый курсор.
  • Перекрестие Вы можете использовать курсор в виде перекрестия, когда хотите, чтобы пользователь мог что-то редактировать.
  • Текст Вы можете использовать текстовый курсор, когда хотите, чтобы пользователь мог выбирать текст.
  • Указатель Курсор-указатель можно использовать, когда вы хотите указать, что пользователь может щелкнуть объект, над которым он находится (кнопка, ссылка и т. д.).
  • Захват Вы можете использовать курсор захвата, когда хотите указать, что пользователь может захватывать и перемещать то, над чем он наводит курсор.
  • Захват Вы можете использовать курсор захвата, когда хотите указать, что пользователь захватывает и/или перемещает то, над чем он наводит курсор.
  • Переместить Вы можете использовать курсор перемещения, когда хотите указать, что пользователь может перемещать то, над чем он наводит курсор.
  • Увеличение Вы можете использовать курсор увеличения, когда хотите показать, что пользователь может увеличивать изображение, на которое он наводит курсор.
  • Уменьшение масштаба Вы можете использовать курсор уменьшения масштаба, когда хотите указать, что пользователь может уменьшить масштаб того, над чем он наводит курсор.
  • Запрещено. Вы можете использовать курсор «запрещено», когда хотите указать, что пользователь не может захватывать, перемещать или выбирать то, над чем он наводит курсор.
  • Справка Вы можете использовать курсор справки, когда хотите указать пользователю, что есть полезная ссылка или всплывающее окно, если он нажмет на то, над чем навел курсор.
  • Подождите. Вы можете использовать курсор ожидания, когда хотите указать пользователю, что все, на что он навел курсор или нажал, загружается.

Непрозрачность

Если у вас есть изображения или ссылки на вашем веб-сайте, непрозрачность может быть отличной вещью для игры, поскольку она может дать отличный эффект, когда пользователь наводит курсор на элемент. Вы можете пойти одним из двух способов: сделать элемент по умолчанию с меньшей непрозрачностью (0,5) и изменить непрозрачность на полную или 1 при наведении или наоборот. Когда элемент изначально тусклый и вы устанавливаете непрозрачность при наведении на 1, элемент оживет, когда пользователь наведет на него курсор. Напротив, если вы хотите, чтобы ваш сайт выделялся немного больше, оставьте непрозрачность элемента по умолчанию и установите для нее значение 0,5 при наведении курсора, чтобы указать, что пользователь действительно наводит на него курсор.

Вот пример полной непрозрачности до 0,5:

гифка

img{
  height: 200px;
  width: 200px;
}
img:hover{
  opacity: 0.5;
  cursor: pointer;
}

И наоборот:

гифка

img{
  height: 200px;
  width: 200px;
  opacity: 0.5;
}
img:hover{
  opacity: 1;
  cursor: pointer;
}

Нажмите кнопку

Еще одна крутая вещь, которую вы можете сделать, это имитировать нажатие кнопки! Для этого вы можете перевести кнопку либо вверх-вниз, либо влево-вправо, либо и то, и другое!

Вот пример вверх и вниз:

гифка

button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translateY(4px);
}

(Отрицательные числа заставляют его снижаться! Если вы хотите, чтобы он рос, сделайте его положительным.)

Вот пример левого и правого:

гифка

button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translateX(-4px);
}

(Отрицательные числа заставляют его идти влево! Если вы хотите, чтобы он шел вправо, сделайте его положительным.)

А вот и пример обоих:

гифка

button{
  height: 50px;
  width: 125px;
}
button:hover{
  cursor: pointer;
}
button:active{
  transform: translate(-4px, 4px);
}

Границы

Вы также можете оживить любой элемент рамкой! Вы можете возиться с цветом, углами и стилем.

  • Цвет Вы можете сделать рамку и цвет по своему усмотрению. Вы даже можете сделать каждую сторону разным цветом, используя border-left, -right, -top и -bottom.

Вот пример:

button{
  border-left: 5px solid red;
  border-top: 5px solid  orange;
  border-right: 5px solid  pink;
  border-bottom: 5px solid purple;
}
  • Углы То же самое с цветом, вы также можете изменить радиус границы каждого угла! Порядок значений следующий: верхний левый, верхний правый, нижний правый, нижний левый.

button{
  border-radius: 15px 50px 30px 5px;
}
  • Стиль. Существует несколько стилей, которые вы можете выбрать для своей границы, и, как и для двух свойств выше, каждая сторона может иметь свой стиль с помощью border-left, -right, -top и -bottom.

button{
  border-left: 5px solid red;
  border-top: 5px dotted  orange;
  border-right: 5px dashed  pink;
  border-bottom: 5px double purple;
}

Заключение

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