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

    @htmleater
    Конкретно это - результат работы простенького, но платного скрипта по созданию буквиц (названия не вспомню).
    Суть в том, что первая буква оборачивается в спан и с нею уже производятся действия. Копай в эту сторону.
    Ответ написан
    Комментировать
  • Как сделать фоллбэки?

    @htmleater
    Можно попробовать, к примеру, flexibility-master (есть на гитхабе) - маленький скрипт, который в ИЕ9 вместо флексбоксов подставляет флоаты.
    Ответ написан
    Комментировать
  • Как запретить разрыв таблицы при печати в контейнере flex?

    @htmleater
    caniuse.com/#search=page-break-inside
    Полноценно не поддерживается ни одним браузером, кроме Опера мини
    Ответ написан
    Комментировать
  • Как сверстать данный кусок макета?

    @htmleater
    .flex-item:first-child {
    flex: 0 0 200px; /*в любых единицах*/
    }
    .flex-item:last-child {
    flex: 1 1 auto;
    }
    Ответ написан
    Комментировать
  • Есть ли волонтерство в веб-разработке?

    @htmleater
    Я за свою практику делал 3-4 сайта + макеты для полиграфии в благотворительных целях бесплатно (семейные детдома). Ничего особо сложного нет или времязатратного, ибо максимум требований: фото-видеогалерея, новости, обратная связь. Никаких особых изысков в дизайне, как правило, хватает штатных шаблонов + логотип + слайдер.
    danneo.com
    сами освоите за 2-4 дня + несколько дней на нестандартные задачи с помощью сообщества и поиска + 2-3 дня на обучение тех. кто будет вести сайт в дальнейшем.
    Боитесь, что не справитесь сами, обращайтесь.
    Ответ написан
    Комментировать
  • Animate.css+one-scroll-page.js как совместить?

    @htmleater
    Не очень давно в лендинге пытался поженить Анимате+Wоw.js с fullpage.js (как я понимаю, разновидность one scroll page).
    От Wоw.js пришлось отказаться практически сразу из-за явных конфликтов, которые и на скролл-скрипт стали влиять. Анимат удалось заставить "работать" только в таком виде: при начальной загрузке страницы проигрываются анимации со второго-третьего экранов, а уже потом прорисовывается первая страница.
    Решить проблему не сумел.(((
    Ответ написан
  • Сколько времени в процентах у вас уходит на дизайн, верстку, натяжку, программирование сайта?

    @htmleater
    От недели (если сроки горят и заказчик готов заплатить +40-50% за срочность) до двух недель. В одиночку, при условии, что в ТЗ нет какой-либо экзотики, и основные затраты времени не лягут на переговоры, т.е., когда заказчик созрел и готов к работе.
    Ответ написан
    Комментировать
  • Flex align-items:stretch; не работает если высота больше высоты окна, как пофиксить?

    @htmleater
    Если правильно понял вопрос, то удивлять нечему: что заказывали, то и получили. Контейнер на 100% процентов вьюпорта - он так и показался, а за содержимое он не ответчик.
    Либо контейнеру высоту авто, либо итему с переполнением оверфлоу: хидден или авто. И будет счастье.
    Это как требовать от кармана, чтобы в него ведро фиников поместилось.
    Ответ написан
    9 комментариев
  • Есть ли какие то хорошие решения или практики для верстки адаптивного интернет-магазина, в том числе для мобильных устройств?

    @htmleater
    Ну вот к примеру, недавно делал под OpenCard:
    overtune.ru от 320 пикс до бесконечности
    Ответ написан
    Комментировать
  • Какой должен быть порядок следования @media queris при формате "Сначала десктоп"?

    @htmleater
    Простая логика: Насколько больше можно реализовать на =>1440px, нежели на 320?
    Следовательно, наворачиваем всё, что задумали на десктопе, а потом с помощью медиа прописываем поведение на более малых величинах.
    Поверьте, что кол-во кода стилей при таком подходе будет существенно отличаться от того, когда идут от противного.
    В прпинципе, достаточно примерно такого:
    media screen and (min-width: 320px) and (max-width: 479px) {}
    media screen and (min-width: 480px) and (max-width: 639px) {}
    media screen and (min-width: 640px) and (max-width: 767px) {}
    media screen and (min-width: 768px) and (max-width: 779px) {}
    media screen and (min-width: 800px) and (max-width: 1023px) {}
    media screen and (min-width: 1200px) and (max-width: 1681px) {}

    но я часто добавлю ещё несколько значений, для которых существуют общие значения.

    И лучше на этапе разработки подключать отдельный файл стилей для медиа
    Ответ написан
    3 комментария
  • Как сделать правильное меню?

    @htmleater
    Проще и надёжнее всего сделать это средствами flexbox + поиграться свойствами text-overflow.
    Хотя я совсем не уверен, что решение с обрезанием текстов будет правильным. Ну, к примеру, какой толк от меню будет, если юзер на экране увидит: {icon} Список... + {checkbox} показы... + В нача...?
    К тому же, если следовать логике, то в селекте сортировки также нужна иконка, иначе он не воспринимается самостоятельным пунктом меню.
    В качестве здоровой критики позволю себе сделать замечание: в вашей вёрстке нарушено одно из базовых правил построения интерфейса - отсутствие группировки в меню согласно весу и предназначению пунктов.
    Т.е. у вас есть три пункта, которые действительно необходимы для сравнения (Список, фильтр, Сортировка). Абсолютно непонятно каким образом к этой группе примкнул Делёж ссылками, да и наличие в строке меню ссылки на статью тоже не бесспорен и даже выключка вправо дела не спасает.
    Ответ написан
  • Как сейчас создают дизайн для приложений?

    @htmleater
    Вот я как раз из тех, кто дизайнер умеющий хорошо верстать и немного адаптировать под себя скрипты.
    Терпеть не могу показывать статичные эскизы-картинки с бантиками заказчику, а потом на пальцах показывать, как это будет работать, поэтому обычно делаю имитирующие работу html- прототипы, чаще всего это картинка с наложенными сверху дивами абсолют всяческих селектов, спойлеров, меню с линками на другие страницы и пр. Заказчик любит потыцкать по таким элементам, а мне не жалко - пусть поиграется.
    Поскольку при таком подходе тройная работа в Фотошопе меня категорически не устраивает, то картинки рисую в векторе, чаще всего в Кореле + Инскейп, ибо Люстра под веб заточена хуже.
    Ответ написан
    Комментировать
  • Используете готовые решения, или делаете все с нуля?

    @htmleater
    Ну для этого существует 100500 фреймворков и практически для каждого шаблоны. Самый, наверное, распространённый - Bootstrap.
    Пробовал разные, но, в конце концов, вернулся к тому, что создание с нуля мне ближе и контролируемость процесса несоизмеримо выше + отсутствие ненужного барахла
    Ответ написан
    2 комментария
  • Веб-дизайнер и Верстальщик в одном лице - реально?

    @htmleater
    Ну а почему нет-то?
    Даже если просто рисовать картинки в фотошопе, то принципы вёрстки (хотя бы в общих чертах) знать нужно.
    Ответ написан
    Комментировать
  • Зачем нужны css фреймверки и почему столько шума вокруг "сеток"?

    @htmleater
    Сетка (Модульная сетка) необходима для достижения гармонии при любой вёрстке, претендующей на звание правильной (хорошей). Если просто, то это соотношение величин и пропорций, соответствующих закону "Золотого сечения".
    В средние века пришла из архитектуры в книгопечатание. В 20-30-х годах прошлого века понятие окончательно оформилось как научно обоснованный метод и получило настоящее название. наибольшее распространение получило в книгопечатании, шрифтостроении, плакатном искусстве, айдентике.
    По мере развития сетка стала широко применяться в оформлении экстерьеров, витрин, визуальной рекламе и даже в промдизайне и дизайне интерьеров.
    В вебе сетка применяется относительно недавно и отличается от классического применения только в тех случаях, когда вёрстка является резиновой (% вместо жёстких величин).

    ЗЫ: Я, к примеру, никогда не возьму на работу дизайнера, который никогда не слышал о модульных сетках!
    Ответ написан
    8 комментариев
  • Какие есть cms позволяющие легко натягивать html ?

    @htmleater
    Ответ написан
    Комментировать
  • Качество специально уменьшеной картинки — самообман?

    @htmleater
    Простая теория: картинка имеет по 400 пикселей по ширине и высоте. Браузер забирает эту картинку и впихивает в бокс 200х200, тупо выкидывая половину пикселей при рендере. Отсюда потеря деталей, лестницы, муар.
    При увеличении картина обратная - браузер добавляет отсутствующее кол-во пикселей с усреднённым цветом., что непременно приводит к мылу.

    В Фотошопе можно смягчить ухудшение качества если ресайзить не сразу в 100%, а в несколько шагов, процентов по 15.
    Программы-ресайзеры используют различные алгоритмы изменения размеров, что позволяет уменьшить деградации картинок (а они будут в любом случае).
    Ответ написан
    Комментировать