AlexZaw

Expert
  • Content count

    583
  • Joined

  • Last visited

  • Days Won

    45

AlexZaw last won the day on August 14

AlexZaw had the most liked content!

Community Reputation

89 Хорошая

6 Followers

About AlexZaw

  • Rank
    Активный участник
  • Birthday 12/03/1978

Information

  • Sex
    мужской
  • From
    Томск
  • Interests
    Верстка, книги, EVE Online :)

Recent Profile Visitors

2,249 profile views
  1. AlexZaw

    Учебники flexbox

    https://www.google.ru
  2. AlexZaw

    Вопрос от чайника №2

    @rasmus Тег <p> в семантике означает параграф текста. Чем его использование в форме противоречит семантике? С семантикой input сложнее. Да, изначально они были созданы для использования в формах, но, imho, с развитием веб стоило бы пересмотреть их семантическое значение. Возьмем к примеру распространенный случай. Есть сайты с калькулятором для расчета чего либо. С одной стороны можно завернуть этот калькулятор в форму, хотя бы для того, что-бы сделать кнопку сброса, но, с другой стороны, эта кнопка очень редко когда предусмотрена в дизайне. Да и данные в этом калькуляторе предназначены только для пользователя и не отправляются на сервер, а значит использование <form> будет тоже семантически неверным, ведь форма предназначена для отправки данных, а у нас никакие данные не передаются. Так что не все так однозначно...
  3. Да не за что. Я ведь вас только направил в нужное русло, остальное вы сделали сами 🙂 Ну а со стрелочкой самому интересно повозиться было 🙂
  4. Сильно в код не вникал, но в целом да. Сами видите насколько код меньше и чище получился 🙂
  5. Малость переделал стрелочку, теперь можно обойтись одним псевдоэлементом. А значит у вас из кода можно будет убрать .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; }
  6. Как вариант: <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); }
  7. Я лишь привел пример :) Ну и, если честно, мне reset.css нравится, так как я могу быть 100% уверен что у всех элементов, во всех браузерах, стили будут одинаковыми и мне не придется учитывать особенности того или иного браузера. Если есть лучшие варианты - буду рад ознакомиться.
  8. reset.css, например, тоже сбрасывает margin и padding у всех элементов, но делает это только для тех тегов, у которых они есть. Заказчик, или контент менеджер, или кто там еще будет наполнять сайт, в большинстве случаев вообще не знают такие страшные слова как отступ у параграфа :) Да и в любом случае, для используемых тегов, все эти отступы будут переопределяться в стилях. А плохая практика это потому, что " * " задает стили именно для всех элементов, для каких надо и каких не надо. А потом в отладчике появляются всякие сбивающие с толку паддинги у боди :)
  9. AlexZaw

    height и bottom

    Потому что при адаптации может потребоваться изменить высоту. С помощью height заданного в процентах это легко сделать. При чем высота будет резиновой. А вот с помощью bottom это не получится. Ну и вторая причина - привычка задавать высоту с помощью свойства которое для этого предназначено, а не с помощью чего попало :)
  10. AlexZaw

    transition

    По хорошему нужно не ссылку ровнять, а именно выпадающее меню по ссылке
  11. AlexZaw

    document.querySelector()

    Возвращает "<h1>Hello World!</h1>". Проверьте подключение скрипта, он у вас срабатывает раньше чем построится DOM
  12. AlexZaw

    transition

    Да, но это, в принципе не критично и подойдет для большинства экранов.
  13. AlexZaw

    transition

    Ну если не считать фиксированных размеров, то да. Не учитываете наличие фона у ссылок который перекрывает псевдоэлемент. У псевдоэлемента задан z-index:-1; это означает что он находится "под" родителем. А так как у родителя задан непрозрачный фон, то псевдоэлемент просто не видно. А также особенностей отношений позиционированных элементов. Если элементу задано абсолютное позиционирование, то он смотрит на позиционирование родителя. Если у родителя позиционирование static, то берется родитель родителя и так далее пока не будет найден родитель с позиционированием отличным от static или поиск не дойдет до тега html. Если у всех родителей позиционирование не задано то отсчет позиции ведется от края окна браузера. Если позиционирование задано, то отсчет ведется от края родителя. Поэтому я так настойчиво и советую нормально изучить основы, при знании выше сказанного у вас бы не возникло этой проблемы.
  14. AlexZaw

    transition

    Добавить для .dropdown-menu свойство z-index:1; и для .dropdown-item свойство position:relative;
  15. AlexZaw

    transition

    Можно, но придется использовать обычный элемент. Ваш вариант с изменением ширины тоже можно использовать, но только, опять же, не для самой ссылки. Иначе она изначально будет очень маленькой и вам придется попадать курсором в эти самые 5 пикселей чтобы ссылка показалась. Отсюда вывод - придется использовать какой-то другой элемент. Псевдо или обычный. Можно конечно и ваш вариант, с изменением ширины у ссылки, подправить, но тогда придется делать обертку для самой ссылки, а это опять же добавлять новый элемент, и плюс задавать ширину для этой обертки. То что вы ищете разные способы решения проблемы это очень хорошо, но вот то, что вы не совсем понимаете то что делаете это плохо. Я вам еще раз советую - пройдите бесплатные уроки на htmlacademy, это даст вам более-менее нормальную базу для дальнейшего изучения. По крайней мере вы сможете сходу отметать некоторые нерабочие варианты решения проблемы, что опять же сэкономит вам время в дальнейшем.