От автора: концепция CSS анимации довольно проста. Задается название анимации, затем в @keyframes определяется список движений и в конце анимация крепится к какому-либо элементу. Если вы до сих пор не работали с данной технологией, можете ознакомиться прямо на нашем сайте в разделе Альманах.
От автора: CSS разработка, как и другие языки, это интерактивный процесс. С каждым обновлением добавляются новые свойства и синтаксис, помогающие нам в написании стилей. В документации CSS Level 3 были представлены свойства, с помощью которых можно создавать интерактивные элементы дизайна, что раньше было возможно только с JavaScript. Каждый день появляются все новые инструменты, упрощающие процесс написания стилей и делающие его более гибким.
От автора: За последние несколько лет нам часто приходилось слышать об аппаратном ускорении и о том, как с его помощью можно улучшить анимацию на веб-страницах. С помощью ускорения анимация становится плавной даже в мобильных браузерах. Но я думаю, что есть много неопытных разработчиков, не понимающих принцип работы аппаратного ускорения, а также, как мы можем его использовать, чтобы наша анимация засияла.
От автора: статья от нашего гостя Pankaj Parashar. Pankaj эксперт в области всего, что связано с <progress> и <meter>. Данная статья будет тоже на эту тематику. В этой статье он расскажет нам, как создать лучший с семантической точки зрения измеритель стойкости пароля.
От автора: в этом уроке мы рассмотрим, как анимировать иконку svg иконку меню при помощи Dribbble шота от Tamas Kojo, в котором используются SVG и Segment – JavaScript библиотека для рисования и анимирования элемента SVG path.
От автора: простое многоуровневое меню с легкой анимацией при переходе между пунктами и «хлебными крошками» с кнопкой возврата назад.
От автора: в этой статье по созданию индикатора для меню на чистом CSS я расскажу про необычные способы применения смежных селекторов и псевдо-классов. Вы можете подумать, что тут не обошлось без JavaScript. На самом деле тут нет никакого JS, а просто по-умному использованы возможности CSS. С другой стороны, проще было бы сделать это с помощью JS.
От автора: а вы знали, что свойство content у псевдоклассов можно анимировать? По данным списка анимируемых свойств из спецификации мы не можем его анимировать, однако в последней версии Chrome такая возможность появилась. В демо ниже показана анимация, буква «А» превращается в «В», изменяя значение свойства content в @keyframes анимации.
От автора: в данной статье мы поговорим о трансформациях и масках css. Во время визуального просмотра страницы наклонные края элементов могут произвести впечатление. Хоть такой подход не распространен, но мы решили на использовать его на сайте The National Trust for Historic Preservation. К различным элементам мы применили различные наклонные края: где-то нижние края широкоформатных изображений, где-то нижние или верхние края блоков с текстом со сплошным фоном.
От автора: загрузка файлов на веб-страницах обрабатывается в поле input типа file. До недавнего времени у данного метода была одна серьезная проблема – загрузка не работала на мобильных устройствах.