Верстка \ Статьи по верстке

Как стать современным верстальщиком и заработать на этом

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

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

Верстка \ CSS 3

Развлекаемся с эффектами при наведении на ссылку

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

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

Верстка \ CSS 3

CSS position: sticky — создание эффектов пролистывания с использованием липкого позиционирования

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

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

Верстка \ CSS 3

Использование SVG с медиа-запросами

От автора: с помощью HTML-документов мы можем отображать, скрывать или реорганизовать части страницы в зависимости от условий окна просмотра. Если, например, окно браузера имеет ширину 480 пикселей, мы можем изменить панель навигации с горизонтальной на вертикальную. Мы можем сделать что-то подобное, используя медиа запросы CSS и документы SVG. Рассмотрим, например, логотип вымышленной компании Hexagon Web Design & Development ниже.

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

Верстка \ CSS 3

Сверхмощные компоненты сетки с помощью пользовательских свойств CSS

От автора: некоторое время назад я написала хорошо принятую статью об объединении переменных CSS с CSS-сеткой, чтобы создавать более удобные макеты. Но CSS сетка предназначена не только для страниц! Это распространенный миф. Хотя это, безусловно, очень полезно для макетов страницы, я столь же часто вижу, что сетки можно использовать, когда речь идет о компонентах. В этой статье я рассмотрю использование сетки CSS на уровне компонентов.

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

Верстка \ CSS 3

Продвинутая CSS-темизация: динамические темы с помощью переменных и JavaScript

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

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

Верстка \ CSS 3

Прогрессивное раскрытие формы с помощью CSS

От автора: как можно улучшить с помощью CSS формы? Недавно нам в SiloCreativo посчастливилось прочитать замечательную статью Феликса Ортеги о UX под названием «Прогрессивное раскрытие: Поиск простого в сложном» с отличными реальными примерами, позволяющими лучше понять эту технику прогрессивного раскрытия и как применить ее в нашей работе.

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

Верстка \ CSS 3

Продвинутые эффекты с помощью режимов наложения фона CSS

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

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

Верстка \ CSS 3

Экономящие время техники CSS для создания адаптивных изображений

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

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

Верстка \ CSS 3

Возможности свойства color-adjust CSS

От автора: Open Web продолжает проявлять себя там, где мы никогда бы не подумали: телефоны, телевизоры, часы, книги, игровые приставки, газовые насосы, лифты, автомобили — даже холодильники. Не определяя слишком много или слишком строго то, как использовать Интернет, он остается гибким и адаптируемым. Эти качества позволили ему превзойти закрытые технологии, такие как Flash и Silverlight.

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