Записи, помеченные ‘css3 переходы’

• 

  15 примеров интересных переходов на сайтах (gif)

  Анимация переходов — интересный способ заинтересовать посетителей. Нестандартные решения в этом случае не особенно затрагиваю юзабилити, так как основные элементы (такие как кнопка меню, значок возвращения на главную страницу и. д. ) можно оставить на привычных местах без ущерба для оригинальности.  

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

  Цикл уроков о переходах CSS3, часть 4: Продвинутые способы переходов

  В последней части цикла уроков о переходах CSS мы рассмотрим несколько более продвинутых вариантов переходов. Вы уже наверняка читали публикации предыдущих трех частей и нашли много интересного. Если же вы их не видели, ищите ссылки в нижней части страницы.

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

  Цикл уроков о переходах CSS3, часть 1: Основы. Что такое переходы?

  Переходы — это наиболее часто используемый тип анимации CSS3. Несмотря на широкое распространение и относительно простой синтаксис, есть несколько подводных камней и возможностей, о которых не знают даже умудренные опытом разработчики. Это первый из четырех уроков в цикле о переходах CSS3, но каждый урок можно изучать отдельно или не по порядку. Давайте начнем с основ. 

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

  Создание анимированной гистограммы с использованием CSS3

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

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

  Эксперименты со свойством CSS3 background-clip: text

  С помощью свойства CSS background-clip: text, которое сейчас поддерживается только браузерами Webkit, мы можем добавить фоновое изображение к текстовому элементу. Сегодня мы будем экспериментировать с ним и создадим забавные примеры с помощью CSS3 переходов.

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

  Создаем стильную кнопку, используя только CSS3

  Сегодня мы будем рисовать кнопку, используя исключительно CSS. В работе будут использованы градиенты, тени, границы и переходы. Кнопка основана на стандартном стиле, который встречается практически на всех сайтах. Мы выполним ее в закругленном прямоугольном стиле, похожем по форме на табличку. Тексту же на кнопке придадим небольшую тень, чтобы создать впечатление эффекта углубления.

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

  Галерея с css3-переходами

  В этом уроке мы будем создавать галерею, в которой с помощью CSS3- переходов реализуется эффект диагонального угасания фотографий. Мы будем сканировать на сервере папку с фотографиями  и отображать их в полный размер экрана в виде сетки. Добавить новую фотографию можно просто скопировав два файла в папку галереи (предварительно отредактировав размеры изображения и превьюшки, для которой желательный [...]

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