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

• 

  Создание эффектов загрузки страницы

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

  Далее... 3 Комментариев »
• 

  Создаем окно чата с текстовыми облачками в 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 Комментариев »