Верстка \ CSS 3

Форма поиска, появляющаяся по клику

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

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

Верстка \ CSS 3

А вы знали, что тегам style и script HTML можно присвоить свойство display: block?

От автора: на днях вечером Амит Патель упомянул, что вы можете присвоить тегам HTML script свойство display: block с помощью CSS, а затем отредактировать этот код инлайном с атрибутом contentEditable. Это означает, что вы можете увидеть все обновления в браузере по мере ввода. Вскоре после этого Мариус Гундерсен ответил, что вы можете сделать это и с тегом style.

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

Верстка \ CSS 3

Как работает CSS: создание слоев с помощью z-index

От автора: сегодня будет разговор о том, как работает свойство z index CSS. Это третий пост в «Как работает CSS» — серия статей, где мы глубоко погружаемся в фундаментальные строительные блоки CSS, которые иногда похожи на черную магию. Независимо от того, как вы пишите CSS, всегда полезно знать, что «runtime» вашей таблицы стилей позволяет писать эффективный масштабируемый CSS.

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

Верстка \ CSS 3

Рисование изображений с помощью CSS-градиентов

От автора: под «изображениями CSS» я имею в виду изображения, созданные с использованием только HTML-элементов и CSS. Они выглядят так, как если бы они были SVG, нарисованные в Adobe Illustrator, но они были сделаны прямо в браузере. Некоторые из тех методов, которые я видел, используются возиться с пограничными радиусами, тенями блоков, а иногда и с clip-path. Вы можете найти множество замечательных примеров, если вы будете искать ежедневные изображения css на CodePen.

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

Верстка \ CSS 3

Руководство для начинающих по CSS Grid

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

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

Верстка \ CSS 3

CSS-трюки, которые коренным образом изменят ваши веб-макеты

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

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

Верстка \ CSS 3

Clearfix CSS: урок в развитии веб-разработки

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

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

Верстка \ CSS 3

8 способов украсить поле поиска с помощью CSS

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

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

Верстка \ CSS 3

Анимация элементов при прокрутке страницы с помощью CSS библиотеки

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

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