Верстка \ CSS 3

Сегодняшнее состояние телефонных ссылок

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

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

Верстка \ CSS 3

Знакомство с CSS Scroll Snap Points

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

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

Верстка \ CSS 3

Как расположить текст по кругу с помощью SVG

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

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

Верстка \ CSS 3

Любовь к CSS

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

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

Верстка \ CSS 3

Свойство background-clip и как его применять

От автора: свойство background-clip – одно из тех свойств, которые я уже знаю на протяжении нескольких лет, но так толком и не использовал. Может пару раз оно мне пригодилось, как часть решения, в вопросе на сайте Stack Overflow. Я его не использовал вплоть до этого года, пока не начал создавать мою огромную коллекцию слайдеров.

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

Верстка \ CSS 3

Дизайн макета страницы с товарами при помощи Flexbox

От автора: автор статьи – наш гость, Левин Мехия, дизайнер адвокат с сайта Shopify. В своей новой теме, разработанной для Shopify, они использовали технологию Flexbox. Данной и другими техниками они хотят с нами сегодня поделиться в этой статье по дизайну макета страницы. На что я ответил – да, конечно.

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

Верстка \ CSS 3

Свойство box-shadow в css: как анимировать без потери производительности

От автора: как анимировать CSS свойство box-shadow таким образом, чтобы объект на каждом кадре не отрисовывался заново, а также без потери в производительности страницы? Если коротко, то никак. Анимация свойства box-shadow сильно влияет на производительность.

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

Верстка \ CSS 3

CSS анимация: свойство transition. Слоистая анимация

От автора: CSS анимация и в частности свойство transition – отличный способ плавно передвинуть объект из точки А в точку В. Все это хорошо работает, если вы двигаете предмет по прямой. Не важно, сколько раз вы согнете кривые Безье, у вас не получится заставить двигаться объект по кривой линии при помощи свойств animation и transition. Можно ошибиться с временной функцией, что приведет к эффекту пружины, движения относительно осей Х и У всегда будут одинаковыми.

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