https://www.dejurka.ru Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов. Sat, 22 Jun 2019 07:00:59 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 https://www.dejurka.ru/inspiration/transitions-web-design/ https://www.dejurka.ru/inspiration/transitions-web-design/#comments Wed, 06 Jun 2018 07:00:43 +0000 Mary - Dejurka http://www.dejurka.ru/?p=180571
Анимация переходов - интересный способ заинтересовать посетителей. Нестандартные решения в этом случае не особенно затрагиваю юзабилити, так как основные элементы (такие как кнопка меню, значок возвращения на главную страницу и. д. ) можно оставить на привычных местах без ущерба для оригинальности.       Источник Источник Источник Источник Источник Источник Источник   Источник Источник Источник Источник [...]]]> https://www.dejurka.ru/inspiration/transitions-web-design/feed/ 0 https://www.dejurka.ru/css/css3-transnitions-tutorials-four/ https://www.dejurka.ru/css/css3-transnitions-tutorials-four/#comments Tue, 03 Feb 2015 11:00:18 +0000 Mary - Dejurka http://www.dejurka.ru/?p=124351
В последней части цикла уроков о переходах CSS мы рассмотрим несколько более продвинутых вариантов переходов. Вы уже наверняка читали публикации предыдущих трех частей и нашли много интересного. Если же вы их не видели, ищите ссылки в нижней части страницы.   Несимметричные переходы В наших предыдущих примерах мы применяли одно свойство перехода, которое использовалось и при [...]]]> https://www.dejurka.ru/css/css3-transnitions-tutorials-four/feed/ 0 https://www.dejurka.ru/css/css-transnisions-lessons/ https://www.dejurka.ru/css/css-transnisions-lessons/#comments Sat, 20 Dec 2014 11:00:51 +0000 Mary - Dejurka http://www.dejurka.ru/?p=121620
Переходы — это наиболее часто используемый тип анимации CSS3. Несмотря на широкое распространение и относительно простой синтаксис, есть несколько подводных камней и возможностей, о которых не знают даже умудренные опытом разработчики. Это первый из четырех уроков в цикле о переходах CSS3, но каждый урок можно изучать отдельно или не по порядку. Давайте начнем с основ.  [...]]]> https://www.dejurka.ru/css/css-transnisions-lessons/feed/ 0 https://www.dejurka.ru/css/css3_bar_chart_animated/ https://www.dejurka.ru/css/css3_bar_chart_animated/#comments Wed, 14 May 2014 10:00:37 +0000 Mary - Dejurka http://www.dejurka.ru/?p=109168
В этом уроке мы будем создавать  анимированную гистограмму, использующую переходы. Основная задача: создать красивую трехмерную гистограмму. Столбцы будут расположены не в один ряд, так как анимировать такую версию было бы сложно, а один над другим. Когда пользователь наводит указатель мыши на столбец, запустится анимация и столбец увеличится до нужного размера.     Мы думаем, что [...]]]> https://www.dejurka.ru/css/css3_bar_chart_animated/feed/ 1 https://www.dejurka.ru/css/backgroundcliptext/ https://www.dejurka.ru/css/backgroundcliptext/#comments Sun, 15 Dec 2013 11:00:01 +0000 Mary - Dejurka http://www.dejurka.ru/?p=99510
С помощью свойства CSS background-clip: text, которое сейчас поддерживается только браузерами Webkit, мы можем добавить фоновое изображение к текстовому элементу. Сегодня мы будем экспериментировать с ним и создадим забавные примеры с помощью CSS3 переходов.     Демо – Скачать исходный код Изображения в первом примере созданы Andreas Preis, во втором - Joanna Kustra.  Разметка Структура будет [...]]]> https://www.dejurka.ru/css/backgroundcliptext/feed/ 3 https://www.dejurka.ru/css/stylish-button-with-css/ https://www.dejurka.ru/css/stylish-button-with-css/#comments Wed, 18 Sep 2013 07:00:31 +0000 Mary - Dejurka http://www.dejurka.ru/?p=90160
Сегодня мы будем рисовать кнопку, используя исключительно CSS. В работе будут использованы градиенты, тени, границы и переходы. Кнопка основана на стандартном стиле, который встречается практически на всех сайтах. Мы выполним ее в закругленном прямоугольном стиле, похожем по форме на табличку. Тексту же на кнопке придадим небольшую тень, чтобы создать впечатление эффекта углубления.  Финальный результат: Посмотреть пример [...]]]> https://www.dejurka.ru/css/stylish-button-with-css/feed/ 4 https://www.dejurka.ru/css/gallery_with_css3_transitions/ https://www.dejurka.ru/css/gallery_with_css3_transitions/#comments Thu, 11 Jul 2013 07:02:37 +0000 marina http://www.dejurka.ru/?p=81681
В этом уроке мы будем создавать галерею, в которой с помощью CSS3- переходов реализуется эффект диагонального угасания фотографий. Мы будем сканировать на сервере папку с фотографиями  и отображать их в полный размер экрана в виде сетки. Добавить новую фотографию можно просто скопировав два файла в папку галереи (предварительно отредактировав размеры изображения и превьюшки, для которой желательный [...]]]> https://www.dejurka.ru/css/gallery_with_css3_transitions/feed/ 7