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-basics-using-multiple-backgrounds/ https://www.dejurka.ru/css/css-basics-using-multiple-backgrounds/#comments Wed, 10 Apr 2019 08:00:15 +0000 Mary - Dejurka http://www.dejurka.ru/?p=192297
С помощью кода CSS можно контролировать фон элементов. Можно задать свойство цвета фона или свойство изображения фона, или даже оба одновременно, чтобы выбрать и цвет, и изображение:     body { background-color: red; background-image: url(pattern.png); } Также можно использовать SVG изображение как фон, встроенный в код CSS как закодированное изображение: Выше закодировано только одно повторяющееся [...]]]> https://www.dejurka.ru/css/css-basics-using-multiple-backgrounds/feed/ 0 https://www.dejurka.ru/css/centering-percentage-widthheight-elements/ https://www.dejurka.ru/css/centering-percentage-widthheight-elements/#comments Sun, 07 Apr 2019 08:00:03 +0000 Mary - Dejurka http://www.dejurka.ru/?p=192165
Если вы знаете точные значения ширины и высоты элемента, его можно расположить точно в центре его родительского элемента с помощью способа, описанного нами в уроке «Использование различных методов для размещения объекта ровно по центру»: задать значение верхнего и левого углов как 50% и отрицательные внешние отступы как половину высоты и ширины элемента. Этот способ отлично [...]]]> https://www.dejurka.ru/css/centering-percentage-widthheight-elements/feed/ 0 https://www.dejurka.ru/css/downsides-of-smooth-scrolling/ https://www.dejurka.ru/css/downsides-of-smooth-scrolling/#comments Mon, 01 Apr 2019 08:00:09 +0000 Mary - Dejurka http://www.dejurka.ru/?p=191958
Создать плавную прокрутку сейчас намного легче, чем раньше. Если нужно, чтобы она постоянно присутствовала на веб-странице и можно, чтобы браузер отвечал за ее продолжительность, достаточно всего одной строки кода CSS:     html { scroll-behavior: smooth; } Но пользователи не любят плавную прокрутку. Конечно, неудобно, что нельзя задать продолжительность плавной прокпуики, но дело не только [...]]]> https://www.dejurka.ru/css/downsides-of-smooth-scrolling/feed/ 0 https://www.dejurka.ru/css/using-span-to-break-up-words/ https://www.dejurka.ru/css/using-span-to-break-up-words/#comments Wed, 27 Mar 2019 11:00:26 +0000 Mary - Dejurka http://www.dejurka.ru/?p=191851
Нас заинтересовало, как проще всего записать ссылки, состоящие из нескольких слов. Мы пришли к выводу, что это возможно с помощью обычного тега и с использованием CSS.     Допустим, что у вас есть ссылка с тремя словами, например, такая: www.badgerfootballforums.com Все слова как бы сливаются в одно, что делает их не особо читабельными. Можно попробовать [...]]]> https://www.dejurka.ru/css/using-span-to-break-up-words/feed/ 1 https://www.dejurka.ru/css/stacking-order-of-multiple-backgrounds/ https://www.dejurka.ru/css/stacking-order-of-multiple-backgrounds/#comments Sun, 24 Mar 2019 08:00:29 +0000 Mary - Dejurka http://www.dejurka.ru/?p=191781
Множественные фоновые изображения — интересная возможность CSS3. Синтаксис прост: нужно только разделить значения разных изображений запятой. Нам кажется, что проще и лучше использовать сокращенную запись свойства фона, в которой можно задать расположение, повторение и другие параметры, и при этом все будет сгруппировано и понятно.     Может быть, не совсем очевидно из синтаксиса, какое изображение [...]]]> https://www.dejurka.ru/css/stacking-order-of-multiple-backgrounds/feed/ 163 https://www.dejurka.ru/css/old-timey-terminal-styling/ https://www.dejurka.ru/css/old-timey-terminal-styling/#comments Tue, 19 Mar 2019 08:00:51 +0000 Mary - Dejurka http://www.dejurka.ru/?p=191551
Недавно мы увидели демонстрацию под названием «Терминал HTML5». Нам понравилось, как она выглядит: размытый моноширинный шрифт с  заметными полосами, как у экрана монитора, и светящийся зеленый фон.     Давайте реализуем это с помощью CSS, шаг за шагом. Функция радиального градиента идеально подходит для создания светящегося зеленого фона: body { background-color: black; background-image: radial-gradient( rgba(0, [...]]]> https://www.dejurka.ru/css/old-timey-terminal-styling/feed/ 0 https://www.dejurka.ru/css/understanding-ua-stylesheets/ https://www.dejurka.ru/css/understanding-ua-stylesheets/#comments Wed, 13 Mar 2019 11:00:11 +0000 Mary - Dejurka http://www.dejurka.ru/?p=184461
Представьте, что вы создаете веб-страницу, используя только HTML, без прикрепления или применения файлов таблиц стилей CSS. Почему же при отображении сайта в браузере ссылки окажутся синими и подчеркнутыми, а текст в абзацах — черным? И почему по умолчанию внешний отступ у элемента заголовка верхнего уровня 14pt в браузере Internet Explorer и 0,67em в браузере Firefox? [...]]]> https://www.dejurka.ru/css/understanding-ua-stylesheets/feed/ 0 https://www.dejurka.ru/css/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ https://www.dejurka.ru/css/quick-css-trick-how-to-center-an-object-exactly-in-the-center/#comments Mon, 11 Mar 2019 08:00:53 +0000 Mary - Dejurka http://www.dejurka.ru/?p=191371
Мы задались вопросом, какими способами можно разместить изображение, например, логотип на странице заглушки, ровно по центру веб-страницы и по вертикали, и по горизонтали. Для начала зададим изображению класс .centered (расположенный по центру) и зададим стили для этого класса:     .centered { position: fixed; /* или absolute */ top: 50%; left: 50%; } Но эта [...]]]> https://www.dejurka.ru/css/quick-css-trick-how-to-center-an-object-exactly-in-the-center/feed/ 0 https://www.dejurka.ru/css/alternative-style-links/ https://www.dejurka.ru/css/alternative-style-links/#comments Wed, 06 Mar 2019 08:00:57 +0000 Mary - Dejurka http://www.dejurka.ru/?p=191181
Вы, разумеется, знаете, как выглядят ссылки по умолчанию: текст синего цвета с синим же подчеркиванием, одинаково изменяющие цвет при наведении указателя мыши. Есть и другой способ создать немного более интересный вид ссылок:     Создание необычных стилей для ссылок Широко известный вид ссылок по умолчанию Вид ссылок при использовании другого способа. Обратите внимание на небольшой [...]]]> https://www.dejurka.ru/css/alternative-style-links/feed/ 0 https://www.dejurka.ru/css/css-background-on-body/ https://www.dejurka.ru/css/css-background-on-body/#comments Thu, 21 Feb 2019 08:00:26 +0000 Mary - Dejurka http://www.dejurka.ru/?p=190555
В этом уроке мы будем разбираться с тегом body, а точнее с его свойствами, которые позволяют задать тегу фоновый цвет. Иногда это работает совсем не так, как вы можете того ожидать. Сегодня вы узнаете почему это происходит именно так, и как это исправить.     Допустим, вам нужно, чтобы у вашего веб-сайта был красный фон. [...]]]> https://www.dejurka.ru/css/css-background-on-body/feed/ 1