Size: a a a

HTML/CSS — русскоговорящее сообщество

2020 August 11

RK

Renat Kapenov in HTML/CSS — русскоговорящее сообщество
Всем привет, помогите пж по верстке,
есть вот такой попап он при наведении появляется там стоят такие стили как visibility, opacity и transform они меняются при hover и попап плавно выезжает, но есть одно но, когда страницу перезагружаю иногда раз на 5, попап при перезагрузки 1 секунду выезжет слева и прячится, в чем может быть проблем? этот баг не дает покоя мне) помогите пожалкуйтса)
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
мы ж твой код видим
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
если там онли css ,то не может быть никакого бага
источник

RK

Renat Kapenov in HTML/CSS — русскоговорящее сообщество
.trigger {
 width: 120px;
 height: 47px;
 position: absolute;
 right: 50%;
 top: -6px;
 transform: translate(50%);
 cursor: pointer;

 .popup_services {
   width: 730px;
   height: 341px;
   border-radius: 6px;
   box-shadow: 0 15px 30px 0 rgba(32, 33, 39, 0.2);
   background-color: var(--white);
   right: 50%;
   position: absolute;
   top: 45px;
   transform: translate(50%, 10%);
   padding: 40px;
   grid-template-columns: 1fr 1fr;
   display: grid;
   opacity: 0;
   transition: 0.4s;
   visibility: hidden;
   cursor: default;

   &_arrow {
     position: absolute;
     width: 30px;
     height: 12px;
     top: -10px;
     left: 50%;
     transform: translate(-50%);
   }

   @include layout-mobile {
     display: none;
   }

   &-col {
     &_title {
       font-family: Gilroy, sans-serif;
       font-size: 13px;
       font-weight: 600;
       font-stretch: normal;
       font-style: normal;
       line-height: normal;
       letter-spacing: 1px;
       color: #a5b4c8;
       text-transform: uppercase;
     }

     .col-items {
       &_item {
         display: flex;
         align-items: center;
         margin-top: 30px;

         a {
           display: flex;
           align-items: center;
           text-decoration: none;
           padding-right: 50px;
         }

         &-text {
           margin-left: 17px;

           p {
             font-family: Gilroy, sans-serif;
             font-size: 16px;
             font-weight: bold;
             font-stretch: normal;
             font-style: normal;
             line-height: normal;
             letter-spacing: 0.4px;
             color: #354052;
             margin: 0;
             margin-bottom: 3px;
           }

           span {
             font-family: Arial, sans-serif;
             font-size: 14px;
             font-weight: normal;
             font-stretch: normal;
             font-style: normal;
             line-height: 1.43;
             letter-spacing: 0.2px;
             color: #7f8fa4;
             text-transform: capitalize;
           }
         }

         img {
           width: 48px;
         }
       }
     }
   }
 }

 &:hover {
   .popup_services {
     opacity: 1;
     transform: translate(50%, 0%);
     visibility: visible;
   }
 }
}
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
а если в жс класс тоглится при наведение ,то смотри
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
Renat Kapenov
.trigger {
 width: 120px;
 height: 47px;
 position: absolute;
 right: 50%;
 top: -6px;
 transform: translate(50%);
 cursor: pointer;

 .popup_services {
   width: 730px;
   height: 341px;
   border-radius: 6px;
   box-shadow: 0 15px 30px 0 rgba(32, 33, 39, 0.2);
   background-color: var(--white);
   right: 50%;
   position: absolute;
   top: 45px;
   transform: translate(50%, 10%);
   padding: 40px;
   grid-template-columns: 1fr 1fr;
   display: grid;
   opacity: 0;
   transition: 0.4s;
   visibility: hidden;
   cursor: default;

   &_arrow {
     position: absolute;
     width: 30px;
     height: 12px;
     top: -10px;
     left: 50%;
     transform: translate(-50%);
   }

   @include layout-mobile {
     display: none;
   }

   &-col {
     &_title {
       font-family: Gilroy, sans-serif;
       font-size: 13px;
       font-weight: 600;
       font-stretch: normal;
       font-style: normal;
       line-height: normal;
       letter-spacing: 1px;
       color: #a5b4c8;
       text-transform: uppercase;
     }

     .col-items {
       &_item {
         display: flex;
         align-items: center;
         margin-top: 30px;

         a {
           display: flex;
           align-items: center;
           text-decoration: none;
           padding-right: 50px;
         }

         &-text {
           margin-left: 17px;

           p {
             font-family: Gilroy, sans-serif;
             font-size: 16px;
             font-weight: bold;
             font-stretch: normal;
             font-style: normal;
             line-height: normal;
             letter-spacing: 0.4px;
             color: #354052;
             margin: 0;
             margin-bottom: 3px;
           }

           span {
             font-family: Arial, sans-serif;
             font-size: 14px;
             font-weight: normal;
             font-stretch: normal;
             font-style: normal;
             line-height: 1.43;
             letter-spacing: 0.2px;
             color: #7f8fa4;
             text-transform: capitalize;
           }
         }

         img {
           width: 48px;
         }
       }
     }
   }
 }

 &:hover {
   .popup_services {
     opacity: 1;
     transform: translate(50%, 0%);
     visibility: visible;
   }
 }
}
ты что делаешь нахуй
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
либо скрины ,либо песочница (лучше второе)
источник

𝕮[

𝕮𝖍𝖎𝖕𝖎ˢᶜᵃᵐ [20.3к/100... in HTML/CSS — русскоговорящее сообщество
Хахахахахахах
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
по идее не может быть там бага
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
с браузером какие-то траблы скорее всего
источник

RK

Renat Kapenov in HTML/CSS — русскоговорящее сообщество
сорян, ну да я тоже думаю что не должно быть, но откуда лезит
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
лайв сервер может втыкать
источник

NM

Neo Makela in HTML/CSS — русскоговорящее сообщество
забей
источник

RK

Renat Kapenov in HTML/CSS — русскоговорящее сообщество
это из-за ssr было
источник

l

lesha in HTML/CSS — русскоговорящее сообщество
Кто нибудь работает с parcel 2? При создании .parcelrc и прописывании простого transformers , localhost перестает отвечать. Без .parcelrc всё работает ок
источник

SB

Sergey Bekharsky in HTML/CSS — русскоговорящее сообщество
Парсел2 все еще в бете. Пиши ишью.
источник

н#

не ты зло, а moment.... in HTML/CSS — русскоговорящее сообщество
lesha
Кто нибудь работает с parcel 2? При создании .parcelrc и прописывании простого transformers , localhost перестает отвечать. Без .parcelrc всё работает ок
А можешь в пастбин скинуть что ты там написал?
источник

l

lesha in HTML/CSS — русскоговорящее сообщество
Разобрался, просто пришлось в конце добавить расширение .json
источник

AP

Artur 🦋 Pogosyan 💎... in HTML/CSS — русскоговорящее сообщество
http://pogosi.beget.tech ребят я не прогер, надо поменять цвет заголовка и через color не работает
Как это сделать?
источник

АИ

Александр Иванов... in HTML/CSS — русскоговорящее сообщество
Artur 🦋 Pogosyan 💎
http://pogosi.beget.tech ребят я не прогер, надо поменять цвет заголовка и через color не работает
Как это сделать?
Какого именно?
источник