15 приемов в CSS, которые ты должен знать
CSS - это каскадные таблицы стилей, которые используются для описания того, как должны отображаться элементы HTML. Это одна из первых технологий, которую изучают будущие front-end и веб-разработчики, и это обязательный базовый навык.
Хотя кажется, что CSS не может сделать многого, кроме того, что придать нашему HTML цвета, позиции и т.д., но он также может позволить нам создавать анимацию и оживлять наши приложения и веб-сайты. Наверное, сейчас многие из нас заботятся о том, чтобы освоить CSS и изучить его так глубоко, но стоит знать некоторые полезные советы и приемы, которые могут помочь тебе создавать потрясающие сайты!
Готов ли ты ознакомиться с советами и рекомендациями, которые могут изменить твое использование CSS с этого момента?
Давай начнем!
Я оставлю ссылки под скриншотами на Codepen, чтобы ты, сам мог экспериментировать с кодом.
1) Вертикальное выравнивание с помощью flex
С тех пор как появилась Flexible Box Layout Model, она стала очень популярной, поскольку упрощает позиционирование и выравнивание элементов. Использование flex (подсвойство Flexible Box Layout Model) сделало вертикальное выравнивание быстрым, красивым и простым, прежде чем нам приходилось делать это немного по другому во многих случаях. Давай рассмотрим пример кода для вертикального позиционирования с помощью flex, потому что он позволяет многое сделать с выравниванием.
Как видно из приведенного выше кода, мы использовали display: flex и align-items: center,justify-content: center, чтобы убедиться, что наш дочерний элемент будет находиться точно по центру родительского элемента.
2) Режимы наложения
Прямо сейчас мы можем делать много интересных вещей в CSS, и один из них - режим наложения. Есть два свойства для режимов наложения: mix-blend-mode, который определяет смешивание между элементом и элементом за ним, и background-blend-mode, который определяет смешивание между фоновым изображением и цветом фона элемента. Давай посмотрим, как это работает:
В приведенном выше коде мы устанавливаем изображение и заголовок с текстом. Текст - это элемент, который смешивается с изображением. Мы использовали значение overlay, но есть еще 15 значений, которые можно использовать. Теперь давай проверим пример кода background-blend-mode:
В данном случае мы видим, как фоновое изображение смешивается с цветом. Первое изображение - до смешивания, второе - после смешивания.
3. Прокрутка с параллаксом.
Параллакс - очень распространенная технология в современном веб-дизайне. Речь идет о прокрутке фонового содержимого с другой скоростью, чем переднего плана, когда мы прокручиваем страницу. Давай посмотрим, как это можно сделать с помощью CSS:
В этом примере ты можешь увидеть, как по-разному перемещаются наш текст и фоновое изображение. Мы использовали transformZ, чтобы закрепить один элемент и замедлить другой.
4. Форма снаружи
Есть еще одна замечательная функция, которая появилась в CSS, но она не очень распространена. Это свойство внешнего вида. Он решает, как контент будет обтекать плавающий элемент. Давай посмотрим, как это работает:
В примере кода видно, что текст выходит за пределы круга. Мы установили значение shape-outside в круг 50%, но также можно установить изображение, треугольник, квадрат и т.д.
5. Обрезать строку
Я ненавижу, когда мой текст не помещается внутри div, и он эстетично выходит наружу. В Javascript есть несколько способов справиться с этим, но знаешь ли ты, что можно обрезать текст и в CSS? Давай проверим это:
Выше ты можешь увидеть, как CSS может вырезать текст и завершить его с помощью…. Я использовал overflow: hidden, white-space: nowrap и наконец, чтобы получить три точки, я использовал text-overflow: ellipsis.
6. Clip path
Иногда дизайнер подходит к делу немного более творчески и тебе приходится поместить изображение в определенную форму, например, в треугольник или другую. Для этого можно использовать свойство clip-path! Давай вкратце рассмотрим, как это работает:
В приведенном выше примере я создал круг, эклипс и обычную многоугольную форму.
7. Full height и full width
Если мы хотим настроить наше приложение или веб-сайт под область просмотра, единицы vh и vw сделают это намного проще. vh означает, что это 100% высоты области просмотра, а vw означает 100% ширины области просмотра. Давай проверим, как это работает на реальном примере:
В примере выше я установил для элемента blue-box значения 50vw и 50vh, что означает, что он должен занимать 50% ширины области просмотра и 50% высоты области просмотра и если ты изменишь размер области просмотра, ты можешь заметить, как он подстраивается.
8. Фильтры изображений
Работа с изображениями может принести множество удивительных эффектов для макета и помочь создать потрясающие результаты. CSS позволяет использовать множество фильтров на изображениях, чтобы помочь разработчикам играть с графикой, не изменяя ее в Photoshop. Давай посмотрим на фильтры, которые мы можем использовать:
В приведенном выше примере ты можешь увидеть семь разных фильтров, используемых в одном и том же изображении.
9. CSS-анимация
Анимация может привлечь внимание пользователя на сайте, поэтому она часто используется в веб-дизайне. Создание ее в CSS значительно упрощает работу, давай рассмотрим пример анимации в CSS:
В приведенном выше коде создана маленькая точка, которая меняет положение и непрозрачность каждые 25%, пока не достигнет 100%, а затем начинает снова. Также можно изменять цвета и другие свойства элементов.
10. Вращение элементов
Другой тип анимации, который можно сделать в CSS - это вращение, оно немного более динамично и отлично подходит для того, чтобы добавить немного жизни элементу загрузчика, логотипу или изображению в галерее. Давай проверим, что можно сделать с помощью вращения:
В примере мы видим, как звезда вращается четыре раза в течение одного цикла анимации.
11. Маска
Если ты когда-либо занимался графическим дизайном, ты наверняка знаешь, насколько полезны маски. Также можно использовать маски изображений в CSS. Попробуем сделать маску для изображения:
В приведенном выше примере я создал маску градиента круга, но ты также можешь использовать графику SVG в качестве маски, добавив URL-адрес в файл.
12. Увеличение при наведении
Когда ты создаешь галерею изображений, ты очень часто хочешь как-то отмечать зависшее изображение. Отличная идея - добавить увеличение при наведении курсора, чтобы выделить фотографию при наведении курсора. Давай посмотрим, как это работает:
Когда мы создаем галерею изображений, мы очень часто хотим как-то отметить наведенное изображение. Отличная идея - добавить увеличение при наведении, чтобы подчеркнуть наведенную фотографию. Посмотрим, как это работает:
В приведенном выше примере я создал небольшую галерею изображений и добавил свойство scale при наведении курсора, чтобы увеличивать изображение при наведении курсора по сравнению с другими.
13. Матовое стекло CSS
Матовое стекло - одна из самых популярных стилей в мире CSS и пользовательского интерфейса сайтов в последнее время, но как его создать?
Это просто, и я покажу тебе, как это сделать! Давай посмотрим на пример и сделаем с тобой матовое стекло.
14. Карусель с помощью CSS
Помнишь времена, когда для создания карусели требовались такие навыки, как jQuery или JS и много работы? Я помню, но знаешь ли ты, что теперь ты можешь построить карусель только с помощью CSS?
Я покажу тебе, как это легко сделать.
15. Как использовать переменные CSS
Тебе больше не нужно sass или less для указания переменных!
Теперь ты можешь использовать эту мощную функцию в чистом CSS, указать, например, цвет и использовать его во многих местах, не копируя его шестнадцатеричный код.
Заключение
Мы хотим создавать потрясающие веб-сайты и приложения, но иногда нам кажется, что создание анимации или маски на изображении требует много сил и времени. Как я показал тебе в этой статье, иногда это гораздо удобнее, чем изменять изображение в графической программе. Я надеюсь, что ты найдешь эти советы и рекомендации полезными для твоего будущего программирования. Если ты знаешь какие-нибудь интересные трюки в CSS, поделись ими в комментариях. Удачного кодирования!
Источник: https://dev.to/duomly/15-amazing-css-tips-and-tricks-you-should-know-2789