урок верстка - Страница 38

Записи, помеченные ‘урок верстка’

Создаем окно чата с текстовыми облачками в CSS3

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

Не смотря на то, что не совсем понятно, для чего в CSS3 была добавлена анимация, у этого развивающегося стандарта есть несколько очень приятных элементов, которые были добавлены в CSS и которыми мы сегодня воспользуемся. Мы создадим интересное меню в виде вкладок с использованием CSS3.
Далее... 3 Комментариев »
Создание трехмерной анимации с использованием только CSS3

Сегодня мы создадим трехмерный эффект, используя свойство CSS -webkit-perspective. Свойство perspective — это как раз то, что нужно, чтобы создать эффект трехмерности. Используя также свойства transform и transition, мы можем создать трехмерную анимацию на чистом CSS3.
Далее... 4 Комментариев »
Создание выпадающего меню с окном поиска при помощи CSS3 и HTML

В этом уроке мы создадим выпадающее меню в плоском стиле с окном поиска из Square UI. Меню состоит из ненумерованного списка класса .nav, содержащего разные типы элементов.
Далее... 2 Комментариев »
Создание анимированной гистограммы с использованием CSS3

В этом уроке мы будем создавать анимированную гистограмму, использующую переходы. Основная задача: создать красивую трехмерную гистограмму. Столбцы будут расположены не в один ряд, так как анимировать такую версию было бы сложно, а один над другим. Когда пользователь наводит указатель мыши на столбец, запустится анимация и столбец увеличится до нужного размера.
Далее... 1 Комментарий »
Создание адаптивного меню с использованием CSS

В этом уроке мы расскажем о способе создания адаптивного меню. Это меню использует чистую разметку HTML5 и может быть выровнено по левой стороне, центру или правой стороне. Меню раскрывается, когда пользователь наводит указатель мыши, а также обладает индикатором, показывающим активный/текущий элемент меню. Это меню работает во всех браузерах на мобильных устройствах и настольных компьютерах, включая браузер [...]
Далее... 3 Комментариев »
Создание 8 эффектных стилей оформления списков

Cписки HTML (<ol> для нумерованных, <ul> для ненумерованных списков) используются очень часто. В этом уроке мы пойдем дальше создания обычных списков, и покажем вам 8 разных эффектных способов оформления списков HTML, используя CSS. Мы будем использовать чистый CSS, чтобы скучный список выглядел здорово и даже приобрел дополнительную функциональность.
Далее... 14 Комментариев »
Создание отличного способа отображения значков социальных сетей

Некоторое время назад внимание автора урока привлек интересный способ представления значков социальных сетей. Когда вы наводите указатель мыши на значок, появляется маленькая всплывающая подсказка с названием социальной сети, а все другие значки становятся полупрозрачными. Автору захотелось развить этот подход с применением CSS3 переходов. Основные задачи: плавное изменение уровня прозрачности, и небольшая анимация положения всплывающей подсказки.
Далее... 2 Комментариев »
Создание целевой страницы для веб-сайта StartupGiraffe

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