Lecaw

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

CSS

Большинство статей в этой категории основаны на CSS3. CSS3 - следующий шаг в развитии каскадных таблиц стилей. Он много нам обещает и, судя по всему, действительно будет прорывом для веб-дизайна. Если, конечно, опять не подкачают разработчики браузеров.

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

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

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

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

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

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

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