-
Similar Content
-
By jksnf
Не работает transition при появлений модального окна:
<a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.
Что делать?
-
By DrRobotGranata
Всем привет! Задача стоит следующая. Есть 8 элементов (IMG). Т.е. одна целая картинка разрезана на 8 частей(рамка)
Нужно сверстать гибкой версткой макет, где эти 8 кусочков будут одним целым( рамкой) а внутри можно будет размещать любой текс, рамка по высоте подстраивается под текс, по ширине на всю ширину окна.
Кручу верчу, все никак не получается. Подскажите в какую сторону думать. Каждый Img в отдельный div и все дивы в общий контейнер? и дальше как
-
By Young
Столкнулся с проблемой , когда вставил картинку , весь текст съехал в лево , а сама картинка , должна находиться с низу сайта
И еще вопрос , как сделать так , чтобы когда я уменьшал размер сайта , облаки оставались на своих местах ?
HTML
CSS
решено
-
By IsayR
Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});
-
By vladdvin
Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
CSS
В результате отображается следующая картинка
в режиме инструментов разработчика. А вне режима вообще отображает
Подскажите как добиться отображения текста как на макете.
-
-
Обсуждения
-
Как здесь (https://skr.sh/sEfRBjoTUH1) правильно задать позиционирование? <ul class="list bottom-header-container-list"> <li class="bottom-header-container-list-item"> <div> <img src="./images/mail-svg.svg" alt="иконка эл.почты" width="28" height="22"> </div> <p>Mail Us</p> <a href="mailto:[email protected]">[email protected]</a> </li> <li class="bottom-header-container-list-item"> <div> <img src="./images/phone-svg.svg" alt="иконка телефона" width="26" height="26"> </div> <p>Call Us</p> <a href="tel:+01569896654">+01 569 896 654</a> </li> </ul> -
Сам сделал этот эффект? Ну или вообще сам писал этот код? -
Доброго времени суток. Есть сайт, онлайн магазин на WP, есть код- кнопка (на скрине) <div class="woocommerce-product-details__short-description"> <h5 class="wd-entities-title green sg-popup-id-12581">Нашли дешевле? Снизим цену!</h5> <?php echo $short_description; // WPCS: XSS ok. ?> </div> нужно как-то ограничить данный код от 2 категорий товаров на сайте, ранее работал с opencard там было все просто, а тут информации найти не могу, либо просто не так ищу. Прошу помощи либо статьей, либо направить в нужное русло поисков, может я просто формулирую неправильно данный вопрос. Заранее благодарю. -
.thumb.png.93183027d7a2eba5b545b257503b0e32.png)
Я не вижу указаных Вами проблем заданном сайте PS: устное предупреждение за мультипостинг. Используйте одну тему для одного вопроса. -
By vasyl_runner · Posted
Мой сайт - https://vasyldubno.github.io/project1/#directions На нем установлен скрипт MixItUp 3 для фильтрации постов. На ноутбуке все отлично работает. Но на смартфоне не работает, и в консоле выдает ошибку - [MixItUp] WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled.
-
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.