1

Можно ли сделать такое в css? имею в виду эти переходы. картинка

1
  • Где-то я уже писал, что сами градиенты не проблема. Проблема в их адаптивности при изменении размеров. Т.е. если делать "один в один" и для фиксированных размеров, то ничего сложного.
    – UModeL
    4 апр 2019 в 14:54

1 ответ 1

2

Для фиксированных размеров, как-то так:

.waves {
  height: 348px;
  width: 423px;
  border-radius: 5px;
  box-shadow: 0 0 25px black;
  background-image: 
    radial-gradient(circle, hsla(215, 49%, 60%, 0.75), hsla(215, 39%, 0%, 0.35)), 
    radial-gradient(circle at -115px 2750px, #3f71b5 87%, transparent 87.1%), 
    radial-gradient(circle at -292px 2000px, #305ea3 87%, transparent 87.1%), 
    linear-gradient(4deg, #3f71b5 73%, #305ea3 74%);
}
<div class="waves"></div>

4
  • Похоже градиенты, - это один из твоих козырей :) 5 апр 2019 в 13:22
  • @Alexandr_TT не то, чтобы козыри... Просто люблю рисовать. Правда, в последнее время, все худ.материалы стали неподъёмно дорогие ;-( Поэтому с масла и карандаша приходится перебираться в пиксели.
    – UModeL
    5 апр 2019 в 19:32
  • может тебе заняться 3D? Даже здесь ощущается объём, работа со светотенью! Я понимаю, что это радиальные градиенты, но в разных руках, они разные получаются :). 5 апр 2019 в 19:55
  • 1
    @Alexandr_TT я лет пять назад занимался предметным моделированием и архитектурной визуализацией в 3DMax на заказ. Но, домашние компы не тянут нормально, поэтому тоже забросил.
    – UModeL
    5 апр 2019 в 19:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.