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

• 

  Создание css-сетки миниатюр с динамическим всплывающим меню

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

  Далее... 1 Комментарий »
• 

  Адаптивная сетка изображений с предварительным просмотром

  Если вы в последнее время искали изображение в Google, возможно, заметили интересную технику предварительного просмотра изображений при нажатии на превьюшку. Это очень хороший эффект и он значительно упрощает поиск. Сегодня хотим показать вам, как сделать такой эффект. Идея будет заключаться в том, чтобы при нажатии на маленькое изображение, открывалось большое с некоторыми другими элементами, такими как заголовок, [...]

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

  Создаем шаблоны с эффектом 3d-навигации

  В сегодняшней статье будет рассмотрено два шаблона — адаптивный шаблон с 3d-панелью и 3d-галерея изображений. Они являются экспериментальными и будут отображаться правильно только в последних версиях браузеров. Но в целом результат достаточно впечатляющий. В первом примере будет происходить анимация слайдов, которые могут включать до четырех панелей и соответственно анимация разделяющей линии. Во втором — создан эффект реальной [...]

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

  Цветовая палитра с помощью CSS3 & jQuery

  В этом уроке мы будем создавать цветовую палитру с помощью CSS преобразований и переходов — простой плагин jQuery. Идея состоит в том, что при нажатии на один из образцов мы будем вращать остальные  с целью выявления выбранного.

  Далее... 1 Комментарий »
• 

  Создание меню на CSS

  В этом уроке мы будем создавать два типа меню: вертикальные кроссбраузерное  CSS3-меню с 3D-анимацией (используя CSS3-переходы и свойства трансформации), а также  меню с LavaLamp-эффектом. 

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

  Создаем чистое портфолио (часть2: верстка)

  Не так давно мы публиковали урок по созданию дизайна чистого портфолио в Фотошопе. Сегодня мы сделаем наше портфолио функциональным и заставим его отображаться в браузере.  В этом уроке мы покажем, как сверстать сайт при помощи html5 и css3 и сделать слайдер при помощи jQuery.

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

  Интересный эффект для изображений при помощи css3

  Надеемся, вы знакомы с такими псевдоэлементами как :before и :after, которые помогают создавать очень интересные эффекты в css3. В сегодняшнем нашем уроке мы будем делать эффект для изображения, которое будет выглядеть так, как будто оно находится на одном из вырванных листов блокнота.

  Далее... 1 Комментарий »
• 

  Создаем анимированную строку

  Тег <marquee> создает на экране перемещающийся объект по принципу бегущей строки. Изначально тег был создан для Internet Explorer. Сегодня мы вспомним этот (вероятно, забытый многими) тег и научимся с его помощью создавать анимированную строку на чистом css3.

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

  Создаём забавное меню на чистом CSS

  Библиотека JQuery стала простым и лучшим способом для реализации простой анимации. JavaScript  — это конечно хорошо, но CSS3 предлагает заглянуть в будущее, где основная анимация выполняется при помощи  CSS и совершенно не зависит от сценария. Сегодня мы рассмотрим, как использовать CSS3 для создания веселого и необычного навигационного меню и подключить нестандартный шрифт.

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