Ответы пользователя по тегу HTML
  • Как сделать плавное открытие пунктов меню?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Добавь свойства transition: max-width .2s; и max-width: 0px; к скрытым элементам.
    Когда инпут становится :checked то пусть у скрытых элементов max-width становится 1000px допустим.
    Ответ написан
    2 комментария
  • Почему Мозилла не высчитывает процент?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Это особенность поведения firefox. В спецификации нет четкого правила, как должны вести себя браузеры если вертикальный margin или padding указывается в процентах внутри флекс контейнера. На выбор браузерам там предоставляется два возможных поведения - значение исчисляется относительно ширины контейнера или относительно его высоты. Firefox считает вертикальный margin/padding в процентах относительно высоты контейнера. Так что надо либо отказаться от процентов, либо задать контейнеру высоту.
    Ответ написан
    Комментировать
  • Textarea в firefox?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Дай ему display: block
    Ответ написан
    Комментировать
  • Что делать с iOS и значением required d HTML?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Safari (на ios точно) не обращает внимания на этот аттрибут. Javascript в помощь.
    Ответ написан
    Комментировать
  • Корректность использовани тега i для иконок?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Есть мнение, что как раз семантично и правильно делать это через тег i
    Ранее, до html5 этот тег был просто презентационным и использовался для italic текста, но позднее был переопределен под любой текст, написанный отличительным манером от основного текста. Вот что говорит mdn:

    The HTML Element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character

    Fictional character это как раз наш вариант с иконками.
    Ответ написан
    Комментировать
  • Как сверстать подобное?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    block-wrapper делаешь тоже display: flex и еще прописываешь ему flex-direction: column;

    можно еще маргин сделать сверху и снизу, чтобы меньше определенного уровня не сжимались блоки.
    PS
    max-width еще добавь им 100%;
    Ответ написан
    Комментировать
  • Как лучше маштабировать картинку?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Height: auto;
    Ответ написан
    Комментировать
  • Актуальная информация по GeekBrains?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Если прям совсем с нуля, то можно пройти. Хотя есть и бесплатные аналоги. Я прочитал почти все книги по css и html что выходили в 2015 году и пришел к выводу, что самые лучшие ресурсы для самообучения это mdn и whatwg.org. Иными словами - практически документация от тех, кто задает стандарты. Проблема всех курсов для новичков в том, что после них придется переучиваться заново скорее всего. Они стремятся быстрее ввести вас в курс дела не рассказывая о подводных камнях и давая лишь поверхностную информацию в "игровой" форме. Сужу по паре курсов, что проходил давно на codeacademy и еще каком то зарубежном сайте аналогичной направленности. Там все примерно одинаково - пишем элементарный код под диктовку (почему он работает именно так особо не обьясняют), зарабатываем ачивки и выкладываем их на фэйсбук. Я бы посоветовал просто на ютубе посмотреть несколько бесплатных видосов про самые основы, и если прям будет интересно, то начинать читать mdn, google webdeveloper и прочие серьезные сайты
    Ответ написан
    1 комментарий
  • Элемент position:fixed сдвигается и оставляет черную полоску. Как исправить?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    У тебя там есть класс dark-wraper
    Поставь ему бэкграунд такого же цвета как и цвет бокового меню
    Ответ написан
    Комментировать
  • Как правильно сверстать этот элемент?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Судя по тому что ширина изображения примерно 50 процентов от ширины экрана и соседний блок слева в высоту примерно равен изображению, то это делается через ряд с двумя колонками и правая колонка содержит адаптивный img или вероятно, если забить на семантику, через background-image.
    Ответ написан
    1 комментарий
  • Почему css анимация получается не линейной?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    animation: sky 20s linear infinite;

    Надо просто порядок свойств указывать в определенном порядке )

    PS

    Сначала не заметил что вместо animation-timing-function написано transition-timing-function
    В этом и есть причина. Порядок указания свойств не имеет значения в данном случае.
    Ответ написан
  • Что помогает вам верстать страницы быстрее?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    4 монитора.
    На четвертом открыты srackoverflow и тостер)
    Ответ написан
    Комментировать
  • Позиционирование должно идти по видимой области браузера(position: absolute)?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    У вас ошибка в определении. Абсолютно-позиционированный элемент размещается относительно ближайшего предка с позиционированием, отличным от static.
    А вот фиксированное позиционирование оно уже задается относительно окна браузера.
    Ответ написан
    Комментировать
  • Разбор различных элементов на разных сайтах?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Найдите в сети css фремворк несложный. Смотрите элементы, который он предлагает и смотрите в файлах стилей как они реализованы. Как вариант есть сайт w3school и там в разделе HowTo рассматриваются примеры создания всяких менюшек, слайдеров, кнопочек, вот это вот все )
    Ответ написан
    Комментировать
  • Как вы выравниваете текст внутри кнопки?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Не указывай height
    Сделай паддинг вокруг текста равномерный и будет этот текст по середине
    Ответ написан
    4 комментария
  • Как сверстать квадратный див с размерами min(15vh, 12.5vw)?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Сверстать можно, но при условии, что у вас монитор с соотношением сторон 15:12,5)
    Ответ написан
    Комментировать
  • Как сделать такой блок на css?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    В угол можно положить квадрат, у которого один коай будет иметь прозрачный бэкграунд, а другой край будет нужного нам цвета. Квадрат создается по принципу треугольников из контента шириной 0 и бордера нужного размера.
    Ответ написан
  • Как реализовать такую штуку?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Есть способ, но треуголка будет с прямым углом
    https://jsfiddle.net/b5sxLLwa/
    Думаю все эти вещи лучше реализовывать с картинками, если надо прям именно так сделать обязательно.
    Создаете картинку с прозрачным фоном на которой нарисован этот кружок PLAY внутри рваного бордера и сконвертировав ее в base64 накладываете через background-image в тот блок с текстом. И аналогично с треуголкой.
    Откуда вообще этот дизайн взялся?
    Это макет или есть живой сайт такой?
    Если макет, то надо у дизайнера узнать, как он ожидал что это будут переносить в верстку, когда рисовал свой изврат)
    Ответ написан
  • Нужно ли поддерживать Internet Explorer 8 и ниже при верстке?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Я когда то давно считал, что программирование это креатив и новаторство, пока не столкнулся с объективной реальностью )

    Работая на компанию, рядовой программист превращается в оператора печатной машинки, где за него уже решили что и как он должен писать, а ему остается только соблюдать методологию и успеть все сдать до дедлайна в ущерб своему личному времени.

    Поддержка древних браузеров это оружие в руках менеджеров-продажников, которым они завоевывают новых клиентов. Шепчут им сладким голосом мантры про то, что есть 2 процента людей, которые живут в каменном веке и если вы не сделаете их счастливыми, то ваш сайт недополучит эти 2 процента прибыли. Клиенты разумеется прикидывают, что 2 процента это 2 процента и соглашаются переплачивать за такую работу, рассчитывая что эти затраты в итоге окупятся. Это называется разделение ответственности, о котором в свое время писал Ф. Ницше. Менеджер продает услугу, которую он сам не будет производить, а следовательно он не будет сидеть и ломать голову над ее реализацией.

    Хорошо если разработчику будут доплачивать за такие клиентские прихоти, тогда это еще хоть как то будет оправдано, но в ином случае, если программист в организации сидит на окладе, то на его плечи тяжким бременем опустятся все хотелки клиентов, начиная от pixel perfect в резиновом дизайне и заканчивая разметкой scheme в каждом теге.

    Такой подход к работе требует от программиста быть постоянно на пределе. Он становится роботом, который все свое личное время тратит на изучение различных техник оптимизации кода или освоение новых фреймворков, которые внедряются руководством в процесс, после посещения ими очередного модного семинара. Scrum, Agile, TDD и прочие инновации отнимают у рядовых разработчиков самое важное - полноценную жизнь свободного человека.
    Он превращается в придаточный орган корпоративного организма, который способен лишь выполнять одну функцию - писать код. Узкие специалисты перестают понимать внутреннюю жизнь представителей других профессий, а личность должна стремиться к разностороннему развитию, ибо только цельному человеку доступна цельная (читай полноценная) жизнь.
    Человек должен иметь право на досуг и развлечения, и это право он отстоял в революциях 19-20 веков.
    PS
    Я периодически встречаю в сети советы молодым разработчикам, что они должны забросить все свои увлечения и писать сутками код, иначе они не будут востребованы рынком. Это суровая действительность, однако я надеюсь что когда нибудь добро победит бабло и справедливость восторжествует ))
    PPS
    Немного не в тему топика, но мысль настойчиво требовала изложить себя на "бумаге" ))
    Ответ написан
    1 комментарий
  • Как побороть замыленность и дрожание блоков при анимации CSS3?

    pm_wanderer
    @pm_wanderer
    junior-HTML
    Там проблема в том, что при 3d анимации браузер начинает задействовать gpu. От этого происходит дерганье. Чтобы этого избежать, надо заранее применить к этому элементу трансформацию, чтобы при загрузке страницы он уже был отрендерен через gpu и этот переход не происходил во время начала анимации и конца. Можно сделать это например через свойство transform: translateZ(0); которое должно стоять у элемента, который мы собираемся трансформировать в будущем.
    Ответ написан
    5 комментариев