Главная » Архив меток: CSS 3 (страница 26)

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

Методы создания газетного макета с помощью CSS-сетки и границ между элементами

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

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

Создание сложных макетов с использованием CSS Grid

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

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

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

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

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

Многостолбцовый макет и column-span в Firefox 71

От автора: Firefox 71 — увлекательный релиз для тех, кто интересуется CSS Layout. Хотя я очень рада, что в Firefox стала доступна подсетка, есть еще одно свойство, за которым я следила. В Firefox 71 реализовано column-span из многостолбцовой компоновки. В этом посте я объясню, что это такое, и немного о продвижении спецификации Multiple-column Layout. Многостолбцовый макет, обычно называемый multicol — ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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