Главная » Архив меток: CSS 3

Архив меток: CSS 3

Свойство clip-path и интересный эффект для сайта

От автора: в предлагаемом уроке будет показан интересный эффект, который может подойти для шапки сайта или какой-то из его секций. Суть эффекта заключается в размещении нескольких изображений в секции и показе только части каждого из изображений. Другая часть при этом скрывается при помощи свойства clip-path. При наведении мыши на часть изображения – будет показана полная картинка.

Читать далее »

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности между двумя сторонами, при этом ...

Читать далее »

Необычные случаи использования псевдо-элементов

От автора: псевдо-элементы используются уже в течение длительного времени. Тем не менее, есть некоторые случаи использования, которые, как мне кажется, не полностью известны разработчикам. Я написал эту статью, чтобы пролить свет на них, и чтобы их можно было использовать больше. Эффект «наведение родитель-потомок» Поскольку псевдо-элемент принадлежит своему родительскому элементу, для этого есть несколько необычных вариантов использования. А пока давайте рассмотрим ...

Читать далее »

8 CSS-фильтров изображений с примерами кода

От автора: используя изображения, мы можем создать атмосферу, вызвать счастье, улыбку, грусть или любую другую эмоцию. С помощью изображений мы можем многое показать, а также многое рассказать; именно поэтому изображения так широко используются на сайтах и в приложениях. Дизайнеры заботятся о том, как пользователи будут воспринимать сайт и какие эмоции он будет вызывать. Графические дизайнеры могут использовать передовое программное обеспечение ...

Читать далее »

Фокус на front-end: темный режим

От автора: когда мы переходим в 2020 год, у Front-end разработчиков появилась еще одна отличная возможность в наборе функций веб-приложений, с которым нам приходится сталкиваться.   Адаптивность для мобильных устройств, планшетов и настольных ПК Поддержка различными браузерами (устаревшими и другими) Проблемы доступности Прогрессивные веб-приложения SEO Оптимизация производительности т. д. и т. п. Теперь у нас есть Dark Mode (темный режим). ...

Читать далее »

Тренды CSS 2019: Полное руководство

От автора: постоянное обновление в соответствии с последними тенденциями является обязательным условием для успеха сайта, и поэтому важно определять, что помогает или мешает развитию вашего сайта. Создание идеального веб-сайта полностью зависит от навыков проектирования, потому что веб-сайт — это искусство, сочетающее в себе технические аспекты. Поэтому уникальные макеты, сложные анимации и другие микро-взаимодействия, могут изменить внешний вид вашего веб-сайта. Удивительный ...

Читать далее »

Используйте CSS Grid в производстве — сегодня

От автора: каждый хочет использовать CSS Grid. Речь идет о новом методе верстки, который существенно изменит способ разработки контента в Вебе. С помощью CSS Grid у вас есть возможность размещать контент на веб-сайте в беспрецедентной форме и динамически сортировать его по областям просмотра. Этот метод появился, поскольку многие авторы веб-сайтов имели слишком ограниченные возможности работы с сеткой. Что касается разнообразия ...

Читать далее »

Синтаксис свойства CSS Display с двумя значениями

От автора: если вам нравится читать примечания к релизам, то вы, возможно, заметили в примечаниях Firefox 70 строку, относящуюся к реализации синтаксиса с двумя значениями для свойства CSS display. Или, может быть, вы встретили упоминание о нем во вчерашнем обзоре Firefox 70. Сегодня я объясню, что это значит, и почему понимание этого синтаксиса важно, несмотря на то, что сейчас он ...

Читать далее »

7 единиц измерения CSS, о которых вы могли не знать

От автора: сегодня я собираюсь познакомить вас с некоторыми инструментами CSS, о которых вы, возможно, не знали раньше. Эти инструменты представляют собой единицы измерения, например, пиксели или em, но вполне возможно, что о некоторых вы никогда не слышали! Давайте начнем. Работая с методами CSS, которые мы хорошо знаем, можно застрять, когда появляются новые проблемы. Поскольку Веб продолжает развиваться, спрос на ...

Читать далее »

Как создать всплывающее окно обратной связи на чистом CSS

От автора: в этом супер-коротком руководстве мы рассмотрим процесс создания всплывающего окна обратной связи. Мы не будем использовать JavaScript, на самом деле мы создадим форму, воспользовавшись «техникой хака чек-боксов CSS». Звучит интересно? Вот что мы будем создавать: 1. Начинаем с разметки страницы Мы начнем с чек-бокса вместе с его меткой и формой. В форме мы поместим некоторые общие элементы ввода. ...

Читать далее »