• Несколько идентичных canvas анимаций на одной странице?

    @DarkMiike Автор вопроса
    @RAX7, Спасибо огромнейшее за помощь и труд!
    Вижу, что в результате ваш код работает как надо, но у меня увы похоже именно js не желает запускаться - по-прежнему вижу только прямоугольник с тенью...

    Буду пытаться разобраться, почему js не работает...
    Написано
  • Несколько идентичных canvas анимаций на одной странице?

    @DarkMiike Автор вопроса
    RAX7, большое спасибо за помощь, я наверное туплю, но с приведенным выше кодом у меня вообще ничего не работает - дождя нет, изображений тоже, только прямоугольник посередине...
    Написано
  • Как расположить несколько изображений в ряд по ширине экрана?

    @DarkMiike Автор вопроса
    Я прошу прощения, это мой второй макет, поэтому настолько все криво получается(
    Уже два дня мучаюсь.
    В общем в итоге для всей правой стороны блока (где текст и изображение внизу) прописал display: flex; и flex-direction: column; , всему блоку в целом - position: relative; а самому изображению, которое нужно разместить справа внизу, position: absolute; и bottom:0;
    Вроде получилось наконец-то(
  • Как расположить несколько изображений в ряд по ширине экрана?

    @DarkMiike Автор вопроса
    Я имею ввиду правое изображение, .right-fon.
    Мне нужно опустить его вниз блока, как на последней картинке, но не получается..
    Если пишу для изображения
    .right-fon {
    background-position: bottom }

    ничего не происходит (видимо потому что изображение в диве, а не самом css.

    Если пишу для него padding-top: 23.8% ;

    то при нормально масштабе оно ровно внизу, а при увеличении оно "съезжает" еще ниже блока..

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

    5e777ca0ec4e0271569104.jpeg
    5e777cabb7f7d171714548.jpeg
  • Как расположить несколько изображений в ряд по ширине экрана?

    @DarkMiike Автор вопроса
    Огромное спасибо, флексы помогли. Осталась только одна небольшая проблема - изображение велосипеда справа не прибивается к нижнему краю. background-position: bottom не работает. А если указать для изображение верхний padding в em, при увеличии окна браузера изображение съезжает ниже блока почему-то...

    <section class="vintage-byke">
    
    <img src="https://habrastorage.org/webt/5e/77/62/5e776201ca02e520262568.jpeg" alt="image"/>
    
            <div class="byke">
                <img src="img/vinrage-main-fon.jpg" alt="" class="left-section">
    
                <div class="right-section">
                    <img src="img/vintage-line.png" alt="">
                    <h2>vintage Oliva</h2>
                    <p class="byke_subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                        and scrambled it to make a type specimen book. It has </p>
    
                    <img src="img/vintage-second-fon.jpg" alt="" class="right-fon">
                </div>
            </div>
    </section>


    .vintage-byke{
        height: 100%;
    }
    
    .byke {
        display: flex;
        flex-wrap: nowrap;
        background-color: khaki;
        height: 30em ;
    
    .left-section {
        width: 60%;
    }
    .right-section {
    
      width: 40% ;
      height: 43%;
      text-align: center;
     }
    
    .byke_subtitle {
        padding-left: 2em;
        padding-right: 2em;
       text-align: center; 
    }
    .right-fon {
        width: 100%;
        height: 100%;   
    }


    5e7762283dcc4068193465.jpeg

    Как должно быть:

    5e7762ca29e03178984434.jpeg
  • Как нарисовать тень для круглого изображения только с одной стороны (снизу)?

    @DarkMiike Автор вопроса
    Ок, понял, еще раз большое вам спасибо за помощь и потраченное на ответ время!)
  • Как нарисовать тень для круглого изображения только с одной стороны (снизу)?

    @DarkMiike Автор вопроса
    Огромное спасибо! Единственный нюанс - в макете похоже тень/граница идет на равномерном расстоянии от изображения, только меняется прозрачность обводки (почти невидима сверху и жирнее снизу). А у меня получается полукруг снизу..

    Макет:

    5e7142531d585364500693.jpeg

    У меня:

    5e71427600036586487378.jpeg

    Код:
    .div {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: 0 2px 2px 0 rgba(204, 204, 204, 0.6);
    }