Leaderboard


Popular Content

Showing content with the highest reputation since 07/18/2019 in all areas

  1. 2 points
    Малость переделал стрелочку, теперь можно обойтись одним псевдоэлементом. А значит у вас из кода можно будет убрать .wrap и кружочки сделать с помощью второго псевдоэлемента для .block По поводу верстки - зачем вы все с помощью абсолютного позиционирования двигаете? Можно флексами обойтись. Код для стрелочки: <div class="box"></div> .box{ height: 100px; width: 200px; background: red; border-radius: 10px; position: relative; } .box:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotateX(180deg); width: 40px; height: 50px; background-image: radial-gradient(at 100% 30%, transparent, transparent 79%, red 80%, red), radial-gradient(at 0% 30%, transparent, transparent 79%, red 80%, red); background-position: 20px; }
  2. 2 points
    Возвращает "<h1>Hello World!</h1>". Проверьте подключение скрипта, он у вас срабатывает раньше чем построится DOM
  3. 1 point
    Есть более точное решение
  4. 1 point
    Сильно в код не вникал, но в целом да. Сами видите насколько код меньше и чище получился 🙂
  5. 1 point
    Как вариант: <div class="box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, velit non ipsa rem dolorum unde fuga repudiandae iusto nesciunt numquam dolores tenetur soluta ad in aut fugit ea tempora ipsum! </div> .box { width: 300px; background: red; border-radius: 10px; padding: 10px; position: relative; } .box:before, .box:after { content: ""; height: 35px; width: 20%; position: absolute; top: 100%; left: 50%; background: radial-gradient( at 25% 100%, transparent, transparent 75%, red 75%, red ); } .box:before { transform: translateX(-100%); } .box:after { transform: rotateY(180deg); }
  6. 1 point
    Здравствуйте Проще всего будет использовать SVG
  7. 1 point
    Приветствую. клик вешаете на блок со ссылкой, а не саму ссылку. Соответственно, событие сработает, даже если кликнуть правее от ссылки; непонятно, зачем вешаете событие на клик по второй ссылке внутри клика на первую, это ведь независимые элементы; нет точек с запятой в конце строк, это важно. Привыкайте писать их всегда; в подобных штуках хорошо бы проверять не только совпадения, но и вообще факт того, что в полях что-то вбито. Наскоряк переписал/дополнил как-то так: var regbutton = document.querySelectorAll('.button a'), form = document.querySelector('form'), inputs = document.querySelectorAll('input'), h3 = document.querySelector('h3'), reginfo = document.querySelectorAll('p'); regbutton[0].addEventListener('click', function(e) { e.preventDefault(); form.style.display = form.style.display === 'none' ? 'block' : 'none'; }); regbutton[1].addEventListener('click', function(e) { e.preventDefault(); if (inputs[0].value) { if (inputs[1].value && inputs[2].value) { if (inputs[1].value == inputs[2].value) { h3.textContent = 'Вы завершили регистрацию!'; reginfo[1].textContent = inputs[0].value; reginfo[2].textContent = inputs[1].value; } else { h3.textContent = 'Пароли не совпадают!'; } } else { h3.textContent = 'Введите пароль в оба текстовых поля'; } } else { h3.textContent = 'Введите имя'; } }); Продолжайте учить 🙂
  8. 1 point
    @media вам нужны для указания стилей при определенных условиях, все остальное (без @media) у вас будет отрабатывать по умолчанию.
  9. 1 point
    попробуйте так https://jsfiddle.net/5xpurek0/
  10. 1 point
    я бы выбрал с JS. Всё отличие в браузерной поддержке и удобстве использования.
  11. 1 point
    Чтобы дочерние элементы не поворачивались, задавайте им ту же трансформацию, но со знаком минус. Вот, например А так, куча способов есть, в зависимости от макета и задач выбирают. Не у всех хорошо с адаптивностью и кроссбраузерностью. Некоторые тут можно подсмотреть: https://css-tricks.com/creating-non-rectangular-headers/ Вообще, много примеров есть. Вы ищите по запросу CSS Skewed Background
  12. 1 point
    на велосипеде катаюсь недавно, бмх.
This leaderboard is set to Kiev/GMT+03:00