Верстка \ HTML&CSS

Многоступенчатая анимация и плавные переходы

От автора: концепция CSS анимации довольно проста. Задается название анимации, затем в @keyframes определяется список движений и в конце анимация крепится к какому-либо элементу. Если вы до сих пор не работали с данной технологией, можете ознакомиться прямо на нашем сайте в разделе Альманах.

Читать далее

Верстка \ HTML&CSS

Введение в PostCSS

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

Читать далее

Верстка \ HTML&CSS

Аппаратное ускорение в CSS анимации

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

Читать далее

Верстка \ HTML&CSS

Стойкость пароля

От автора: статья от нашего гостя Pankaj Parashar. Pankaj эксперт в области всего, что связано с <progress> и <meter>. Данная статья будет тоже на эту тематику. В этой статье он расскажет нам, как создать лучший с семантической точки зрения измеритель стойкости пароля.

Читать далее

Верстка \ HTML&CSS

Как анимировать SVG иконки с помощью библиотеки segment?

От автора: в этом уроке мы рассмотрим, как анимировать иконку svg иконку меню при помощи Dribbble шота от Tamas Kojo, в котором используются SVG и Segment – JavaScript библиотека для рисования и анимирования элемента SVG path.

Читать далее

Верстка \ HTML&CSS

Анимированный индикатор активного пункта меню на CSS

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

Читать далее

Верстка \ HTML&CSS

Анимация свойства content

От автора: а вы знали, что свойство content у псевдоклассов можно анимировать? По данным списка анимируемых свойств из спецификации мы не можем его анимировать, однако в последней версии Chrome такая возможность появилась. В демо ниже показана анимация, буква «А» превращается в «В», изменяя значение свойства content в @keyframes анимации.

Читать далее

Верстка \ CSS 3

Трансформация и маски CSS: наклонные края

От автора: в данной статье мы поговорим о трансформациях и масках css. Во время визуального просмотра страницы наклонные края элементов могут произвести впечатление. Хоть такой подход не распространен, но мы решили на использовать его на сайте The National Trust for Historic Preservation. К различным элементам мы применили различные наклонные края: где-то нижние края широкоформатных изображений, где-то нижние или верхние края блоков с текстом со сплошным фоном.

Читать далее