Верстка \ CSS 3

Знакомство со свойством text-align-last

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

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

Верстка \ CSS 3

Анимированная бегущая строка текста в 3D на чистом CSS

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

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

Верстка \ CSS 3

AOS: CSS библиотека анимации прокрутки страницы

От автора: статья написана нашим сегодняшним гостем Michał Sajnóg, front-end разработчиком с сайта Netguru. Michał создал библиотеку анимации во время прокрутки страницы. Больше всего в этой библиотеке мне нравится то, что она максимально перекладывает создание анимации и контроль над ней на CSS. Что говорить, эту библиотеку использует множество крупных торговых площадок. Michał покажет, как надо работать с данной библиотекой.

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

Верстка \ CSS 3

Как повысить UX валидаторов форм в HTML и CSS

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

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

Верстка \ CSS 3

Как создать макет новостного сайта на Flexbox

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

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

Верстка \ CSS 3

Принцип работы свойства z-index и автоматического margin в Flexbox

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

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

Верстка \ CSS 3

Знакомство с CSS свойством clip-path

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

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

Верстка \ CSS 3

Совет: Трансформация отдельных символов с помощью CSS и JS

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

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

Верстка \ CSS 3

Введение в основы современных CSS кнопок

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

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

Верстка \ CSS 3

Дискретизация по времени: CSS функция steps()

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

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