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

• 

  Создание трехмерной анимации с использованием только 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 Комментарий »
• 

  Поворачивающийся рекламный щит с использованием только CSS

  Сегодня мы будем создавать рекламный щит, используя исключительно CSS. Обратите внимание, этот пример тестировался только в браузере Safari на компьютере Mac и в браузере Safari для системы IOS на iPhone. Ниже вы увидите демонстративное видео, на случай, если у вас нет этих браузеров.

  Далее... Нет комментариев »
• 

  Создание логотипа IBM Lotusphere с использованием CSS3

  Некоторое время назад автор урока посетил страницу конференции IBM Lotusphere. Он сразу обратил внимание на красивый логотип. Хотя дизайн логотипа простой и минималистичный, он очень хорошо выглядит. Сегодня мы создадим этот логотип, используя только HTML и CSS. Основной секрет этого эффекта — использование свойств border-radius и overflow:hidden. Мы создали две версии. Первая версия использует дополнительные элементы HTML, [...]

  Далее... Нет комментариев »