Верстка \ CSS 3

Основы CSS: стилизация ссылок

От автора: интернет был основан на ссылках. Именно идея того, что мы можем кликать/нажимать на ссылки и переходить с одной веб-страницы на другую сделала фразу «серфить интернет» бытовой. Стилизация ссылок CSS помогает сделать их какими угодно. Хотя в HTML они отличаются от обычного текста даже без CSS.

Читать далее

Верстка \ CSS 3

Основы CSS: как сделать белый цвет шрифта видимым во время загрузки фонового изображения

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

Читать далее

Верстка \ CSS 3

Анимированный заголовок в виде изображения

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

Читать далее

Верстка \ CSS 3

PostCSS в CSS — вне Autoprefixer

От автора: могу поспорить, что когда вы думаете о PostCSS CSS, вам приходит на ум что-то типа…
Дни с момента выхода последнего JavaScript фреймворка. Регулярные обновления по поводу того, сколько дней прошло с момента выхода JavaScript фреймворка или библиотеки dayssincelastjavascriptframework.com. Но правда в том, что PostCSS существует практически так же долго, как и React!

Читать далее

Верстка \ CSS 3

В защиту методологии Utility-First CSS

От автора: композиция, а не наследование. Этот кусочек мудрости от Design Patterns, одной из самых влиятельных книг по разработке программного обеспечения, является основой utility-first. Он также разделяет многие принципы с функциональным программированием: неизменность, композитивность, предсказуемость и предотвращение побочных эффектов. Цель всех этих причудливых терминов — написать код, который легче поддерживать и масштабировать.

Читать далее

Верстка \ CSS 3

Как воссоздать макет статьи с Medium с помощью CSS Grid

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

Читать далее

Верстка \ CSS 3

CSS Scroll Snap: Что это? Нужен ли он нам?

От автора: веб-разработчикам сложно гарантировать хороший UX при прокручивании страницы, но, к счастью, CSS модуль «Scroll Snap» должен помочь в этом. Модуль принудительно устанавливает конечную позицию скрола после выполнения прокрутки. Помимо всего прочего, в модуле есть функции управления, такие как панорамирование в сочетании с «привязками». Модуль CSS Scroll Snap обеспечивает выравнивание контента внутри контейнера со скролом. Недавно W3C выпустили Scroll Snap как Candidate Recommendation с хорошо продуманными реализациями и примерами, а также с обновленным синтаксисом. Давайте разбираться.

Читать далее