Играю на баяне (я серьёзно), программирую на Python и делаю сайтики
Контакты
Местоположение
Россия

Наибольший вклад в теги

Все теги (6)

Лучшие ответы пользователя

Все ответы (7)
  • Есть много картинок и хочется при ховере показывать цифру, но не хочется писать цифры всем картинкам Возможно сделать проще?

    @fedor_filipev
    Начинающий верстальщик и программист на Python
    Если картинок на каждой странице (или у вас одна страница) одинаковое количество и не надо будет ничего менять, то
    Всем картинкам пишем
    <img data-number="1">
    Цифру меняем прямо в html
    а в css пишем
    img {
      postition: relative;
    }
    img:hover::after {
      position: absolute;
      /* top right подстроите сами под правый верхний угол*/
      content: attr(data-number);
    }

    Если лень выставлять все номера в вёрстке, то используем счётчик на чистом CSS 3
    /*Блок, в котором все ваши картинки (если такого нет пишите body)*/
    .img-container {
      counter-reset: imageNum; /* вместо imageNum можно любое название на латинице*/
    }
    /*Все ваши картинки*/
    img {
      counter-increment: imageNum; /*Имя счётчика должно совпадать*/
    }
    /* Выводим так же*/
    img:hover::after {
      position: absolute;
      /* top right подстроите сами под правый верхний угол*/
      content: counter(imageNum); /*Имя счётчика должно совпадать*/
    }

    Готово, если не сработает:
    htmlbook.ru/blog/nachinaem-rabotat-s-css-schyotchikami
    Ответ написан
  • Как в Python найти строку, если известна только её часть?

    @fedor_filipev
    Начинающий верстальщик и программист на Python
    mystring = "20200503_2525"
    if "20200503_ " in mystring:
       # Ваш код
    Ответ написан
  • Как сделать такое модальное окно?

    @fedor_filipev
    Начинающий верстальщик и программист на Python
    Если вы про вёрстку сайта
    html
    <section class="window">
      <div class="stat">
        <div class="name">Вика Антия</div>
        <ul class="stats">
          <li class="param">
           <div class="type">Рост</div>
           <div class="value">174</div>
          </li>
          <li class="param">
           <div class="type">Грудь</div>
           <div class="value">80</div>
          </li>
           <!-- параметры в таких же ливах (li)-->
        </ul>
      </div>
      <div class="container">
        <div class="section galery">
          <img src="адрес_фото">
          <img src="адрес_фото">
          <img src="адрес_фото">
          <!-- картинки -->
        </div>
        <div class="section news">
          <!-- Публикации в дивах -->
        </div>
        <div class="section coop">
          <!-- Сотрудничество -->
        </div>
        <div class="category">
          <div class="tab active">Портфолио</div>
          <div class="tab ">Публикации</div>
          <div class="tab ">Сотрудничество</div>
        </div>
      </section>

    css
    .window {
      position: fixed;
      top: 0;
      bottom: 10px;
      left: 0;
      right: 0;
      border: none;
      border-radius: 5%;
      box-shadow: 0 0 0 50px #E5E5E5;
      overflow: hidden;
    
      display: grid;
      grid-template-columns: 30% 70%;
    }
    
    .stat {
      border-top: 1px solid color: #252525;
      grid-column: 1 / 1;
      background-color: rgb(210,208,198);
      height: 100%;
    }
    
    .name {
      float: left;
      transform: rotate(-90deg) translateX(-500%);
      font: 20px 'Arial Black';
      color: #252525;
      /* Оформление и цвет текста заголовка с именем*/
    }
    
    .stats {
      list-style: none;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    
    .stats .param .type {
      color: gray;
    }
    
    .stats .param .value {
      color: #252525;
    }
    
    .container {
      grid-column: 2 / 2;
      background-color: #262626;
      height: 100%;
      padding-top: 10%;
      padding-bottom: 10%;
    }
    
    .section {
      width: 100%;
      height: 60%;
      display: none;
      margin-bottom: 10%;
    }
    
    .section.active {
      display: block;
    }
    
    .galery {
      display: flex;
      flex-direction: row;
      overflow-x: scroll;
    }
    
    .galery::-webkit-scrollbar {
      width: 0;
    }
    
    .galery img {
      height: 100%;
      margin: 20px;
    }
    
    .category {
    
    }
    
    .category .tab {
      position: relative;
      color: #454545;
      font: 25px 'Arial Black';
      display: inline-block;
      margin-left: 5%;
      margin-right: 5%;
    }
    
    .category .tab.active {
      color: rgb(131,130,126);
    }
    
    .category .tab.active::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      background: rgb(131,130,126);
      height: 5px;
      border-radius: 5%;
    }
    
    .category .tab:not(.active):hover {
      color: rgb(131,130,126);
      text-shadow: 0 0 5px #454545;
    }

    Вопрос ваш неточный, пишите в комментарии этому ответу
    Ответ написан
  • Написал прогресс бар, так я теперь его остановить не могу на нужном этапе ^нужный этап это статус Серебрянный?

    @fedor_filipev
    Начинающий верстальщик и программист на Python
    Зачем iQuerry?
    <div class="progress_bar"></div>
    .progress_bar {
        width: 100%;
        height: 10px;
        border: 1px solid gray;
        border-radius: 50px;
    }

    let bought = 100;
    let vip = 250;
    let progressBar = document.querySelector('.progress_bar');
    progressBar.style.background = `linear-gradient(to right, rgb(29,170,232) ${bought/vip*100}%, white ${bought/vip*100}%)`
    Ответ написан