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/css/css_thumbnail_grid_with_dynamic_flyout_menu/ https://www.dejurka.ru/css/css_thumbnail_grid_with_dynamic_flyout_menu/#comments Thu, 11 Apr 2013 07:00:54 +0000 marina http://www.dejurka.ru/?p=77055
При размещении данных в сетке мы часто теряем возможность размещения дополнительной информации. Поэтому в этом уроке мы будем добавлять всплывающие меню при наведении на изображение. Оно может включать имя изображения, оригинальную ссылку на источник, либо информацию о авторе. Кроме того, в уроке рассказано, как создавать динамический эффект, использую только свойства CSS3. В основном все современные браузеры [...]]]> https://www.dejurka.ru/css/css_thumbnail_grid_with_dynamic_flyout_menu/feed/ 1 https://www.dejurka.ru/css/thumbnail_grid_with_expanding_preview/ https://www.dejurka.ru/css/thumbnail_grid_with_expanding_preview/#comments Thu, 28 Mar 2013 08:00:38 +0000 marina http://www.dejurka.ru/?p=76283
Если вы в последнее время искали изображение в Google, возможно, заметили интересную технику предварительного просмотра изображений при нажатии на превьюшку. Это очень хороший эффект и он значительно упрощает поиск. Сегодня хотим показать вам, как сделать такой эффект. Идея будет заключаться в том, чтобы при нажатии на маленькое изображение, открывалось большое с некоторыми другими элементами, такими как [...]]]> https://www.dejurka.ru/css/thumbnail_grid_with_expanding_preview/feed/ 8 https://www.dejurka.ru/css/3d_panel_layout/ https://www.dejurka.ru/css/3d_panel_layout/#comments Thu, 24 Jan 2013 08:06:32 +0000 marina http://www.dejurka.ru/?p=72302
В сегодняшней статье будет рассмотрено два шаблона - адаптивный шаблон с 3d-панелью и 3d-галерея изображений. Они являются экспериментальными и будут отображаться правильно только в последних версиях браузеров. Но в целом результат достаточно впечатляющий. В первом примере будет происходить анимация слайдов, которые могут включать до четырех панелей и соответственно анимация разделяющей линии. Во втором - создан [...]]]> https://www.dejurka.ru/css/3d_panel_layout/feed/ 3 https://www.dejurka.ru/css/swatch_book_with_css3_and_jquery/ https://www.dejurka.ru/css/swatch_book_with_css3_and_jquery/#comments Wed, 09 Jan 2013 08:08:23 +0000 marina http://www.dejurka.ru/?p=71400
В этом уроке мы будем создавать цветовую палитру с помощью CSS преобразований и переходов - простой плагин jQuery. Идея состоит в том, что при нажатии на один из образцов мы будем вращать остальные  с целью выявления выбранного.   Демо      Скачать исходники В этом уроке мы будем использовать шрифт в виде иконок, разработанный Fontello. Разметка Для [...]]]> https://www.dejurka.ru/css/swatch_book_with_css3_and_jquery/feed/ 1 https://www.dejurka.ru/css/css3_menu/ https://www.dejurka.ru/css/css3_menu/#comments Fri, 28 Dec 2012 08:11:57 +0000 marina http://www.dejurka.ru/?p=70754
В этом уроке мы будем создавать два типа меню: вертикальные кроссбраузерное  CSS3-меню с 3D-анимацией (используя CSS3-переходы и свойства трансформации), а также  меню с LavaLamp-эффектом.  Давайте посмотрим на образцы меню, которые мы будем создавать: CSS3 vertical multicolor 3D menu: Демо // Загрузить   Pure CSS3 LavaLamp Menu  Демо // Загрузить   CSS3 vertical multicolor 3D menu  Шаг 1. HTML Начинаем с HTML. Ниже приведен [...]]]> https://www.dejurka.ru/css/css3_menu/feed/ 4 https://www.dejurka.ru/css/minimalistic-portfolio-tutorial-part-2/ https://www.dejurka.ru/css/minimalistic-portfolio-tutorial-part-2/#comments Thu, 18 Oct 2012 10:17:34 +0000 Elena http://www.dejurka.ru/?p=64689
Не так давно мы публиковали урок по созданию дизайна чистого портфолио в Фотошопе. Сегодня мы сделаем наше портфолио функциональным и заставим его отображаться в браузере.  В этом уроке мы покажем, как сверстать сайт при помощи html5 и css3 и сделать слайдер при помощи jQuery. Окончательный результат: Смотрите демо Нарезка изображений Нарежьте изображение лого и переключателей для слайдера [...]]]> https://www.dejurka.ru/css/minimalistic-portfolio-tutorial-part-2/feed/ 10 https://www.dejurka.ru/css/css3-stacks/ https://www.dejurka.ru/css/css3-stacks/#comments Wed, 25 Jul 2012 07:07:13 +0000 Elena http://www.dejurka.ru/?p=57835
Надеемся, вы знакомы с такими псевдоэлементами как :before и :after, которые помогают создавать очень интересные эффекты в css3. В сегодняшнем нашем уроке мы будем делать эффект для изображения, которое будет выглядеть так, как будто оно находится на одном из вырванных листов блокнота.   Результат: Демо Шаг1: HTML <div class="stack"> <img src="image1.jpg" /> </div> Шаг2: CSS [...]]]> https://www.dejurka.ru/css/css3-stacks/feed/ 1 https://www.dejurka.ru/css/creating-advanced-marque-with-css3/ https://www.dejurka.ru/css/creating-advanced-marque-with-css3/#comments Thu, 05 Jul 2012 07:42:23 +0000 Elena http://www.dejurka.ru/?p=56371
Тег <marquee> создает на экране перемещающийся объект по принципу бегущей строки. Изначально тег был создан для Internet Explorer. Сегодня мы вспомним этот (вероятно, забытый многими) тег и научимся с его помощью создавать анимированную строку на чистом css3.     *Перед началом выполнения урока рекомендуем прочесть мастеркласс по CSS анимации Проблема Одна из проблем, с <marquee>  в [...]]]> https://www.dejurka.ru/css/creating-advanced-marque-with-css3/feed/ 4 https://www.dejurka.ru/css/funny-css-menu/ https://www.dejurka.ru/css/funny-css-menu/#comments Thu, 07 Jun 2012 07:30:11 +0000 Elena http://www.dejurka.ru/?p=53041
Библиотека JQuery стала простым и лучшим способом для реализации простой анимации. JavaScript  - это конечно хорошо, но CSS3 предлагает заглянуть в будущее, где основная анимация выполняется при помощи  CSS и совершенно не зависит от сценария. Сегодня мы рассмотрим, как использовать CSS3 для создания веселого и необычного навигационного меню и подключить нестандартный шрифт. Чтобы получить представление [...]]]> https://www.dejurka.ru/css/funny-css-menu/feed/ 4