Блог

Главная - Вопросы по программированию - Радиальный градиент CSS3

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

#html #css #radial-gradients #css-gradients

#HTML #css — код #radial-градиенты #css-градиенты

Вопрос:

Мне нужно знать, возможно ли это вообще. «Креативный» отдел photoshop придумывает это изображение, а раньше это был просто градиент, выцветающий от 1 до 5 цветов. Они все еще делают это, но теперь у них есть белый круг поверх этого. Как бы я вообще взялся за это дело? синтаксис примеров не имеет точного позиционирования. Поверх белого круга мне нужно добавить определенный шрифт и текст «в белом».

введите описание изображения здесь

Заранее большое спасибо.

Ответ №1:

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

Первый простой линейный градиент слева направо и второй радиальный градиент сверху.

Тогда это просто вопрос позиционирования (абсолютно) вашего текстового элемента над белым кругом (помните, что вы знаете, где он расположен)

Быстрая и грязная демонстрация:

 div {
  height: 350px;
  width: 90%;
  margin: 1em auto;
  border: 1px solid lightgrey;
  background: 
    radial-gradient(circle closest-side at 75% 50%, white, white 60%, transparent), 
    linear-gradient(to right, #344862, white 75%, yellow);
  position: relative;
}
span {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
} 
 <div>
  <span>Lorem ipsum dolor.</span>
</div>

Примечание: расположение центра радиального градиента совпадает с расположением <span> . transform Просто гарантирует, что текст центрирован по кругу.

Комментарии:

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

2. Градиент слева направо был просто примером… вы можете пропустить белое в этом, если хотите… вам просто нужно использовать любой градиент, который есть у ваших PS-парней. Что касается предыстории, я не совсем понимаю, о чем вы спрашиваете… Я сделал все это с помощью базового HTML / CSS … Я не уверен, какое другое отношение имеет к этому вопросу.

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

4. @Paulie_D Я думаю, что он использует фон как область знаний , а не графический фон

5. теперь это то, чего я хотел. раньше у меня был фоновый div, исчезающий до 6 цветов. но затем они добавили белый круг и были озадачены, поскольку я не ниндзя css3

Метки: