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

Итак, приступим.

Плавная прокрутка

Эффект плавной прокрутки (smooth scrolling) очень важен, когда на Вашем веб-сайте присутствует кнопка или другой HTML-элемент, с помощью которого осуществляется переход к определенной части загруженного контента. Конечно, эту простую задачу можно реализовать и с помощью атрибута href="#goToContact", но в таком случае перемещение произойдет мгновенно, а это совсем не сексуально. С другой стороны, эффект плавной прокрутки радует глаз, выглядит экстремально сексуально и профессионально. Помните о том, что посетители Ваших ресурсов должны получать только лучшие решения:

html {
    scroll-behavior: smooth;
}

Размеры изображения

Разве Вы никогда не испытывали головную боль, пытаясь уместить изображение в границы родительского элемента? Я покажу самый простой способ профессионального решения такой проблемы.

Вот пример:

img {
    max-width: 100%;
    height: auto;
}

Сделать картинку курсором

Хотите, чтобы курсор для Вашего сайта был уникальным? Почему бы и нет: возможно такое решение понравится посетителям:

body {
    cursor: url("images/cursor.png"), auto;
}

Размещение по центру

Вырвали все волосы, пытаясь разместить HTML-элемент по центру? Получите три волшебные строки:

,center {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

Ограничение текста

Нужно вывести только пару предложений в абзаце? Это можно сделать с помощью всего одной строки CSS-кода. Свойство -webkit-line-clamp определяет максимальное количество строк:

p {
    -webkit-line-clamp: 5;
}

Спасибо за внимание.

Перевод статьи “5 Awesome CSS tricks every developer should know”.