Блог web-разработчика

Те из нас, кто начал использовать модульный или объектно-ориентированный CSS принцип научились избегать, насколько это возможно, использования селекторов потомков (или, точнее, комбинацию с селекторами потомков).

Недавно в Twitter состоялся диалог, в процессе которого я осознал, что многие вещи в SASS для многих новичков (да и не только) могут быть непонятными. В этой статье рассмотрим простые и наиболее важные правила использования переменных, @extend и @mixin в SASS.

Я смотрел на прекрасный дизайн сайта polygon.com и применение на нём свойств background-clip и background: linear-gradient(…). На сайте применяется резервный JS для обеспечения поддержки не стандартного background-clip: text.

Одним из последних проектов 2012 года разработчиков сайта Parse Blog стал редизайн страницы Аbout. Главной целью являлось создание красивой, содержательной и приятной страницы. В процессе создания этой страницы применялись новейшие свойства CSS3. Чтобы код стал более читаемым внесены SASS/Compass. Давайте подробнее рассмотрим реализацию анимации на этой странице.

Создадим часы, используя библиотеку jquery и css3 свойство transform: rotate. Transform также может принимать значения scale, skew и translate. Все эти значения могут анимироваться с помощью transition, аналогично скриптам jQuery. В данной статье мы подробно рассмотрим, как создать часы используя transform.

С новым годом приходит и надежда на всё большую поддержку новыx web-стандартов браузерами. Только в ноябре прошлого года была опубликована новая спецификация: The CSS Mask Specification (CSS маски). Браузеры на движках webkit уже давно поддерживали технологию css масок, сейчас же данная спецификация означает, что механизм масок будет реализован во всех браузерах.