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/angled-edge-css3/ https://www.dejurka.ru/css/angled-edge-css3/#comments Tue, 15 Dec 2015 11:00:51 +0000 Mary - Dejurka http://www.dejurka.ru/?p=141123
В этом уроке мы рассмотрим создание эффекта горизонтальных краев под углом на веб-странице. Если в макете есть немного непараллельные края, он выглядит менее жестким и скучным. Для создания этого эффекта мы воспользуемся псевдоэлементами ::before и ::after и трансформациями CSS3.     Использование псевдоэлементов В этом способе псевдоэлементы ::before и ::after используются для создания непрямых углов у [...]]]> https://www.dejurka.ru/css/angled-edge-css3/feed/ 3 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/blend-mode-css/ https://www.dejurka.ru/css/blend-mode-css/#comments Tue, 16 Sep 2014 10:00:57 +0000 Mary - Dejurka http://www.dejurka.ru/?p=116690
Если вы когда-либо использовали графический редактор, такой как Photoshop или Pixelmator, вы, вероятно, уже знакомы с режимами наложения. Режимы наложения — это ряд режимов, которые позволяют объекту смешаться с другими объектами, и создают таким образом результирующее изображение. При правильном использовании режим наложения позволит получить впечатляющий результат, например, такой:     Применение режима наложения в логотипе, [...]]]> https://www.dejurka.ru/css/blend-mode-css/feed/ 0 https://www.dejurka.ru/css/famous-logo-in-css/ https://www.dejurka.ru/css/famous-logo-in-css/#comments Mon, 01 Sep 2014 10:00:12 +0000 Mary - Dejurka http://www.dejurka.ru/?p=115744
В этом уроке мы постараемся воссоздать логотип компании Pepsi без помощи изображений, используя только CSS. Конечно, этот логотип возможно создать и другими способами, так что не стесняйтесь экспериментировать. Логотип не особо сложный, в нем нет теней, световых эффектов или других деталей, требующих особого внимания. Только простые однотонные цвета — отлично для начала. Вот как это выглядит. [...]]]> https://www.dejurka.ru/css/famous-logo-in-css/feed/ 0 https://www.dejurka.ru/css/css-logo-news-list/ https://www.dejurka.ru/css/css-logo-news-list/#comments Wed, 27 Aug 2014 10:00:12 +0000 Mary - Dejurka http://www.dejurka.ru/?p=115334
Благодаря своей функции логотип ленты новостей RSS — один из наиболее часто используемых логотипов в веб-дизайне. Вы, скорее всего, встречали много уроков по созданию логотипа ленты новостей RSS с помощью графических редакторов, таких как Photoshop, а как насчет нарисовать этот логотип, использую только CSS3?     В этом уроке мы покажем простой способ создания стандартного логотипа [...]]]> https://www.dejurka.ru/css/css-logo-news-list/feed/ 0 https://www.dejurka.ru/css/first-of-type-selected-css/ https://www.dejurka.ru/css/first-of-type-selected-css/#comments Tue, 12 Aug 2014 10:00:31 +0000 Mary - Dejurka http://www.dejurka.ru/?p=114446
Как хорошо что в CSS3 добавились новые селекторы, позволяющие обращаться к определенным элементам, не используя классы, идентификаторы или другие свойства элемента! В этом уроке мы расскажем о селекторе :first-of-type.     Cелектор :first-of-type обратится к первому элементу определенного типа, например, в отрывке кода ниже стиль задается для первого h2 на веб-странице. h2:first-of-type { /* объявление [...]]]> https://www.dejurka.ru/css/first-of-type-selected-css/feed/ 2 https://www.dejurka.ru/css/css3-attr-selector/ https://www.dejurka.ru/css/css3-attr-selector/#comments Sat, 02 Aug 2014 10:00:54 +0000 Mary - Dejurka http://www.dejurka.ru/?p=113865
Селектор атрибутов очень удобен для выбора элементов без добавления излишних идентификаторов и классов. До тех пор, пока у элемента, к которому нужно обратиться, есть такие атрибуты, как href, src и type, нам не нужно добавлять лишнее. Селекторы атрибутов фактически присутствовали, начиная с CSS 2.1, и теперь, после добавления еще нескольких селекторов атрибутов в спецификации CSS3, [...]]]> https://www.dejurka.ru/css/css3-attr-selector/feed/ 0 https://www.dejurka.ru/css/css-reflection/ https://www.dejurka.ru/css/css-reflection/#comments Mon, 28 Jul 2014 10:00:37 +0000 Mary - Dejurka http://www.dejurka.ru/?p=113487
Мы уже рассказывали о разных свойствах CSS3. Кроме этого есть еще свойства, которые пока что не включены в официальные спецификации CSS3, но которые стоит попробовать применить, и одно из таких свойств — box-reflect, которое введено для движка Webkit. Это свойство может создавать отражение указанных объектов.     Простейшее отражение Простейшее применение интуитивно понятно. Допустим, мы [...]]]> https://www.dejurka.ru/css/css-reflection/feed/ 2 https://www.dejurka.ru/css/css3-typography/ https://www.dejurka.ru/css/css3-typography/#comments Tue, 18 Feb 2014 11:00:42 +0000 Mary - Dejurka http://www.dejurka.ru/?p=103654
Красивая типографика всегда интересна, поэтому хочется найти способы применения веб-технологий для улучшения оформления текста. В этом уроке мы покажем, как использовать свойства CSS3, чтобы разнообразить оформление текстов или создать эффекты способами, которые кажутся невозможными. Заметьте: эффекты будут работать только в браузерах Webkit, но мы добавили дополнительные свойства, чтобы они работали и в других браузерах.     Демонстрация [...]]]> https://www.dejurka.ru/css/css3-typography/feed/ 2 https://www.dejurka.ru/css/related-posts-slide-outs/ https://www.dejurka.ru/css/related-posts-slide-outs/#comments Fri, 13 Dec 2013 11:00:07 +0000 Mary - Dejurka http://www.dejurka.ru/?p=98833
Многие задаются вопросом, как показать посетителям больше своих работ. Обычно старые сообщения в блоге забываются, и даже если что-то все еще интересно и актуально, оно теряется в куче нового. Мы создадим небольшое приложение, которое может использоваться, чтобы показать связанные сообщения на каждой странице. Основная задача – показать список, закрепленный с правой стороны экрана, с выглядывающими [...]]]> https://www.dejurka.ru/css/related-posts-slide-outs/feed/ 1