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

8 простых, но полезных CSS-эффектов для вашего сайта

Искали список CSS трюков? Мы его для вас уже собрали.

Липкий футер

Футер всегда должен “прилипать” к низу страницы – это негласное правило дизайна веб-сайтов. Для начинающих верстальщиков оно может превратиться в головоломку. Как растянуть контейнер, если контента в нем мало, но при этом избежать переполнения при большом количестве текста?

До CSS3 не было простого способа решить эту проблему. Приходилось использовать разного рода трюки и почти всегда устанавливать для подвала фиксированную высоту.

Также не поможет и свойство position:sticky , хотя, казалось бы, оно специально предназначено для создания липких элементов. Но зафиксированный таким образом футер может перекрывать контент.

К счастью, сейчас решение есть – это Flexbox. Контейнер с основным контентом можно растянуть с помощью свойства flex-grow . Прямой потомок flex-контейнера со значением flex-grow , отличным от 0, будет стараться занять все свободное место. В примере использована короткая версия свойства flex: auto . Она устанавливает для flex-grow значение по умолчанию, то есть 1.

Для футера можно установить flex-shrink: 0 , чтобы предотвратить нежелательное поведение. Фактически это свойство противоположно flex-grow . Оно контролирует сжатие элементов при нехватке места в родительском контейнере. Со значением 0 футер гарантированно сохранит свой исходный размер.

Увеличение изображений CSS при наведении

Эффект увеличения при наведении – отличный способ привлечь внимание к кликабельному изображению. При этом сама картинка может немного масштабироваться, но ее размеры не должны меняться.

Для достижения подобных CSS-эффектов нужны дополнительные обертки над тегами img с установленными размерами. Им следует установить свойство overflow со значением hidden , чтобы увеличенная картинка не переполнила контейнер.

Теперь к изображению можно применять любую трансформацию.

Мгновенный ночной режим

Если вы хотите быстро добавить вашему веб-сайту популярный “ночной режим”, обратите внимание на CSS фильтры invert и hue-rotate.

  • filter: invert() – инвертирует исходный цвет на указанное количество процентов. Если передать в функцию фильтра 1 (или 100%) белый цвет превратится в черный, а изображение – в свой негатив.
  • filter: hue-rotate() – определяет угол поворота на цветовом круге, на который смещаются все цвета исходной картинки. Соответственно значение параметра должно быть от 0deg до 360deg .

Просто добавьте эти свойства тегу body . Вы увидите, как может выглядеть ваш сайт в ночном режиме.

Обратите внимание: чтобы фон изменил цвет на темный, его нужно предварительно сделать белым.

Вот так выглядит главная страница Google с такими настройками:

8 простых, но полезных CSS-эффектов для вашего сайта

Буллиты для списков

Чтобы создать кастомные буллиты для неупорядоченных списков, используйте псевдоэлемент :before и его свойство content .

Чтобы изменять вид буллита в примере, применяются классы .complete и .incomplete .

Бонус

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

Параллакс

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

Простую версию подобного эффекта легко сделать на одном лишь CSS, используя свойство background-attachment: fixed , противоположное background-attachment: scroll .

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

Анимация кадрирования фото

До CSS3 обрезать изображения было очень непросто, если помните. Но теперь у нас есть два отличных свойства: object-fit и object-position . С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

Конечно, всегда можно обрезать изображение в редакторе, но благодаря CSS инструментам мы можем все это дело анимировать.

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

Режимы смешивания

Если вы работали с Photoshop, то знаете, насколько мощным инструментом могут быть режимы смешивания цветов. Оказывается, большинство из них могут быть использованы и для создания различных CSS-эффектов.

Вот так будет выглядеть главная страница Medium, если изображениям на ней добавить фон lightblue и применить режим смешивания background-blend-mode: difference :

8 простых, но полезных CSS-эффектов для вашего сайта

Это свойство смешивает цвета фонов, то есть для получения эффекта нужно добавить контейнеру несколько фоновых изображений и/или фоновый цвет.

Но работать можно не только с фонами. Свойство mix-blend-mode позволяет смешивать с нижними слоями цвета самого элемента.

Например, можно получить вот такой классный эффект, просто добавив тексту цвет lightsalmon и режим смешивания mix-blend-mode: color-dodge .

8 простых, но полезных CSS-эффектов для вашего сайта

Обратите внимание: в Chrome 58+ есть ошибка, из-за которой свойство mix-blend-mode не работает на тегах body или html , если они имеют прозрачный фон.

Галерея картинок в стиле Pinterest

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

Как создать разметку, в которой позиция элемента по вертикали зависит от высоты элемента, расположенного над ним, как на Pinterest?

8 простых, но полезных CSS-эффектов для вашего сайта

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

Просто оберните все изображения в общий контейнер и добавьте ему свойства column-width и column-gap .

Чтобы один элемент не разрывался между двумя колонками, добавьте самим изображениям свойство column-break-inside: avoid .

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

Еще больше CSS-эффектов

Мы разобрали решение нескольких простых задач создания веб-сайтов, однако их осталось еще очень много, например:

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Как исследовать и визуализировать данные МО для обнаружения объектов на изображениях