Готовые градиенты css. Градиенты в CSS. Пример radial-gradient() радиальный градиент
CloudFlare это сервис, который позволяет сделать Ваш сайт быстрее, за счет организации кеширования и защищённей, за счет фильтрации запросов, похожих на атаки. При этом никаких особых изменений в сам проект вносить не нужно. Всё достигается добавлением адреса сайта в сервис и изменением записи NS для вашего домена. Вот что из этого получилось у меня.
На первом этапе сайт добавляется в сервис и происходит его первичное сканирование. Как все это делается я описывать не буду. Там все интуитивно понятно и даже можно включить корявенький русский, видимо автоматический перевод. Сервис считывает и запоминает текущие нэйм сервера, и предлагает заменить их на предложенные. После такого изменения, спустя некоторое время, требуемое для обновления DNS, ваши пользователи фактически попадают не к вашему хостеру, а на этот сервис. Уже он организует дальнейшую работу. По отзывам хеширование можно настроить даже так, что физически сайт будет лежать, а пользователям при этом некоторое время будут отдаваться его копия. Попутно в настройках выбирается, что обрабатывать. Только ли запросы по http или еще и запросы по протоколу почты, обрабатывать запросы с www. или нет и т.д. Выбирается, что нужно кэшировать – страницы, стили, скрипты, картинки.
Очень много функций предоставляется бесплатно. Интерфейс и сама идея выглядят притягательно.
Конечно все это захотелось тут же попробовать, что я и сделал:)
Первый возможный минус – хоть и обещают распределенные сервера, находятся они зарубежом. Если у Вас быстрый отечественный хостинг, нужно будет смотреть, не стало ли время отклика значительно хуже, чем было. У меня хостинг зарубежный, поэтому этот фактор меня не волновал.
Второй – искажаются данные о посетителях. Например, сохраненный для комментария IP адрес может быть не реальный, а самого CloudFlare. Не совсем корректно могут работать различные скрипты учета посетителей. Это впрочем можно обойти, найти в справке то, что нужно добавить в php код сайта. Но все же это уже заботы и работы.
Третий — включал и отключал кеширование в сервисе (естественно выключив кэширование в браузере) и отслеживал скорость загрузки сайта, в панели разработчика браузера. Для пары добавленных сайтов честно говоря так и не увидел разницы в скорости загрузки. Тоже самое показал и онлайн сервис Google Page Speed.
Четвертая особенность сразила наповал. В описании конечно попадалось, что нехорошим пользователям, спамерам, будет предложено ввести капчу. Каково же было удивление, когда зайдя на собственный сайт вместо него я увидел левую страницу и предложение ввести код с рекапчи:) Дело в том, что зашел я с серого IP одного крупного городского провайдера. Из за очень большого числа пользователей на одном IP у некоторых из которых наверняка есть и вирусня поддерживающая ботнеты, система признала этого пользователя недобропорядочным. Кстати, для этого адреса иногда и поиск яндекса с гуглом вместо резултата поиска, предлагают ввести код подтверждения, «чтобы убедится, что Вы не робот». Теперь представим, что такой же пользователь, который знать не знает серый у него IP или белый, переходит на сайт по ссылке из поисковика. Вместо русского текста и ожидаемой информации он видит нечто, на иностранном языке и предложение вводить цифры. По-моему закроет сайт и все. Избавится от капчи мне удалось после отключения системы безопасности в CloudFlare. Хорошо, что настройки применяются сразу же.
На этом желание экспериментировать пропало. Если на сайте нет постоянных посетителей, основная аудитория — пользователи из поисковиков, обратной связи и сообщений о неисправностях можно не ждать, просто увидеть падение посещаемости спустя некоторое время.
У меня сложилось мнение – что для небольших и средних проектов, если хостинг вытягивает, использовать CloudFlare и подобные сервисы однозначно не нужно. Проблем, по моему, больше чем плюсов. Для больших проектов, когда от хостера идут жалобы на большую нагрузку, атаки, предложения перейти на выделенный сервер (или уже на нем) нужно в течение некоторого времени, до и после подключения, анализировать загрузку сервера по таким параметрам как скорость ответа, затрачиваемое процессорное время, нагрузка на базу. Использовать сервис, если есть реальное улучшение в конкретных цифрах со стороны хостинга. Так после моего эксперимента в статистике CloudFlare красуется Nое количество сэкономленного трафика и число блокированных входов на сайт. Но какой в этом толк, если прироста по времени нет. Пользователю трафик все равно грузить, не с одного места так с другого. А отраженные атаки – мои собственные попытки входа на сайт:) Разумеется это мой личный опыт и отзыв о CloudFlare. Если у кого то есть примеры удачного использования, желательно с конкретными цифрами, будет очень интересно их услышать.
к.э.н. Лавлинский Николай Евгеньевич, технический директор ООО «Метод Лаб»
Каждый владелец сайта хочет, чтобы он работал быстро. Это не прихоть технических специалистов, а реальная потребность бизнеса. Скорость напрямую влияет на экономические показатели: конверсию, вовлечённость, отказы, подписки, процент возвратов.
Конечно, хочется иметь волшебную кнопку, нажав которую мы получаем быстрый сайт сразу и без проблем. Именно такой кнопкой называет себя сервис Cloudflare. Более того, вы получаете не только скорость, но и безопасность «из коробки». Давайте посмотрим, что нам предлагает Cloudflare с точки зрения скорости сайтов.
Что такое Cloudflare
Cloudflare - это распределённая сеть (CDN), обладающая набором услуг по ускорению сайтов и безопасности. Сеть имеет более 100 точек присутствия по миру и более 15 Тбит суммарной пропускной способности.
Принцип работы аналогичен другим CDN - все запросы пользователей проксируются через точки (сервера) Cloudflare и либо обслуживаются напрямую из сети (если ресурс закеширован), либо производится запрос на исходный сервер (где работает ваш сайт) и затем отправляется ответ пользователю.
Так как сайт обслуживается через сервера Cloudflare, есть возможность сохранять и изменять копии статического и динамического контента сайта.
Ускорение сайтов за счет CDN
Как использование Cloudflare и других CDN поможет нам ускорить сайт?
Ускорение сайта в этом случае можно разделить две части: сетевые и контентные оптимизации.
Сетевые оптимизации заключаются в сокращении задержек между сервером и пользователем за счет использования географически распределённой сети и маршрутизации трафика через ближайший узел. Кроме того, узлы CDN как правило специально настроены на высокую скорость отдачи контента: TCP/IP тюнинг, быстрый TLS, поддержка современных протоколов, быстрое подключение к сети, скоростные диски и т. д.
Контентные оптимизации могут включать в себя: оптимизацию изображений, сжатие текстовых ресурсов, кеширующие заголовки, минификацию кода, отложенную загрузку элементов. Часть из этих оптимизаций прозрачны и не требуют внимания со стороны разработчиков (например, сжатие), другие - могут приводить к ошибкам в работе сайта (например, асинхронная загрузка JS-кода) и требуют осторожности в применении.
Ускорение сайтов в Cloudflare
При подключении к Cloudflare у вас есть выбор тарифных планов: бесплатный, Pro ($20 в месяц), Business ($200 в месяц) или Enterprise (индивидуальный).
Ускорение нам обещают на планах от Pro и выше. Бесплатный план предполагает только использование CDN, без возможностей по оптимизации контента.
В план Pro включены почти все возможности по ускорению: оптимизация изображений (Polish и Mirage), кеширование контента, асинхронная загрузка JS (Rocket loader). Не хватает только Railgun (оптимизация соединения между вашим сервером и сетью Cloudflare), время минимального кеширования 1 час (в Business - 30 минут).
Однако есть важное уточнение, которое не указано напрямую в тарифных планах, но рассмотрено в форуме поддержки: на тарифных планах ниже Business пользователь обслуживается не с ближайшего хоста Cloudflare, а с наиболее дешевого для Cloudflare. Это значит, что весь смысл использования CDN теряется.
Для российских ресурсов возможности CDN Cloudflare на сегодня представляют собой единственную точку присутствия в Москве. Так что, если вы используете хостинг в Москве, то сокращения дистанции до пользователя скорее всего не будет.
Для кого ускорение сайта с Cloudflare будет эффективно?
Мы рассмотрели, какие возможности по ускорению сайта могут предоставлять CDN, какие реализованы в Cloudflare и на каких тарифных планах. Какого эффекта можно ожидать от такого ускорения и кому оно будет действительно полезно. А для наглядности мы посмотрим на альтернативные способы решения проблем скорости и их трудоёмкость.
Сетевые оптимизации . Основная оптимизация - географически распределённая сеть для снижения задержек. В реализации Cloudflare имеет смысл только при наличии международной аудитории сайта и использования планов, начиная с Business. Альтернативные решения: собственная реализация распределённой системы (крайне трудоёмко), использование CDN с большим количеством точек в России (низкая трудоёмкость), раздача контента с собственного оптимизированного сервера (средняя трудоёмкость).
Контентные оптимизации . Оптимизации картинок, сжатие текста, кеширование контента может быть полезно для многих сайтов, которые не внедряют эти технологии на своей стороне. Наиболее полезной будет функция оптимизации изображений, остальные оптимизации гораздо проще во внедрении. Альтернативные решения: настройка сервера (сжатие) - низкая трудоёмокость, оптимизация изображений сторонними сервисами (средняя трудоёмкость), самостоятельная оптимизация (высокая трудоёмкость).
Оптимизация процесса рендеринга . Этот тип оптимизации отсутствует в Cloudflare, хотя может оказывать значительное влияние на реальную скорость сайта. К этому типу относятся оптимизации размещения CSS, JS-кода, отложенная загрузка элементов, оптимизация приоритетов элементов страницы. Дело в том, что этот процесс сложно автоматизируется и требует ручной работы. Трудоёмкость этой работы может варьироваться от средней до высокой, в зависимости от проекта.
Ускорение генерации HTML на сервере . Этот аспект также не учитывается Cloudflare, так как требует вмешательства в серверное окружение. Частичное решение этой проблемы - кеширование динамического контента (страниц) легко реализуемо как с Cloudflare, так и без. Однако для серьезных проектов полное кеширование динамики невозможно. При этом скорость генерации HTML является ограничивающим фактором для всего сайта. Если страница отдаётся с сервера за 10 секунд, уже неважно, какой CDN используется и как оптимизирован контент - пользователь уже закрыл вкладку браузера.
Заключение
Итак, мы рассмотрели возможности применения сервиса Cloudflare для ускорения сайтов. Краткий вывод: он может быть полезен для сайтов с распределённой аудиторией за пределами России, у которых нет проблем с серверной скоростью (время генерации страницы).
Также не стоит забывать о возможных рисках использования Cloudflare: возможность получить заблокированный в России IP-адрес, ограничения тарифных планов (когда вас настоятельно попросят перейти на более старший) и практику совмещённых SSL-сертификатов.
К сожалению, пока не существует единой кнопки «сделать сайт быстрым», несмотря на все маркетинговые заявления.
Куча возможностей, помощь в переносе, и многое другое.
Хотелось бы начать с того, что данным сервисом можно пользоваться бесплатно. В CloudFlare предусмотрены PRO возможности, но лично мне эти возможности не нужны. Стоимость PRO довольна высока - $20
в месяц.
Что же предлагает нам CloudFlare?
- Отличная система переноса - сервис анализирует ваши текущие настройки и полностью копирует их к себе.
- Защита сайта и его кеширование на уровне DNS.
- Своя собственная система статистики.
- Множество приложениий для интеграции.
Система переноса
Я могу с уверенностью заявить, что с системой переноса справится даже ребенок. Вы просто указываете адрес своего сайта и нажимаете большую зеленую кнопку. В течение минуты ваш сайт анализируется и затем на странице отображаются все предыдущие настройки DNS. Также предлагается изменить/добавить некоторые значения, если что-то вдруг перенеслось неправильно. В чем плюс? Все очень просто, ваш сайт перенесется и не будет простаивать. Ваши пользователи даже не заметят каких-либо изменений.Защита сайта
В настройках имеется два пункта: Basic Security Level и Advanced Security (доступно только для PRO). Basic Security ищет наиболее угрожающих (?) посетителей. Какими алгоритмами и методами - я так и не смог понять, но никто из пользователей не жаловался, что их посчитали «угрожающими». С Advanced Security все понятнее - она защищает от возможных SQL-Injection и XSS атак с помощью анализа URL. Если вы не уверены в безопасности своих сайтов, то возможно имеет смысл воспользоваться этой системой (хотя конечно лучше пересмотреть код скриптов). Кстати, система может добавить переменную для определения локации: HTTP_CF_IPCOUNTRY. Вызвать ее можно из Perl: $country_code = $ENV{"HTTP_CF_IPCOUNTRY"}; или из PHP: $country_code = $_SERVER["HTTP_CF_IPCOUNTRY"];Кеширование сайта
Система кеширования позволяет в автоматическом режиме кешировать большинство статических ресурсов, таких как css-файлы, js-скрипты и картинки. Существует два типа кеширования - Basic и Agressive, второй считает example.com/pic.jpg и example.com/pic.jpg?foo=bar разными картинками. Существует возможность автоматической минимизации - система распространяется на JS, CSS и HTML файлы.Статистика
Своя статистика - довольно мощный инструмент. Существует некоторое ограничение - в бесплатных аккаунтах она обновляется раз в 24 часа, в PRO - раз в 15 минут. Ведется анализ как и посетителей, так и поисковых ботов. Также в ней отображается сколько запросов и какое количество трафика помог сжать CloudFlare. Не забыли и о графиках, когда не хочется выполнять анализ то можно просто взглянуть на красивый график и увидеть развитие своего сайта.Интеграция приложений
Среди приложений для интеграции доступно множество сторонних сервисов статистики - например Clicky, которая анализирует огромное количество параметров, среди которых время посещения, переходы с поисковиков и многое другое. Доступны системы мониторинга сайтов, например Monitis и Pingdom. Уведомления по SMS, Twitter или по эл. почте теперь настраиваются в течение 5 минут. На мой взгляд, самая полезная вещь среди этих приложений - сервис CodeGuard. Он полностью «бекапит» ваш сайт и если он не доступен, то показывает его сохраненную копию. Пользоваться данным сервисом можно бесплатно, если ваш сайт занимает меньше 1 ГБ. Кстати, именно на CloudFlare хостился сайт небезызвестных LulzSec, и именно CodeGuard показывал страницы, когда сервер LulzSec упал.Заключение
CloudFlare - действительно очень удобный сервис. Согласитесь, защитить сайт, забыть о кешировании, установить статистику и не тратить нервы, если сайт недоступен, просто перенеся сайт на другие DNS - это здорово. А если почти всеми этими возможностями можно пользоваться бесплатно, то такой сервис - просто сказка:)P.S. : Во избежание глупых обвинений в том, что пост проплачен, я сразу говорю, что не имею никакого отношения к сайту CloudFlare и комании CloudFlare, Inc. (US).
UPD: Заголовок действительно был некорректен, это не DNS-хостинг, а CDN-прокси, пропускающая через себя трафик.
Помимо того, что сервис CloudFlare.com позволяет защитить сайт от DoS/DDoS-атак, его также можно использовать для настройки DNS-записей домена. В статье рассказано о том, как начать использовать DNS-хостинг CloudFlare, и представлены этапы настройки учетной записи в CloudFlare в случае бесплатного тарифного плана.
Важно! Перед тем как воспользоваться сервисом CloudFlare, вам необходимо предварительно . Ищете, где также ? Наши предложения вас порадуют: вы сможете одновременно и сэкономить при этом.
Регистрация
На сайте CloudFlare.com нажмите «Sign up» для перехода к форме регистрации.
Для осуществления регистрации укажите на появившейся форме e-mail и и пароль в соответствующих полях, а также отметьте галочкой, что согласны с правилами использования сервиса. После этого нажмите «Create Account», чтобы создать учетную запись.
Добавление домена
Введите имя домена и нажмите на кнопку «Scan DNS records».
После этого будет запущен автоматический процесс сканирования ДНС-записей домена, который занимает около минуты. Как только он будет завершен, появится кнопка «Continue», на которую необходимо нажать, чтобы перейти к следующему шагу.
В результате сканирования будет предоставлен список ДНС-записей из существующего файла зоны домена.
Проверьте наличие всех необходимых ДНС-записей. Добавьте недостающие, указав тип ДНС-записи, имя домена или поддомена, ее значение, а также TTL (срок действия) и нажмите «Add record». Если добавляете DNS-запись для поддомена, достаточно указать часть имени поддомена без основного доменного имени. Например, А-запись для поддомена my.vpstestdomain.tk будет выглядеть так:
Обратите внимание, что при добавлении DNS-записи для всех поддоменов (в качестве имени указывается знак *), соединение для поддоменов не будет защищено сервисом CloudFlare. Для обеспечения такой защиты потребуется добавить DNS-запись (типа «А») для каждого поддомена отдельно. Соединение с сайтом будет происходить посредством CloudFlare, если справа от соответствующей записи расположено оранжевое облако, в то время как при наличии серого облака подключение будет осуществляться напрямую, в обход CloudFlare. Переключается статус нажатием на значке облака.
Редактировать DNS-записи можно, просто нажимая на соответствующем значении и вводя необходимое. После этого новое значение будет автоматически сохранено. Для удаления записи достаточно нажать значок крестика справа от нее.
После конфигурирования всех необходимых DNS-записей нажимаем кнопку «Continue».
Выбор параметров
После этого выбираем бесплатный тарифный план и нажимаем «Continue».
Направление домена
Последним шагом направления домена на CloudFlare является указание предложенных публичных неймсерверов в Панели доменного регистратора.
Изменив неймсерверы для домена, нажмите «Continue». Обратите внимание, что обновление DNS-записей может занять до 24 часов. Как результат - домен будет направлен на CloudFlare не сразу.
Когда DNS-записи будут обновлены, статус домена будет изменен на «Active».
Теперь управление файлом зоны домена вы сможете осуществлять с помощью CloudFlare, а также получите возможность базовой защиты сайта от DoS/DDoS-атак.
- Перевод
Работа над переводом о проекте singlediv.com показала, что некоторые инструменты CSS имеют более широкое применение, чем я привыкла думать. Но для того чтобы суметь найти это применение, необходимо четко понимать особенности свойства. Ярким примером стал linear-gradient, который Линн Фишер виртуозно использовала в своих работах.
Хотите сделать симпатичный градиентный фон на своем сайте? background-image: linear-gradient(red, blue); готово! Да, это немного скучно. Поэтому, если вы хотите чего-то большего, рекомендую вам эту с советами по css и MDN страницу. Вы еще здесь? Тогда давайте рассмотрим некоторые моменты, как на самом деле работают линейные градиенты. Для начала, давайте вспомним синтаксис, который можно использовать в функции линейного градиента:
linear-gradient ([от <угла> | до <стороны-или-угла>]?,
Функция принимает опциональный первый аргумент, который определяет угол градиента, и который можно выразить с помощью единицы измерения (градус, радиус, град, оборот) или в виде ключевого слова (стороны или угла.
После этого функция принимает список цветов.
Поле градиента
У градиентного изображения нет размеров, оно бесконечно в отличие от других фоновых изображений. Видимые размеры ему придает поле градиента, т.е. область, в которой оно отображается.Как правило, когда вы применяете фоновое изображение в виде линейного градиента к элементу DOM, этой областью является рамка границ элемента (которая является той самой областью, в которой отображается фоновый цвет).
При этом если вы используете еще и CSS-свойство background-size (размер фона) и устанавливаете его, скажем, на 200px * 200px, тогда поле градиента будет иметь этот размер и будет, по умолчанию, размещаться в левом верхнем углу DOM-элемента, если только вы также не установите background-position (положение фона).
Поэтому, читая следующие разделы, просто помните, что поле градиента не всегда расположено так же и имеет такие же размеры, как и DOM-элемент, к которому вы применяете этот градиент.
Линия градиента
В поле градиента линия, которая проходит через центр и вдоль которой распределяются цвета, называется линией градиента. Эту линию можно описать проще в ходе разъяснения угол градиента, поэтому об этом более подробно следующем разделе.Угол градиента
Вполне очевидно, что угол линейного градиента используется для определения того, в каком направлении пойдет градиент. Но давайте рассмотрим этот аспект подробнее.Если С – это центральная точка поля градиента, тогда А – это угол между вертикальной линией, проходящей через С, и линией градиента, которая также проходит через С, и вдоль которой распределяются стоп-цвета градиента.
Этот угол можно определить двумя способами:
С помощью одного из ключевых слов: to top (вверх), to bottom (вниз), to left (влево), to right (вправо), to top right (вправо вверх), to top left (влево вверх), to bottom right (вправо вниз), to bottom left (влево вниз);
Или путем определения угла с числом и единицей измерения, например 45deg (45 градусов), 1turn (1 оборот);
Если угол не указывается, то по умолчанию он направляется вниз (то есть это 180 градусов или 0,5 оборота):
На этом и на следующих изображениях поле градиента ограничено прямоугольником, а линия градиента – это жирная серая линия, которая проходит через центр, и вдоль которой отображаются цвета.
В вышеприведенном примере угол не указан, поэтому градиент от белого к красному двигается сверху вниз, что соответствует ключевому слову to bottom (вниз), как показано ниже:
И, как показано на 2 следующих изображениях, to top (вверх) соответствует углу в ноль градусов:
Еще один важный момент, который стоит учитывать, используя ключевые слова угла - что to top right (вправо вверх), например, (или любое другое ключевое слово угла) зависит от размеров поля градиента.
Логика заключается в том, что если бы вы хотели сделать градиент от красного к синему в направлении верхнего правого угла элемента, тогда такой элемент должен быть именно синим в верхнем правом углу, а фиолетовый цвет в середине градиента должен формироваться вокруг линии, которая проходит из верхнего левого в нижний правый угол. Вот как это выглядит на изображении:
Поэтому to top right (вправо вверх) не означает, что линия градиента проходит через правый верхний угол, и это даже не значит, что угол градиента равен 45 градусам!
Давайте посмотрим на то, как перемещается линия градиента при изменении угла, с помощью следующей анимации:
На этой анимации угол наклоняется от 0 до 360 градусов с шагом в 10 градусов. Низкое разрешение GIF даже позволяет лучше рассмотреть, как различные цвета отображаются в виде «линий», которые всегда перпендикулярны линии градиента.
Давайте вспомним, что мы знаем об углах градиента:
Угол измеряется между линией градиента и линией, которая выходит из центра поля градиента и движется вверх.
Поэтому 0 градусов означает вверх.
Стандартное значение угла, если оно не указывается, это вниз, что равно 180 градусам.
Ключевые слова угла зависят от размеров поля градиента.
Длина линии градиента
Прежде чем мы сможем увидеть, как распределяются цвета вдоль линии градиента, нам нужно объяснить один момент. Вы, возможно, заметили в предыдущей анимации, что цвета иногда располагаются за пределами поля градиента, что может с первого взгляда выглядеть немного странным, но это логично, если вы знаете причину.Посмотрите на пример:
Нам нужен градиент от красного к синему с углом 45 градусов, и, ввиду соотношения сторон поля градиента, линия градиента не может проходить через правый верхний угол.
Но браузер хочет (то есть, спецификации заставляют его) сделать правый верхний угол чисто синим. Если бы мы сделали так, чтобы линия градиента начиналась и заканчивалась на краях поля, тогда бы синий цвет занял большую часть поля, а градиент бы так не расплывался.
Поэтому, чтобы это сделать, линия градиента иногда должна выходить за рамки поля градиента. При этом довольно легко узнать, где она начинается, и где заканчивается. Просто начертите линию, которая проходит через ближайший угол, и которая перпендикулярна линии градиента. Точка, где эта линия пересекает линию градиента, и есть местом начала/конца.
Фактически, если вы задает ширину поля градиента W, высоту H, и угол градиента, тогда длина линии градиента составляет:
Abs(W * sin(A)) + abs(H * cos(A))
Цвета
Цвета представляют собой список, разделенный запятыми, в котором каждый элемент можно определить следующим образом:<цвет> [<процентное соотношение> | <длина>]?
Поэтому необязательно указывать, где должны размещаться цвета на линии градиента. Например:
Ни один из цветов не имеет своего положения, поэтому браузер сам определил их позиции.
На самом простом примере только с 2 цветами, цвет 1 будет размещаться на 0% (в начале линии градиента), а цвет 2 – на 100% (в конце линии градиента).
Потом, если вы добавите третий цвет, цвет 1 у вас все равно останется на 0%, цвет 2 будет на 50%, а цвет 3 – на 100%, и так далее.
В вышеприведенном примере было задано 5 стоп-цветов, и браузер рассчитал их относительное положение как 0%, 25%, 50%, 75%, 100%. Причиной тому является равномерное распределение вдоль поля градиента.
Позицию цвета можно выразить либо с помощью процентного соотношения (по отношению к размеру линии градиента) или в виде длины CSS (где действует любая единица измерения CSS).
Вот пример:
Как вы видите, каждый из 5 стоп-цветов имеет свое положение, заданное в пикселях. Эти положения рассчитываются от начала линии градиента.
Используя такие позиции, вы можете получить несколько интересных эффектов. Например, вы можете использовать градиент, чтобы не рисовать градиент как таковой, а оставить несколько цветов:
На изображении выше 7 цветов, и они установлены таким образом, чтобы следующий цвет начинался в точно той же позиции, что и последний, что означает, что браузеру не нужно заполнять пространство между двумя стоп-цветами градиентом.
Конечно, это все мило и забавно, но что произойдет, если вы смешаете позиционированные цвета с непозиционированными? Тогда вы заставите браузер работать больше и попросите его автоматически распределять цвета, для которых вы не указали позицию:
В этом простом примере второй цвет (оранжевый) не имеет позиции, поэтому браузер сам определяет ее и находит подходящее место между ранее заданным и следующим цветом. Здесь это очень просто, так как непосредственные соседи второго цвета имеют свою позицию, но если позиции есть только у некоторых цветов, или если предыдущие или следующие цвета не имеют позиции, все усложняется.
Давайте рассмотрим несколько примеров:
На примере выше только третий цвет (желтый) позиционирован на 30%. Поэтому, чтобы лучше распределить все остальные, первый размещается на 0%, последний – на 100%, а остальные цвета распределяются в промежутке (так, что оранжевый заканчивается непосредственно между 0% и 30%, а красный – между 30% и 100%).
На примере выше первый и последний цвета позиционированы, поэтому остальные равномерно распределяются между этими двумя.
Конечно, было бы слишком просто, если бы 0% и 100% были жесткими рамками, за которые нельзя выходить. Но как видно из предыдущего примера, последний цвет расположен на 120%, и поэтому все остальные цвета должны распределяться соответствующим образом относительно данной позиции (начальной точкой по умолчанию в этом случае остается 0%).
И если вы хотите заставить свой браузер работать еще больше, почему бы не указать порядок позиций?
На самом деле цвета должны иметь порядок, но ничто не запрещает вам этого не делать, и ничего ужасного не произойдет, если вы этого не сделаете. Ваш браузер просто все исправит, как показано ниже:
Начнем с первого цвета (красного), расположенного на 30%. Дальше второй цвет расположен на 10%, что уже неправильно, так как, как сказано выше, цвета должны указываться по возрастанию позиции. Поэтому здесь браузер исправляет позицию второго цвета и устанавливает его в то же положение, что и у предыдущего цвета (30%). Далее идет третий цвет (желтый), расположенный на 60%, что правильно, но за ним следует четвертый (синий) на 40%. Опять же позиция корректируется и устанавливается на то же значение, что и предыдущего позиционированного цвета.
В конечном итоге, как показано на примере выше, последний цвет (синий) позиционируется неправильно и браузер делает его позицию такой же, как и у предыдущего цвета, который в данном случае не является ни его непосредственным соседом (желтым), ни соседом цвета, который стоит перед ним (оранжевым), поэтому он должен вернуться к первом цвету (красному). Таким образом, все цвета между красным и синим установлены в положение 30% и поэтому невидимы.
Инструменты
Все скриншоты в этой статье взяты из простого инструмента , который я сделал на codepen, и который позволяет вводить функцию линейного градиента и видеть поле градиента, линию градиента, угол, а также информацию о цветах поверх элемента.В инструменте есть все виды багов и ограничений (см. комментарии в javascript), поэтому не ожидайте от него многого.
Теги:
- CSS
- linear-gradient