Верстка \ CSS 3

Полноэкранное меню на CSS с эффектом анимации

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение

Верстка \ CSS 3

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

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

Продолжить чтение