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/styling-visited-links/ https://www.dejurka.ru/css/styling-visited-links/#comments Fri, 09 Mar 2018 11:00:20 +0000 Mary - Dejurka http://www.dejurka.ru/?p=177151
По соображениям безопасности браузер ограничивает возможности CSS для задания стилей посещенным ссылкам всего четырьмя свойствами: цветом, цветом фона, цветом рамки и цветом подчеркивания. В то время как обычные ссылки могут выглядеть намного разнообразней, исходя из желаний дизайнера, строгие ограничения на задание стилей посещенным ссылкам может создать у пользователя плохое понимание того, что именно они уже [...]]]> https://www.dejurka.ru/css/styling-visited-links/feed/ 0 https://www.dejurka.ru/css/timed-notifications-with-css-animations/ https://www.dejurka.ru/css/timed-notifications-with-css-animations/#comments Tue, 03 Dec 2013 11:00:16 +0000 Tiger http://www.dejurka.ru/?p=97449
Это быстрый урок о том, как создать несколько простых уведомлений с помощью CSS-анимации. Идея состоит в том, чтобы показать уведомление с индикатором времени, а затем заставить его исчезнуть.     Загрузить материалы или же просмотреть демо вы можете, нажав на соответствующие кнопки ниже.                         [...]]]> https://www.dejurka.ru/css/timed-notifications-with-css-animations/feed/ 1 https://www.dejurka.ru/css/photo-booth-strips-with-lightbox/ https://www.dejurka.ru/css/photo-booth-strips-with-lightbox/#comments Sat, 23 Nov 2013 11:00:07 +0000 Tiger http://www.dejurka.ru/?p=96098
В этом уроке мы научимся создавать прокручиваемые фото-ленты с Lightbox и сделаем их отзывчивыми. Начнем урок. Идея урока будет заключается в том, чтобы создать прокручиваемые фото-ленты. Желаемый эффект будет осуществляться подключением Lightbox 2. У уроке были использованы материалы талантливого Sherman Geronimo-Tan. Скачать исходные материалы или посмотреть демо вы можете, нажав на ссылки под изображением.     [...]]]> https://www.dejurka.ru/css/photo-booth-strips-with-lightbox/feed/ 0 https://www.dejurka.ru/css/jflexible-slide-to-top-accordion/ https://www.dejurka.ru/css/jflexible-slide-to-top-accordion/#comments Tue, 12 Nov 2013 11:00:16 +0000 Tiger http://www.dejurka.ru/?p=95553
В сегодняшнем уроке мы будем создавать адаптивный аккордеон. При открытии он будет скользить с верхней части страницы и раскрывать содержимое. Будут добавлены также CSS3 переходы для стрелок. Начнем!     Посмотреть демо или скачать исходные файлы вы можете, нажав на ссылки под изображением ниже.                       [...]]]> https://www.dejurka.ru/css/jflexible-slide-to-top-accordion/feed/ 0 https://www.dejurka.ru/css/3d-shading-with-box-shadows/ https://www.dejurka.ru/css/3d-shading-with-box-shadows/#comments Mon, 07 Oct 2013 07:00:15 +0000 Tiger http://www.dejurka.ru/?p=90126
В данном уроке пойдет речь о технике, что может быть применена к объектам, у которых есть несколько сторон. Нашим примером будет 3D киногалерея с глянцевыми плакатами. Когда плакаты будут вращаться, стороны будут отображать матовые информационные карты с метаданными о фильме.     Работая с 3D трансформированными элементами, вы могли заметить, что они  выглядят довольно плоско [...]]]> https://www.dejurka.ru/css/3d-shading-with-box-shadows/feed/ 3 https://www.dejurka.ru/css/interactive-infographic-with-svg-and-css-animations/ https://www.dejurka.ru/css/interactive-infographic-with-svg-and-css-animations/#comments Wed, 02 Oct 2013 10:00:16 +0000 Tiger http://www.dejurka.ru/?p=90127
В данном уроке мы научимся строить интерактивную инфографику с помощью SVG, CSS и JavaScript. Одной из менее обсуждаемых тем является свойство новых браузеров в увеличении поддержки файлов в формате SVG. В отличие от растровых изображений, например, PNG, JPG или GIF, векторная графика в файлах SVG абсолютно масштабируемая к любому размеру и будет отображаться при любом разрешении [...]]]> https://www.dejurka.ru/css/interactive-infographic-with-svg-and-css-animations/feed/ 5 https://www.dejurka.ru/css/fluid-css3-slideshow-with-parallax-effect/ https://www.dejurka.ru/css/fluid-css3-slideshow-with-parallax-effect/#comments Tue, 10 Sep 2013 07:00:21 +0000 Tiger http://www.dejurka.ru/?p=87987
В этом обучающем уроке мы создадим слайд-шоу с эффектом параллакса, используя несколько свойств CSS3. Идея состоит в том, чтобы перемещать положение двух фонов, двигая слайды, чтобы таким образом создавать незначительный эффект параллакса.     В демо использована графика: 5Milli (Global Vector Map) и WeGraphics (Free Vector Infographic Kit).                     Демо    [...]]]> https://www.dejurka.ru/css/fluid-css3-slideshow-with-parallax-effect/feed/ 7 https://www.dejurka.ru/css/css-tutorial-adaptive-navigation/ https://www.dejurka.ru/css/css-tutorial-adaptive-navigation/#comments Thu, 05 Sep 2013 07:00:22 +0000 Mary - Dejurka http://www.dejurka.ru/?p=86329
Одна из самых сложно поддающихся адаптации частей веб-сайта это навигация. Эта часть очень важна для удобства использования веб-сайта, так как это один из путей, которым пользователи переходят со страницы на страницу. Для создания адаптивной навигации по сайту существует множество путей, и несколько jQuery плагинов даже способны сделать это мгновенно.   Однако вместо того, чтобы применить [...]]]> https://www.dejurka.ru/css/css-tutorial-adaptive-navigation/feed/ 2 https://www.dejurka.ru/css/jquery-image-lightbox/ https://www.dejurka.ru/css/jquery-image-lightbox/#comments Wed, 14 Aug 2013 07:00:07 +0000 Mary - Dejurka http://www.dejurka.ru/?p=84252
Есть ряд вопросов, которые нужно рассмотреть, когда Вы создаете свою тему WordPress. Один из таких элементов страницы – динамическая галерея изображений, использующая или ligthbox, или какую-то скользящую панель. Оба этих пользовательских интерфейса изящно вплетаются в содержание статьи. Так как они оба работают на типичных вебсайтах, удобно иметь под рукой код, готовый к использованию в любых [...]]]> https://www.dejurka.ru/css/jquery-image-lightbox/feed/ 7 https://www.dejurka.ru/css/css-tutorials-responsive-web-design/ https://www.dejurka.ru/css/css-tutorials-responsive-web-design/#comments Tue, 06 Aug 2013 07:00:15 +0000 Mary - Dejurka http://www.dejurka.ru/?p=83542
Сегодняшняя подборка уроков для CSS посвящена адаптивному веб-дизайну. Как самому сделать так, чтобы ваш сайт отображался корректно на любом экране? Вы наверняка найдете ответ ниже. Вас ждут уроки для начинающих и продвинутых кодеров. Вы научитесь создавать адаптивный сайт, а также его отдельные элементы.   Для начала немного уроков общего характера: Урок от Jason Michael Урок от Shay [...]]]> https://www.dejurka.ru/css/css-tutorials-responsive-web-design/feed/ 8