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

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

Twitter Bootstrap является невероятно популярным front-end framework-ом, который используют многие дизайнеры, разработчики и компании. Он с открытым исходным кодом, прост в использовании, адаптивный, кросс-браузерный (по утверждению разработчиков он совместим даже с IE7). Как и для всех популярных фреймворков существует множество готовых тем, но это не то, что мы будем рассматривать в данной статье. Пожалуйста, обратите внимание, что это руководство написано для Bootstrap 2.3.2 и многое из затронутого в статье может измениться в будущем.

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

В этой статье мы покажем вам как создать креативные, анимированные книги при помощи CSS 3D преобразований и переходов.

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