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/cool-css-effects/ https://www.dejurka.ru/inspiration/cool-css-effects/#comments Sat, 02 Jul 2016 10:00:17 +0000 Mary - Dejurka http://www.dejurka.ru/?p=151143
В этой подборке мы собрали интересные примеры анимации, написанные при помощи кода. Современные технологии дают современным программистам практически неограниченные возможности. Сегодняшний веб пестрит всевозможными эффектами. Некоторыми из них мы спешим поделиться с вами.     Ana Tudor Louis Hoebregts Christopher Lis Brian Montana Akimitsu Hamamuro jagarikin Gabi Siyoung Park  Christopher Lis Gabi Christopher Lis Gilmore [...]]]> https://www.dejurka.ru/inspiration/cool-css-effects/feed/ 2 https://www.dejurka.ru/css/slow-animation-css-tut/ https://www.dejurka.ru/css/slow-animation-css-tut/#comments Mon, 08 Feb 2016 11:00:03 +0000 Mary - Dejurka http://www.dejurka.ru/?p=143758
Несложно сделать анимацию CSS, которая запускается при загрузки страницы. Нужно просто использовать свойство анимации с параметрами. А как быть, если анимация применяется при определенном состоянии, например, при наведении указателя мыши, при нажатии, при активации элемента или изменении класса с помощью JS?     Безыскусный подход в такой ситуации мог бы быть, например, таким: Демонстрация работы [...]]]> https://www.dejurka.ru/css/slow-animation-css-tut/feed/ 1 https://www.dejurka.ru/css/one-frame-animation-css3/ https://www.dejurka.ru/css/one-frame-animation-css3/#comments Fri, 29 Jan 2016 11:00:36 +0000 Mary - Dejurka http://www.dejurka.ru/?p=142602
Как Вы могли заметить, мы считаем важным по мере возможности уменьшать количество кода, конечно, до тех пор, пока он остается читабельным. Многие анимации CSS, с которыми мы сталкиваемся, можно записать более компактно, и в этом уроке мы расскажем, как именно это можно сделать.      Предположим, у нас есть простая анимация бьющегося сердца, например, такая: [...]]]> https://www.dejurka.ru/css/one-frame-animation-css3/feed/ 1 https://www.dejurka.ru/css/awesome-css3-animated-header/ https://www.dejurka.ru/css/awesome-css3-animated-header/#comments Sun, 06 Dec 2015 11:00:28 +0000 Mary - Dejurka http://www.dejurka.ru/?p=141099
С помощью анимаций CSS3 можно создавать ошеломительные эффекты. Из этого урока Вы узнаете, как создать интересную анимированную шапку с помощью ключевых кадров. Этот урок посвящен грядущим праздникам, и мы очень надеемся, что его выполнение поможет вам настроиться на новогоднее настроение!     Демонстрация работы А также можете скачать макет в формате .psd. Код HTML  Разметка [...]]]> https://www.dejurka.ru/css/awesome-css3-animated-header/feed/ 0 https://www.dejurka.ru/css/css-animation-part-ii/ https://www.dejurka.ru/css/css-animation-part-ii/#comments Tue, 10 Mar 2015 11:00:27 +0000 Mary - Dejurka http://www.dejurka.ru/?p=126044
Во второй части цикла уроков об анимациях CSS3 мы детально рассмотрим определение ключевых кадров и свойств элемента. В предыдущем уроке мы обсуждали ключевые кадры — место в анимации, где задано известное состояние.    Определение ключевых кадров  Давайте создадим простой набор ключевых кадров, где цвет фона изменяется от синего через красный, зеленый, фиолетовый и черный снова до [...]]]> https://www.dejurka.ru/css/css-animation-part-ii/feed/ 0 https://www.dejurka.ru/css/css-animated-loading-bars/ https://www.dejurka.ru/css/css-animated-loading-bars/#comments Mon, 23 Feb 2015 11:00:32 +0000 Mary - Dejurka http://www.dejurka.ru/?p=126032
Последнее время интернет стал сходить с ума от дизайна без использования изображений, так что мы решили создать анимированную полосу загрузки с использованием изображений SVG вместо обычных блочных элементов CSS для отображения геометрических фигур. Основная цель этого урока — создать интересные полосы загрузки с использованием CSS, после чего добавить изображение SVG как фон. И потом анимировать [...]]]> https://www.dejurka.ru/css/css-animated-loading-bars/feed/ 0 https://www.dejurka.ru/css/shredder-effect-css/ https://www.dejurka.ru/css/shredder-effect-css/#comments Mon, 23 Jun 2014 10:00:14 +0000 Mary - Dejurka http://www.dejurka.ru/?p=111296
Вы видели небольшую анимацию для приложения iPhone, в которой, когда вы нажимаете кнопку удаления, элемент, который вы удаляете, буквально измельчается шредером? Такой эффект можно создать и с помощью только CSS. Сегодня мы займемся именно этим. Мы будем использовать свойства объемного перехода, анимации и широко известное свойство clip, чтобы создать этот эффект.     Демонстрация работы – Скачать [...]]]> https://www.dejurka.ru/css/shredder-effect-css/feed/ 1 https://www.dejurka.ru/css/pageloadingeffects/ https://www.dejurka.ru/css/pageloadingeffects/#comments Sun, 08 Jun 2014 10:00:42 +0000 Mary - Dejurka http://www.dejurka.ru/?p=110332
Сегодня мы создадим набор оригинальных эффектов загрузки страницы. Основная задача – показать накрывающий слой с интересной анимацией формы, пока загружается новое содержимое.     Демонстрация работы – Скачать исходный код Если вы были на сайтах с отличных дизайном Nicolas Zezuka и Active Theory, то могли заметить интересную анимацию загрузки, которая происходит перед тем, как будет [...]]]> https://www.dejurka.ru/css/pageloadingeffects/feed/ 3 https://www.dejurka.ru/css/3d_animation_css3/ https://www.dejurka.ru/css/3d_animation_css3/#comments Sat, 24 May 2014 10:00:33 +0000 Mary - Dejurka http://www.dejurka.ru/?p=109384
Сегодня мы создадим трехмерный эффект, используя свойство CSS -webkit-perspective. Свойство perspective — это как раз то, что нужно, чтобы создать эффект трехмерности. Используя также свойства transform и transition, мы можем создать трехмерную анимацию на чистом CSS3.     Просто откройте страницу с примером, наведите указатель мыши на элементы киноафиш и удивитесь. Как вы могли догадаться, [...]]]> https://www.dejurka.ru/css/3d_animation_css3/feed/ 4 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