Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

  • Постоянная ссылка на 15 примеров интересных переходов на сайтах (gif)

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Цикл уроков о переходах CSS3, часть 4: Продвинутые способы переходов

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

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

    Далее... Нет комментариев »
  • Постоянная ссылка на Цикл уроков о переходах CSS3, часть 1: Основы. Что такое переходы?

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

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

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание анимированной гистограммы с использованием CSS3

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Эксперименты со свойством CSS3 background-clip: text

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

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

    Далее... 3 Комментариев »
  • Постоянная ссылка на Создаем стильную кнопку, используя только CSS3

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

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

    Далее... 4 Комментариев »
  • Постоянная ссылка на Галерея с css3-переходами

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

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

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