Ответы пользователя по тегу Вёрстка
  • Что лучше использовать в реализации такого элемента?

    Самый примитивный и действенный вариант с интерактивом. https://codepen.io/kris-iris/pen/EdgxdO

    Нарисуешь за минуту и вперёд, но... Canvas будет впереди, конечно, хотя тут нужно определяться с задачами.
    Ответ написан
  • Как возможно реализовать timeline змейкой?

    Нативные извращения в студию! https://codepen.io/anon/pen/XxKNqg?editors=1100

    С svg будет легче, но мы же не ищем лёгких путей, да?

    UPD: привела пример с текстом.

    .wrapper{
      position: absolute;
      top: 25px;
      bottom: 25px;
      left: 0;
      right: 0;
    }
    
    .wrap{
      position: relative;
      max-width: 1200px;
      margin: 50px auto;
      
      &__list{
        display: flex;
        justify-content: space-around;
        margin-bottom: 80px;
      }
      
      &__item{
        position: relative;
        z-index: 1;
        width: 50px;
        height: 50px;
        background: url('https://image.flaticon.com/icons/svg/138/138932.svg');
      }
      
      &__title{
        position: absolute;
        left: 0;
        bottom: -100%;
      }
      
      &__timeline{
        position: absolute;
        left: 0;
        right: 0;
        height: 50%;
        
        &--first{
          top: 0;
          right: 0;
          border-right: 2px solid lightblue;
          border-radius: 0 20px 20px 0;
          
          &::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: -1px;
            bottom: 0;
            border-top: 2px solid lightblue;
            border-radius: 0 20px 0 0;
          }
          
          &::after{
            content: '';
            position: absolute;
            left: 100px;
            right: -1px;
            height: 100%;
            border-bottom: 2px solid lightblue;
            border-radius: 0 0 20px 0;
          }
        }
        
        &--second{
          bottom: 0;
          left: 0;
          border-left: 2px solid lightblue;
          border-radius: 20px 0 0 20px ;
          
          &::before{
            content: '';
            position: absolute;
            left: -1px;
            right: 100px;
            top: 0;
            height: 100%;
            border-top: 2px solid lightblue;
            border-radius: 20px 0 0 0;
          }
          
          &::after{
            content: '';
            position: absolute;
            left: -1px;
            right: 0;
            bottom: 0;
            height: 100%;
            border-bottom: 2px solid lightblue;
            border-radius: 0 0 0 20px;
          }
        }
      }
    }
    Ответ написан
  • Какой стек для верстальщика более актуальный?

    Во-первых, совет, не использовать jquery - это утопия. Тем более руки развязаны у вас, т.к. учитесь. Старые технологии === плохо, очень плохо!

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

    Препроцессоры - это хорошо, но нативные вещи в css уже реализованы, теперь стоит подумать, прежде чем пользоваться надстройками языка.

    Grid - это лучшее, что я видела в css, если коротко! :) Освоив этот синтаксис, хотя бы на половину, вам откроется бонус. Говорят мультик показывают.
    Ответ написан