Прощание с градиентами CSS3

  1. CSS3 градиенты: Да, на самом деле они довольно дерьмовые.
  2. Хорошо, так какова альтернатива?
  3. Шаг назад: что такое SVG?
  4. Как вы делаете SVG?
  5. Пример 1: Простые линейные градиенты
  6. Как насчет радиальных градиентов?
  7. Пример 2 - Световые эффекты
  8. Пример 3 - Винтажная галерея
  9. Как вы думаете?

Прежде чем мы начнем, давайте разберемся с одной вещью:

Я ♥ CSS3.

Я понимаю, что у нас никогда не было так хорошо. На самом деле, я не сомневаюсь, что путешественники во времени, посещающие с 2004 года, будут болеть ревностью по поводу того, как легко мы теперь вызываем закругленные углы, тени и вращения объектов.

Конечно, специфичные для браузера префиксы (то есть -moz, -webkit -o и т. Д.) Являются раздражением, но, к счастью, остальная часть обозначений разумна, последовательна и надежно поддерживается во всех современных браузерах.

То есть, с одним заметным исключением ...

CSS3 градиенты: Да, на самом деле они довольно дерьмовые.

В то время как идея программируемых градиентов велика, использование их серьезно запутанно. Даже в совершенной утопии в браузере градиенты сознательно ограничиваются элементарным линейным или радиальным применением. Вы, конечно, не можете объединить их или сделать из них контур или что-то полезное.

Что еще более важно, поддержка сложна в большинстве браузеров и отсутствует в некоторых.

Вот снимок текущего состояния игры:

Браузер Radial CSS Linear CSS Firefox -moz-radial-градиент (500px 25%, круг, синий 20px, #eef 40px); -moz-linear-Gradient (вверху, # 444444, # 999999);) Chrome 11, Safari 5 -webkit-radial-Gradient (# cde6f9, # 81a8cb); -webkit-linear-Gradient (вверху, # 444444, # 999999);) Chrome -webkit-градиент (радиальный, 500 25%, 20, 500 25%, 40, от (синий) до (#eef)); -webkit-Gradient (линейный, слева вверху, слева внизу, от (# 444444) до (# 999999)); Opera 11 Нет поддержки -o-linear-Gradient (вверху, # 444444, # 999999);) Opera 10- Нет поддержки Нет поддержки IE10 бета-MS-радиальный градиент (верхний центр, круговая обложка,
оранжевый, желтый 25px, бирюзовый) -ms-линейный градиент (30 градусов, оранжевый, желтый 50%, бирюзовый); IE9 Нет поддержки Нет поддержки IE8 Нет поддержки -ms-фильтр: "progid: DXImageTransform.Microsoft.gradient (la la la ... IE5-7 Нет поддержки фильтра: progid: DXImageTransform.Microsoft.gradient (la la la ..

Вау, это выглядит весело, а? Короче говоря, это тупой инструмент с капризным синтаксисом и пятнистой поддержкой.

Хорошо, так какова альтернатива?

Хотя в последнее время было несколько замечательных дискуссий на тему градиентов - Недавняя статья Джона Аллсопа дает идеальный обзор - большинство фокусируется на использовании CSS3, иногда исправляя дыры тут и там с помощью мазка SVG.

Может быть, мы смотрим на это неправильно?

В 2011 году SVG на самом деле хорошо поддерживается всеми текущими распространенными браузерами - даже на мобильных устройствах. Что делать, если мы начали с SVG и залатали края? Оглядываясь назад на 15-летнюю эволюцию CSS, это было медленное, часто мучительное развитие. При такой скорости разработки трудно представить, чтобы CSS когда-либо превращался в действительно мощный, гибкий инструмент визуального дизайна.

Но с SVG, возможно, у нас сегодня полнофункциональный визуальный язык.

Шаг назад: что такое SVG?

Итак, если вы думаете ' SVG? Это новый Фольксвагон, верно? давайте сделаем быстрый улов.

Масштабируемая векторная графика (SVG) - это формат файлов на основе XML для описания двухмерной векторной графики. Как и формат AI Illustrator, он создает изображения с использованием математики и геометрии, а не сетки пикселей (например, JPEG, PSD и т. Д.). Это дает изображениям SVG некоторые очень важные для сети суперспособности - главным образом, SVG масштабируется без искажений при сохранении крошечных размеров файлов.

Как вы делаете SVG?

Есть немало способов сделать свой собственный SVG.

  • Код руки : если вы достаточно умны, просто откройте свой старый текстовый редактор и начните печатать. Как и большинство форматов XML, SVG в основном имеет смысл, когда вы читаете его.
  • Иллюстратор : Adobe Illustrator Можно экспортировать в SVG, хотя, честно говоря, код не совсем стройный и сексуальный. Может быть, не правильный инструмент здесь.
  • Inkscape : Inkscape это мощный бесплатный редактор с открытым исходным кодом, который использует SVG как собственный формат файла. У него по праву много поклонников, но он может быть излишним для создания простой графики, готовой к вебу.
  • Ворон : Вольер ворон это векторное онлайн-приложение, которое включает опцию «сохранить в SVG». Raven основан на Flash, но в остальном он бесплатен и пишет вполне приличный код.
  • SVG Edit : мой личный фаворит, SVG Edit от Google's Pavol Rusnak (размещен на Google Code)

Последнее может быть сюрпризом, так как Google Code не совсем первое место, которое вы думаете, когда речь заходит об инструментах визуального дизайна. Да, это так же уродливо, как бульдог ест кашу. Но, к счастью, в этом есть еще много чего:

  1. Это бесплатно, и мы всегда любим бесплатно.
  2. Он построен из простого старого JavaScript, HTML, CSS и SVG, так что вы можете использовать Онлайн-версия Google или запустите копию в вашей локальной системе.
  3. Это пишет трудную, чистую, читаемую разметку.
  4. SVG Edit разработан, чтобы держать вас в тесном контакте с кодом SVG на протяжении всего процесса.

Последний пункт важен. Как дизайнеры внешнего интерфейса, мы склонны недоверчиво относиться к инструментам WYSIWYG, которые скрывают от нас код. Действительно, большинство из нас гордятся ручным кодированием наших шестнадцатеричных цветов, стеков шрифтов, настроек высоты строки и ритмов базовой линии. Черт, некоторые из нас даже выбирают цвет наших футболок, основываясь на их значениях RGB (без указания). SVG Edit призывает вас «быть ближе и ближе» с SVG таким же образом. Это будет становиться все более полезным, чем больше вы будете работать с SVG.

Этого достаточно теории. Давайте рассмотрим простейшие примеры SVG.

Пример 1: Простые линейные градиенты

1. Открыть SVG Edit в вашем браузере (по ссылке раздел Демо).

Открыть   SVG Edit   в вашем браузере (по ссылке раздел Демо)

Пустое приложение SVG Edit

2. Прежде чем что-то сделать, попробуйте нажать на эту довольно отвратительную кнопку «SVG» в левом верхнем углу. Появится всплывающее окно с вашим пустым SVG-документом. Вы заметите, что размер документа установлен на 640 на 480 пикселей. Попробуйте изменить ширину на 480 пикселей и нажмите «Применить изменения», чтобы увидеть изменения в представлении визуального редактора.

Ницца. Вы только что написали немного SVG.

3. Затем выберите инструмент прямоугольник на левой панели инструментов и вытяните прямоугольник примерно того же размера, что и ваш документ. Ваш прямоугольник, скорее всего, будет иметь контур обводки по умолчанию. Внизу вашего редактора вы заметите элементы управления заливкой и обводкой. Удалите обводку, установив ширину обводки на 0 пикселей.

4. Вернувшись к представлению кода SVG, вы увидите, что тег atag был добавлен с набором свойств для цвета, обводки и размера. Отличительной особенностью SVG является то, что он, как правило, очень удобочитаемый. Поскольку мы избавились от обводки, вы можете при желании удалить свойства ширины обводки и цвета обводки. Если ваш прямоугольник не совсем соответствует вашему холсту, отредактируйте ширину и высоту вручную, чтобы соответствовать документу. Это должно выглядеть примерно так:

<svg width = "640" height = "480" xmlns = "http://www.w3.org/2000/svg"> <! - Создано с помощью SVG-edit - http: //svg-edit.googlecode. com / -> <g> <title> Слой 1 </ title> <rect fill = "# ff0000" x = "0" y = "0" height = "480" width = "640" id = "svg_1" /> </ g> </ svg>

5. Перейдите обратно к представлению визуального редактора. Выбрав новый прямоугольник, нажмите на цветной чип Fill (рядом с корзиной). Запускается всплывающее окно с вкладками, которое позволяет выбирать между сплошным цветом, линейным и радиальным градиентом. Посмотрим правде в глаза: сплошной цвет SVG здесь менее полезен, чем обычный старый CSS, но две другие вкладки очень полезны.

Попробуйте панель линейного градиента. Вы можете выбрать начальный и конечный цвета с помощью палитры цветов. Настройки 'x' и 'y' определяют направление вашего градиента. Верхний левый угол - это позиция 0: 0, а нижний правый угол - 1: 1, поэтому начальный стоп 0: 0 и конечный стоп 1: 1 приведут вас сверху вниз к правому нижнему углу. диагональный градиент.

Изменение конечной остановки на 0: 1 переключит ваш градиент с горизонтального на вертикальный. Вы заметите, что внизу есть ползунок, который позволяет вам контролировать прозрачность всего объекта. Кроме того, вы можете установить разные уровни прозрачности для каждой остановки с помощью палитры цветов. Попробуйте выбрать начальный и конечный цвет, а затем взгляните на SVG. Это должно выглядеть примерно так.

<svg width = "640" height = "480" xmlns = "http://www.w3.org/2000/svg"> <! - Создано с помощью SVG-edit - http: //svg-edit.googlecode. com / -> <defs> <linearGradient y2 = "1" x2 = "1" y1 = "0" x1 = "0" id = "svg_2"> <stop stop-color = "# ff0000" offset = "0 "/> <stop stop-color =" # ffff00 "offset =" 1 "/> </ linearGradient> </ defs> <g> <title> Слой 1 </ title> <rect id =" svg_1 "height =" 480 "width =" 640 "y =" 0 "x =" 0 "fill =" url (# svg_2) "/> </ g> </ svg>

Эта разметка должна казаться знакомой. Вы увидите, что градиент определяется вверху между тегами и имеет уникальный идентификатор - «svg_2». Стопы обозначают наши начальные и конечные цвета. Ниже вы увидите тег, который ссылается на градиент через его идентификатор (id = ”svg_2 ″).

Давайте добавим это в браузер.

Откройте представление кода SVG, выберите разметку и скопируйте ее в буфер обмена. Затем откройте ваш любимый редактор кода, создайте новый документ и вставьте ваш SVG в.

Сохраните ваш документ как «Gradient.svg» в папку тестирования. Затем создайте пустой HTML-документ и в заголовок добавьте следующий код.

<style> html {background: url (градиент.svg); размер фона: 100% 100%; высота: 100%; } </ style>

Сохраните HTML-документ с вашим SVG и просмотрите его в браузере. Вы должны смотреть на элегантный двухцветный градиент, который легко масштабируется, чтобы заполнить ЛЮБОЕ текущее окно браузера.

« А как насчет трех или более цветовых градиентов? ' ты говоришь.

Легко. Вернитесь к градиенту в вашем редакторе кода. Вы заметите, что остановки в нашем линейном градиенте имеют смещения 0 и 1 соответственно. Добавьте новый со смещением 0,5 и любым цветом, который вам нравится, и поместите его между двумя другими остановками, например так:

<stop stop-color = "# ff0000" offset = "0" /> <stop stop-color = "# 00ff00" offset = ". 5" /> <stop stop-color = "# ffff00" offset = "1" />

Сохраните и перезагрузите, и теперь у вас должна быть трехцветная радуга.

Итак, вы можете подумать: « Хорошо, но мы можем сделать это с помощью градиентов CSS3 - что в этом такого? «Это очень верно, но у SVG есть некоторые приятные преимущества.

  • Наш CSS настолько чист, что вы можете его съесть.
  • Мы можем настроить и настроить наш градиент, не выходя из редактора кода.
  • Теперь у нас есть один набор чисел для управления, а не 4,5 или 6 синтаксисов. (Даже если предположить, что нам еще придется взломать старые IE)

Это хорошо, что насчет примера, который не может быть воспроизведен с помощью чисто CSS-решения.

Как насчет радиальных градиентов?

SVG Edit - Панель радиального градиента

Вернуться к SVG Edit. Снова выберите прямоугольник, нажмите на цвет заливки и перейдите на вкладку радиального градиента . Вы увидите панель управления, похожую на панель линейного градиента.

По умолчанию градиенты центрируются на вашей фигуре (например, положение x = 0.5, y = 0.5), но вы можете свободно перетаскивать и перемещать центральную точку в любое время.

Внешний радиус можно регулировать с помощью ползунка радиуса справа. Тем не менее, я думаю, что действительно изящная часть состоит в том, чтобы иметь возможность иметь отдельную центральную точку и фокус.

Просто снимите флажок « центр матча » и расположите значки «F» и «C» где угодно. Как вы можете видеть на скриншоте, это позволяет вам растягивать и искажать радиальный градиент способами, которые напоминают прожекторы и тени.

Даже самые модные из новых браузеров не могут сделать это с помощью чистого CSS.

Великие режиссеры, такие как Билли Уайлдер и Альфред Хичкок, используют свет и тень, чтобы рассказать свою историю.

Пример 2 - Световые эффекты

Недавно я смотрел старую классику Сансет Бульвар и это заставило меня задуматься о том, как блестяще режиссеры, такие как Билли Уайлдер и Альфред Хичкок, использовали тень и свет для создания драмы. Тени почти становятся другим персонажем в истории.

Тени почти становятся другим персонажем в истории

Бесшовные плитки хороши, но они должны быть ровными, чтобы работать

Для меня это подчеркивает естественное ограничение в виде бесшовных растровых изображений в Интернете: по определению они должны быть скучными, почти клинически плоскими.

Точнее, если вы хотите, чтобы края смешались, вы не можете сделать плитку светлее с одной стороны, чем с другой.

Что если бы мы объединили сильные стороны SVG с точечными растровыми изображениями, чтобы получить лучшее из обоих миров?

Давайте начнем с этой основной бесшовной кирпичной плитки (слева). Оказывается само Это не особенно впечатляет. Конечно, мы могли бы использовать принцип цикады рандомизировать структуру кирпича, но я думаю, что это плоское, стерильное освещение, которое действительно делает его тусклым. Давайте это исправим.

Используя SVG Edit, я создал простой полночный синий прямоугольник с полупрозрачным центром радиального градиента.

Я переместил фокус в верхний левый угол, чтобы дать ему ощущение прожектора.

Я переместил фокус в верхний левый угол, чтобы дать ему ощущение прожектора

Радиальные градиенты в SVG

Копирование кода в новый файл SVG должно выглядеть примерно так:

<svg width = "640" height = "480" xmlns = "http://www.w3.org/2000/svg"> <! - Создано с помощью SVG-edit - http: //svg-edit.googlecode. com / -> <defs> <radialGradient id = "svg_3" cx = "0.5" cy = "0.5" r = "0.5" fx = "0.19" fy = "0.19"> <stop offset = "0" stop- color = "# 000000" stop-opacity = "0" /> <stop offset = "1" stop-color = "# 120747" /> </ radialGradient> </ defs> <g> <title> Слой 1 </ title> <rect fill = "url (# svg_3)" x = "0" y = "0" height = "480" width = "640" id = "svg_1" fill-opacity = "0.72" /> </ g > </ svg>

Как видите, он все еще очень лаконичен и легко читается.

Во-первых, мы настроим резервный фон для старых (в основном IE) браузеров, которые не поддерживают несколько фонов. Мы также установим высоту HTML-элемента на 100%, чтобы наше изображение заполняло браузер.

html {background: url (bricks3.jpg); высота: 100%; }

Далее мы добавим наш мульти-изображение фона. Кирпичная плитка находится сзади (последняя), и наш SVG накладывает ее.

html {background: url (bricks3.jpg); фон: url (spotlight.svg), url (bricks3.jpg); высота: 100%; }

Примечание. Я использую сокращенное свойство CSS background 'background' вместо 'background-image', так как старые IE, кажется, пытаются читать несколько изображений как одно длинное изображение, когда вы используете более конкретную запись. Derp.

Очевидно, фоновые изображения будут по умолчанию. Это идеально подходит для нашей кирпичной графики, но мы хотим, чтобы наш SVG соответствовал окну браузера, поэтому нам нужно указать размер фона следующим образом:

html {background: url (bricks3.jpg); фон: url (spotlight.svg), url (bricks3.jpg); размер фона: 100% 100%, авто; / * auto is tile * / height: 100%; } html {background: url (bricks3

Сочетание SVG с простой плиткой.

Наконец, мы добавляем порцию веб-шрифтов и щепотку CSS3, и мы получаем что-то вроде этого. Вы можете ткнуть в живой пример здесь ,

Я думаю, что есть ряд моментов, которые стоит отметить.

Первое, что меня поражает, это то, как сильно очень простой SVG может оказать на плоскую плитку. Изменяющийся свет означает, что даже сильно повторяющиеся кирпичи кажутся куда менее заметными, чем раньше.

Во-вторых, с технической точки зрения вы заметите, что SVG мгновенно масштабируется до любого окна браузера и остается кристально чистым независимо от разрешения экрана.

Поддержка SVG в фонах CSS хороша во всех современных браузерах.

  • Chrome (с мая 2010 года)
  • Firefox (март 2011 г.)
  • IE9 (бета-версия марта 2010 г.)
  • Сафари (июнь 2010)
  • Опера (июнь 2008).

Старые браузеры будут радовать рендеринг кирпичей, но не SVG - для этого примера это неплохой результат. Я не собираюсь вдаваться в подробности здесь, но вы можете рассмотреть альтернативные варианты для Firefox 3.6 и IE8 - ваш вызов.

Пример 3 - Винтажная галерея

Используйте инструмент многоугольника, чтобы создать прямоугольник со слегка изогнутыми краями.

Время серьезно и поставить SVG более сложную задачу. До сих пор в наших первых двух примерах использовался только один прямоугольник, но - в отличие от CSS3-градиентов - ничто не мешает нам объединить одну, две или более фигур и градиентов в один более сложный SVG.

В этом последнем примере мы собираемся создать свободную картинную галерею в винтажном стиле. HTML-код для нашей галереи очень чистый - неупорядоченный список изображений Flickr любезно предоставлен Национальная библиотека или Ирландия , Я хочу создать автоматически изменяющий размер SVG-кадр для каждого изображения.

Возвращаясь к SVG Edit, я собираюсь создать этот новый рисунок из двух более простых форм.

Первая фигура создается с помощью инструмента «Многоугольник». По сути, это прямоугольник с слегка изогнутыми краями - почти как если бы форма была завышена. Эта фигура будет моей тенью, поэтому я хочу удалить обводку и сделать ее полупрозрачной, на 30% черной заливкой.

К счастью, SVG также поддерживает удобный набор встроенных фильтров, и мы можем использовать один из них, чтобы придать нашей тени плавный размытый край.

Выберите форму, и вы должны увидеть элементы управления фильтра размытия в верхней части редактора. Я установил мое размытие на 6, чтобы получить мягкий край, который вы видите ниже.

Я установил мое размытие на 6, чтобы получить мягкий край, который вы видите ниже

Установка фильтра размытия на 6 дает нам мягкий эффект тени.

Вторая форма - это просто прямоугольник. Он имеет светло-серую окантовку, а линейный градиент белых и светло-серых оттенков придает ему глянцевый вид «фотобумаги».

Возьмите код из редактора и вставьте его в новый документ SVG. Теперь у нас есть простая, масштабируемая рамка это идеально подходит для наших нужд.

Давайте посмотрим на CSS.

ul li {background: url (polaroid.svg); -moz-background-size: 100% 100%; размер фона: 100% 100%; Дисплей: встроенный блок; набивка: 2% 2,5% 3% 2%; стиль списка: нет; ...} ul li {background: url (polaroid

Использование простого SVG для имитации внешнего вида глянцевой фотобумаги

Во-первых, мы применяем наш новый SVG к фону элемента списка и используем background-size, чтобы он соответствовал размеру каждого элемента списка.

Я также использую display: inline-block в элементах списка, чтобы фотографии складывались по экрану. Обычно это делает их более элегантными, чем плавающие элементы списка.

Нам также необходимо добавить отступы, чтобы фотография не полностью закрывала нашу рамку.

Нам также необходимо добавить отступы, чтобы фотография не полностью закрывала нашу рамку

Наш SVG легко адаптируется к любому изображению независимо от его размера или ориентации.

Наконец, я использую вращение CSS3, чтобы придать галерее ощущение рассеянности. Я не собираюсь разбирать код для этого здесь, но Фрэнк Фукс разработал эту идею в мае.

Вот результат ,

Как вы думаете?

Мне очень нравится этот подход. Сильные стороны SVG кажутся очевидными. Каждое появление SVG масштабируется, вращается и изменяется без какого-либо искажения или потери качества изображения. Размер файла на порядок меньше - измеряется в байтах, а не в килобайтах.

Также приятно иметь возможность регулировать размытие или непрозрачность с помощью нескольких ленивых нажатий клавиш.

Конечно, есть некоторые недостатки, но не слишком много.

В настоящее время IE9 прекрасно поддерживает SVG, но, к сожалению, нет фильтров SVG, поэтому наша тень выглядит четкой.

Неудивительно, что более ранние версии IE игнорировали SVG, но на самом деле это отсутствие поддержки свойства CSS3 фонового размера, которое является настоящей демонстрацией здесь. Масштабирование SVG - вот где настоящая сила. Возможно, вы сможете создать запасной вариант IE8 с фильтрами Microsoft. Удачи с этим. В любом случае, CSS3-градиенты, конечно, не ваш спаситель.

Единственным другим значимым браузером, не поддерживающим SVG, кажется любой Firefox до версии 4, и с переходом Mozilla на автоматические обновления это становится меньшей проблемой каждый день. Как ни странно, Firefox фактически прекрасно поддерживает SVG с 2008 года - только не в фонах CSS, где они так полезны. Я снова говорю, сумасшедший.

Во всяком случае, я надеюсь, что эта статья вызвала несколько идей о том, как вы могли бы включить некоторые сексуальные векторы в вашу работу. Если нет, то это должен был быть хотя бы хороший учебник по SVG.

Принеси эпоху SVG!

Похожие

Как нарисовать карту разума?
... как показано ниже: Относящиеся узлы Связанные узлы могут быть подключены через соединитель Link. Попробуем подключить узел Integration Testing и Testing: Daisy . Наведите указатель мыши на узел Integration Testing . Нажмите на ресурс To Link -> Node и перетащите на
Фон-клип, текст-тень и градиенты; Боже мой!
Недавно у меня было несколько дизайнов, где я смог поиграть с background-clip: текст в сочетании с текстовой тенью и градиентами, и я хотел поделиться своим опытом. Прежде чем мы зайдем слишком далеко, background-clip: text поддерживается не во всех браузерах. Я полагаю, что он все еще поддерживается только в браузерах Webkit, поэтому убедитесь, что у вас достаточно запасных вариантов. Демоверсии на этой странице также будут отображаться только со всеми
Как Уолтоны тратят свое состояние
Джим Уолтон, Алиса Уолтон и Роб Уолтон приветствуют ежегодное собрание акционеров Walmart в Фейетвилле, штат Арканзас. REUTERS / Рик Уилкинг Walmart акции выросли более чем на 10% в четверг на новостях о своем сильном
Как определить, является ли вирус на самом деле ложноположительным
... вы можете точно сказать, действительно ли загрузка безопасна? Ложное срабатывание - это ошибка, которая иногда случается - антивирус считает загрузку вредной, когда она действительно безопасна. Но злоумышленники могут попытаться заставить вас загрузить вредоносное ПО с этой гарантией. Используйте VirusTotal, чтобы получить больше мнений Если вы загружаете файл, и ваш антивирус запускается и сообщает вам, что файл является вредоносным, вероятно, это так. Если
Как применить пользовательские темы к Windows XP SP3
Росс Маккиллоп Настройка - это то, что мне очень нравится. Почему мы не можем использовать созданные пользователем темы в Windows из коробки? Бьет меня К счастью, есть способы, которые вы можете! То, что вам нужно, это то, что исправит UXtheme.dll, чтобы разрешить сторонние (не Microsoft) темы. Этот учебник проведет вас через установку, настройку и использование Uxtheme Multi-patcher 6.0
Как установить стек Apache, MySQL и PHP (FAMP) на FreeBSD 10.1
... как пользователь с привилегиями суперпользователя (т. Е. Ему разрешено использовать sudo или перейти к пользователю root). Шаг первый - установить Apache Веб-сервер Apache в настоящее время является самым популярным веб-сервером в мире, что делает его отличным выбором для размещения веб-сайта. Мы можем легко установить Apache, используя менеджер пакетов FreeBSD, pkg. Менеджер пакетов позволяет без проблем устанавливать большинство программ из репозитория,
Установите полный почтовый сервер с Postfix и веб-почтой в Debian 9
Из этого туториала вы узнаете, как установить и настроить полный почтовый сервер с Postfix в выпуске Debian 9. Также будет рассказано, как настроить почтовые ящики учетных записей с использованием Dovecot для получения и составления писем по протоколу IMAP . Пользователи будут использовать интерфейс Rainloop Webmail в качестве почтового агента для обработки почты. Требования
Создать классический винтажный фотоэффект в фотошопе
Фотографы часто стремятся к винтажному или ретро-образу на своих фотографиях, и хотя существуют бесконечные способы достижения винтажного эффекта, необходимо помнить о нескольких важных характеристиках.
Рейтинги и мнения
... вы могли заметить, я специализируюсь только на продуктах, которые используются в сервисе катания на лыжах и сноуборде. Я лыжник, бегун и бегун, я также катаюсь на SKKI Trikke, а также учусь кататься на сноуборде, поэтому эти дисциплины мне не чужды. В течение нескольких лет я занимаюсь ручным сервисом, тестирую инструменты, смазочные материалы и другие аксессуары (многие мои мнения можно найти в моем блоге. nartyserwis.pl и на многих форумах,
Отец говорит, что видео «Drone Flying Gun» не нарушило никаких законов
Отец 18-летнего мальчика, который построил беспилотник с прикрепленным пистолетом и разместил на YouTube видео с заголовком «летающий пистолет», говорит, что не нарушил никаких законов. На кадрах видно, что пистолет прикреплен к дрону, зависшему в нескольких футах от земли в лесистой местности. Похоже, что пистолет разряжается несколько раз, пока дрон находится в полете. В публикации 18-летний Остин Хауфут описывает устройство как «самодельный мультиротор с установленным на нем полуавтоматическим
10 советов, как сделать вас опытным пользователем Microsoft Excel
... как воспользоваться многочисленными функциями, которые она предлагает. Вот 10 популярных статей TechRepublic с советами, как стать опытным пользователем Microsoft Excel и получить максимальную отдачу от программы. Раскрывающиеся списки могут значительно облегчить ввод данных для бизнес-пользователей, но в Excel процесс их создания не совсем интуитивно понятен. Здесь писательница TechRepublic Сьюзен Харкинс объясняет, как использовать функцию проверки данных Excel для

Комментарии

Как вы думаете, почему сегодняшние герои CHANGE являются социальными предпринимателями?
Как вы думаете, почему сегодняшние герои CHANGE являются социальными предпринимателями? - Потому что нам нужны современные пионеры, люди, которые чувствительны к окружающей среде, в которой мы живем, и понимаем, как это влияет на наших детей. Потому что они осознают важность и ответственность внедрения ИЗМЕНЕНИЯ в этой среде для наших детей сейчас.
Но как вы начали?
Но как вы начали? Как включить внешний обмен? Как вы эффективно структурируете свои сайты? Как вы приглашаете внешних пользователей на ваш сайт? Как вы препятствуете внешним пользователям видеть информацию, которую вы не хотите, чтобы они видели? Как узнать, принял ли пользователь ваше приглашение? На все эти вопросы даются ответы в разных постах, посвященных сетям, но я не увидел ни одного поста, который бы суммировал все это. Хотя внешний общий доступ прост в настройке, если
У вас есть совершенно новый концертный концерт, что люди могут ожидать от этого акта и какова идея вашего костюма?
У вас есть совершенно новый концертный концерт, что люди могут ожидать от этого акта и какова идея вашего костюма? У меня всегда была идея придумать уникальный живой концерт. В Warface вы, естественно, ожидаете чего-то в «армейском» тренде, и вы можете легко отреагировать на это. Тем не менее, я хотел подождать, пока не будет готово больше треков, чтобы я мог слышать что-то новое для каждого живого выступления. Конечно, он должен был остаться уникальным. Ранее, чем планировалось,
Вы уверены, что находитесь на реальном сайте компании, а не фальшивый веб-сайт, созданный, чтобы заставить вас загружать вредоносные программы ?
Вы не так ли? СВЯЗАННЫЕ С: Новичок Geek: Как переустановить Windows на вашем компьютере Мы не совсем уверены, почему Microsoft сделала все возможное, чтобы затруднить просмотр ключей продукта для своего программного обеспечения, тем более что они хранятся прямо в реестре и могут быть прочитаны программным обеспечением, если не
Соберите все это вместе и что вы получите?
Соберите все это вместе и что вы получите? Ну, я не вижу Ubuntu, преодолевающего Windows на рабочем столе. Там слишком много пользователей Windows. Рабочий стол Linux никогда не догонит его , Хотя мой вопрос не в том, кто станет самым популярным десктопом. Это было "что в конечном итоге лучше для его изменения?" На этот вопрос есть только один ответ: Ubuntu - победитель.
Как бы вы пошли об этом?
Как бы вы пошли об этом? Reaction-test-renderer может помочь нам протестировать такие компоненты. Давайте посмотрим, как в следующем разделе! Тестирование компонентов React: неправильное тестирование (не тестируйте реализацию) Нам нужен компонент кнопки для нашего приложения. Кнопка должна изменить свой текст с «ПОДПИСАТЬСЯ НА ОСНОВНОЙ» на «ПРОДОЛЖИТЬ ПРОВЕРИТЬ» при нажатии. Давайте создадим новый тест в __tests __ / Button.spec.js:
Вы не так ли?
Вы не так ли? СВЯЗАННЫЕ С: Новичок Geek: Как переустановить Windows на вашем компьютере Мы не совсем уверены, почему Microsoft сделала все возможное, чтобы затруднить просмотр ключей продукта для своего программного обеспечения, тем более что они хранятся прямо в реестре и могут быть прочитаны программным обеспечением, если не
Если вы уже пробовали это, что вам понравилось больше всего и меньше всего об этом?
Если вы уже пробовали это, что вам понравилось больше всего и меньше всего об этом? Дайте нам знать, что вы думаете в комментариях. Узнайте больше о: Расширения браузера , Microsoft Edge , Windows 10 ,
Что такое DNS?
Что такое DNS? DNS, который обозначает систему доменных имен , является интернет-службой, которая переводит доменные имена в IP-адреса. Например, когда вы посещаете KeyCDN.com, он должен искать соответствующий IP-адрес для этого имени хоста за кулисами. Этот запрос выполняется сервером доменных имен (DNS-сервером) или серверами поблизости, которым назначена ответственность за это имя хоста. Вы можете думать о DNS-сервере как о телефонной книге для Интернета.
Как вы себя чувствуете после и до спорта?
Как вы себя чувствуете после и до спорта? Помогает ли спорт снизить уровень стресса или вы чувствуете, что испытываете большее давление, например, в определенные часы тренировок? Насколько велика ваша потребность в упражнениях и сколько веселья вы имеете? Особенно в спорте важно уделять внимание собственному телу и делать то, что хорошо для вас. Слишком много тренировок или одержимость заботой о своей физической форме делает вас больными, а не полезными для здоровья.
Но что, если у вас есть другие папки, которые вы хотите автоматически синхронизировать с этой учетной записью?
Но что, если у вас есть другие папки, которые вы хотите автоматически синхронизировать с этой учетной записью? К счастью, такая настройка не только возможна, но и довольно проста. Я собираюсь показать вам, как это сделать на Essential PH-1 под управлением Android 8.1. Настройка должна работать практически на любом устройстве Android, если она связана с вашей учетной записью Google. Что вам нужно Помимо синхронизации этого устройства с вашей учетной записью Drive, вам

Хорошо, так какова альтернатива?
Шаг назад: что такое SVG?
Как вы делаете SVG?
Вау, это выглядит весело, а?
Хорошо, так какова альтернатива?
Может быть, мы смотрим на это неправильно?
Шаг назад: что такое SVG?
Это новый Фольксвагон, верно?
Как вы делаете SVG?
Как насчет радиальных градиентов?