Lecaw

Учимся создавать Web-сайты

Главная - Lecaw

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

Есть что-то действительно интересное в интерфейсах, построенных на естественном языке и после посещения невероятного Escape Flight, мы решили сделать нечто подобное с формами пользовательских элементов. Идея состоит в том, чтобы превратить классическую форму в такую, которая обрабатывает естественный язык, для получения информации от пользователя. Для этого мы создадим небольшую фразу, где некоторые слова и её части – элементы выбора и ввода текста. Преобразуем элементы выбора таким образом, чтобы мы могли настроить их.

В этом уроке Вы узнаете, как создать веб-элемент, который пользуется популярностью среди сайтов электронной коммерции. Дизайн этого элемента можно найти в Bricks UI.

В этом учебном руководстве мы создадим плоское выпадающее CSS меню с поиском, для этого будем использовать Square UI.

Сегодня мы создадим меню как на сайте YouTube. Меню состоит из небольшой иконки меню, метки и списка пунктов YouTube меню, который появляется при нажатии на метку или иконке. Для того чтобы раскрыть меню, нужно щелкнуть на иконку справа, возле первого пункта раскрывающегося списка, иконка меню с меткой поднимется на уровень выше, в то время как элементы списка постепенно появятся под ней. Мы добавим еще некоторые эффекты, чтобы сделать меню ещё более интересным.

Сегодня я хочу показать Вам, как создать интересные CSS эффекты текста с помощью анимации и свойства text-shadow. Вы должно быть видели, эти жуткие последовательности текста в трейлерах фильмах, где текст исчезает на темном фоне. Увидев Introducting Briefs (который не является фильмом ужасов, а обзор интересного приложения), я решил воссоздать данный эффект текста с помощью CSS.

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

Сегодня я хотел бы поделиться с Вами коллекцией необычных CSS переходов страниц. Мы собрали несколько анимаций, которые могут быть применены к "страницам" для создания интересных эффектов навигации при переходе на новую страницу. Некоторые эффекты очень упрощенны, то есть простое перемещение, другие используют перспективу и 3D-преобразования для создания некоторой глубины и динамики.

Сегодня мы будем создавать красочное Retina-меню, с использованием цветовой гаммы от Maliwan производителя игры Borderlands. Меню автоматически меняется на одну из трех различных раскладок, в зависимости от размера окна браузера. Чтобы сделать retina-меню, мы будем использовать иконки на основе шрифтов.

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

Страница 7 из 22