Задать вопрос
AlexanderBashkin

Alexander Bashkin

Ответы пользователя по тегу CSS

  • Как расположить один div над другим?

    AlexanderBashkin
    @AlexanderBashkin
    64ce392a73931762884751.jpeg

    .section {
     padding: 10px;
     background-color: #010915;
     height: 90vh;
}
 .section-block-one {
     height: 100%;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     background-color: #1c344b;
}
 .section-block-two {
     width: 200px;
     height: 200px;
     background-color: white;
}
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить размеры flex-элемента без изменения положения соседних блоков?

    AlexanderBashkin
    @AlexanderBashkin
    https://codepen.io/rainbrew/pen/OJaqEOy

    <div class="container">
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
   <div class="item">
      <div class="item-wrapper">
         <div class="visible-block">
            Какой-то контент, который виден по умолчанию
         </div>
         <div class="hidden-block">
            Контент, который появляется при наведении мыши на item
         </div>
      </div>
   </div>
</div>


    .container {
     max-width: 800px;
     padding: 10px;
     margin: 0 auto;
     border: 2px solid #000;
     box-sizing: border-box;
     display: flex;
     justify-content: flex-start;
     align-items: stretch;
     flex-wrap: wrap;
     gap: 25px;
}
 .item {
     text-align: center;
     flex: 0 1 240px;
     box-sizing: border-box;
     position: relative;
}
 .item .item-wrapper {
     border: 1px solid red;
     background: #fff;
}
 .item:hover .item-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     box-shadow: 0 0 10px rgba(0,0,0,0.5);
     min-height: 100px;
     z-index: 2;
}
 .item:hover .hidden-block {
     display: block;
     padding: 0 20px 20px 20px;
}
 .item .visible-block {
     padding: 20px;
}
 .hidden-block {
     display: none;
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Как создать плавный скрол к якорю на новой странице?

    AlexanderBashkin
    @AlexanderBashkin 
    $('.menu-item-1689').on('click', function() {
  $('html,body').animate({scrollTop: $('.kol-scrol').offset().top}, 1000);
});
$('.menu-item-1690').on('click', function() {
  $('html,body').animate({scrollTop: $('.pr-scrol').offset().top}, 1000);
});
$('.menu-item-1691').on('click', function() {
  $('html,body').animate({scrollTop: $('.dost-scrol').offset().top}, 1000);
});
$('.menu-item-1692').on('click', function() {
  $('html,body').animate({scrollTop: $('.onas-scrol').offset().top}, 1000);
});
$('.menu-item-1693').on('click', function() {
  $('html,body').animate({scrollTop: $('.kont-scrol').offset().top}, 1000);
});
    Ответ написан
    7 комментариев
    7 комментариев

  • Как называется эффект прокрутки страницы?

    AlexanderBashkin
    @AlexanderBashkin
    На этом сайте используется библиотека ScrollMagic
    Ответ написан
    1 комментарий
    1 комментарий

  • Как предоставить готовую вёрстку заказчику?

    AlexanderBashkin
    @AlexanderBashkin
    ngrok во время созвона, либо как уже написали выше - тимвьер или аналоги
    Ответ написан
    Комментировать
    Комментировать