Описание тега css-gradients

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

Можно ли использовать конический градиент со встроенным стилем?

Я просто играю с CSS. Я вообще не профессионал, поэтому прошу прощения, если это глупый / очевидный вопрос. Проблема: платформа блогов, для которой я разрабатываю, запрещает любые внешние таблицы стилей, а также использование <style> тег, так …
03 авг '17 в 00:50
1 ответ

Как установить цвет сетки chart.js для линейного графика

Я хочу изменить цвет сетки моего линейного графика, используя поле параметров, но я не знаю, с чего начать. Сначала я попытался изменить цвета фона холста с помощью градиента, но результаты оказались не очень хорошими. canvas{ background:linear-grad…
29 мар '17 в 17:32
2 ответа

CSS градиенты и непрозрачность

Ниже приведено несколько CSS, которые используются для создания шаблона радиального градиента. Мой вопрос: возможно ли добавить непрозрачность к цветам, придавая им призрачный эффект? Можно ли использовать RGBa вместо Purple?? Я попытался выше, но н…
02 июл '15 в 13:46
1 ответ

Изменение центральной точки радиального градиента в CSS

Мне нужно сделать несколько градиентов, как показано ниже: Теперь посмотрим, чем отличается центр серого / белого градиента, в некоторых случаях он идет от центра, для некоторых от левого центра, для некоторых от нижнего центра. Я использовал ЭТОТ и…
27 апр '16 в 02:42
2 ответа

Линейный градиент и url-изображение для браузера mobile?

Я хотел бы иметь изображение в качестве фона, а также линейный градиент CSS: background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%); У меня нет проблем с настольным браузером (Fi…
5 ответов

Гладкие CSS-градиенты

Я учусь использовать CSS градиенты. Моя проблема с градиентами сверху вниз. Вы можете просто увидеть "остановки" в изменении цвета. Это мой код CSS #header { width:1000px; height:250px; background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); bac…
31 окт '12 в 04:35
2 ответа

Манипулирование повторным линейным градиентом

Я хочу воссоздать шаблон линий, аналогичный веб-сайту бренда Uber: https://brand.uber.com/ в частности повторяющиеся линии, которые вы можете видеть на заднем плане: http://prntscr.com/etius6 чтобы сделать это, я подумал об использовании повторяющег…
1 ответ

Как изменить цвет текста слева направо вместе с фоном?

У меня есть элемент, который при наведении меняет цвет фона постепенно слева направо. Однако я хотел изменить не только цвет фона, но и цвет текста, точно в то же время / темп. Как мне этого добиться? Это мой соответствующий CSS: .left-to-right { co…
26 янв '16 в 13:19
1 ответ

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

Я работаю над загрузочной веб-страницей, и в моем файле CSS у меня есть следующий код: body { height: 100%; background: #3a7bd5; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari…
14 сен '16 в 13:06
1 ответ

CSS радиальный градиент для Safari не работает

Когда я использую этот фрагмент в Chrome, IE и Firefox, он работает отлично! Но на Safari это не работает. Эта проблема происходит: .circle-red { border: 2px solid; border-radius: 51%; width: 40px; height: 40px; background: radial-gradient(ellipse a…
02 фев '16 в 17:23
1 ответ

Проблема с линейным градиентом на текст SVG

Я пытаюсь поместить линейный градиент в текст SVG, но я не уверен, как указать цвет заливки в текстовом классе. Узнав, как это сделать, я нашел пример в Интернете, поэтому использую его, но там, где я указываю цвет заливки для текста (в классе sfp2,…
16 сен '18 в 17:27
1 ответ

Как получить эффект диагонального линейного градиента несколько раз?

Изображение ниже, имеет прозрачные диагональные линии. Как получить эффект. Я попытался использовать следующий код - для двух цветов. https://codepen.io/PositionRelativ/pen/Ichrg Но как получить несколько раз? * { box-sizing: border-box } body { mar…
13 фев '19 в 03:35
1 ответ

Как заставить радиальные градиенты работать в Safari?

Я использую радиальные градиенты на новом сайте, который я создаю, но цвета отображаются в Safari по-разному (намного темнее) на рабочем столе. Есть ли лучший кросс-браузерный синтаксис для использования? Я пробовал разные префиксы, но это не решило…
16 янв '19 в 10:43
1 ответ

CSS3 радиальный градиент

Мне нужно знать, возможно ли это вообще. "Творческий" отдел фотошопа придумал это изображение, и до того, как оно стало градиентным, от 1 до 5 цветов. Они все еще делают это, но теперь они как белый круг на вершине. Как бы я вообще смог сделать это?…
14 окт '16 в 19:12
2 ответа

CSS3 градиенты не работают ни в одном браузере

Я изучал интернет в течение 2 дней и не смог найти ответ на свою проблему: линейный градиент CSS не работает ни в моем коде, ни в любом браузере. Я видел градиенты в скрипках, которые работают, и на других сайтах, которые работают. Я даже пытался ск…
21 апр '16 в 14:47
1 ответ

Как совместить CSS линейный градиент с изображениями?

У меня слева градиент css, а слева слайдер с изображениями. Как я могу объединить оба, чтобы изображения справа приняли форму, как на изображениях ниже? ОБНОВИТЬ HTML <div class="row shape-background"> </div> CSS .shape-background { text…
16 сен '17 в 10:23
3 ответа

CSS3 градиент и центрированный div стали адаптивными

Как мне сделать это отзывчивым? Я хотел бы, чтобы градиент и текст изменяли размеры и оставались по центру при изменении размера экрана. Прямо сейчас, градиент будет повторяться время от времени, и шрифт остается тем же. Я хочу, чтобы первый раздел …
30 окт '17 в 20:44
0 ответов

Почему резкие переходы градиента размыты в Firefox?

Вот проблема, с которой я сталкиваюсь: Chrome Firefox. Я чувствую, что должен быть способ создавать резкие четкие переходы с градиентами, и это есть. Размещая два двойных цветовых узла на расстоянии нескольких пикселей, а затем уникальный цветовой у…
3 ответа

Фон неровный

Я ищу эффект фона, как это (в чистом CSS), как я могу это сделать? (увеличенное изображение) Код: html, body { height:100%; background-color:#3D3D3D; display:flex; } div { height: 100px; width:100px; margin:10px auto; background-image: linear-gradie…
02 авг '17 в 14:04
1 ответ

CSS сохранить форму / размер диагонального фонового изображения на текст

Вы можете увидеть, что я пытаюсь реализовать здесь: http://jsfiddle.net/j1234cl/e8nxrnw4/ HTML: <!doctype html> <html> <head> <meta charset="utf-8"> <link rel='stylesheet' id='twentyfourteen-style-css' href="style.css" typ…
27 янв '15 в 19:06