Задать вопрос

strelok011

Ответы

  • Как выделить каждый вводимый в input символ?

    @strelok011
    Чтобы решить это правильно и универсально - надо использовать js и вместо input - div content editable.
    Натыкался когда-то на одном сайте на такое.
    Индивидуально буквы не возможно оформить, кроме первой first-letter.
    И для нормального оформления нужно заворачивать хотя бы в span.
    Простое решение - ваше, методом подбора шрифта ).
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать такое с помощью радионопок?

    @strelok011
    Можно радио, текст с рамками в label for, оформление зависит от выделенного radio. Все в css оформляется. Внутри лейблов скрытый див для тултипа, реакция на ховер. Все довольно просто.
    Сами радио инпуты сделать прозрачными, позиционировать абсолютно, уменьшить до 1px. Дальше простая верстка. На обертку строки дисплей флекс, на лейблы позишн релатив.

    Извиняюсь, с телефона пишу ))
    Ответ написан
    Комментировать
    Комментировать

  • Что лучше использовать много class или свойств?

    @strelok011
    БЭМ дает логику в верстке, если проект сложный и уникальный.
    При этом он до продакшна может не доезжать в принципе.

    Если разработка идет на базе готового фреймворка типа materializecss или бутстрап, то тут комбинирование классов основной прием, позволяющий пользоваться конструктором.

    Кажется есть инструмент (я тут боюсь ошибиться, но рассказывали), который может превратить БЭМ (или любой используемый вариант) в набор атомарных классов по свойствам - компиляция многомегабайтного css файла превращает в файл около 300-500к (или и того меньше), в котором просто разложены основные свойства css на одно-двух буквенные классы.
    В результате получаете небольшой размер файла стилей + обфусцированную верстку, в которой комплект свойств будет короче человекопонятного наименования стиля.
    Это если топить за сокращение кода.

    Общая рекомендация - получить опыт и БЭМ и фреймворк верстки, а затем или комбинировать или остановиться на чем-то удобном для конкретного проекта.
    Ответ написан
    Комментировать
    Комментировать

  • Как добавить класс к пункту меню в MODx?

    @strelok011
    в модх есть масса плагинов. Используйте что нибудь вроде самой основной классики wayfinder. Или pdomenu, или любого другого )

    У этих плагинов есть опции, позволяющие конфигурировать любое состояние навигации. Указывать активный элемент, прятать текущий раздел или корень и проч.
    Можно подключить и написать классы поверх стилей из коробки, можно внедрить свои шаблоны на все случаи жизни.

    i--gu.ru/wayfinder к примеру. Либо читать на сайте с документацией по modx
    Ответ написан
    Комментировать
    Комментировать

  • Есть ли готовый слайдер в виде мозайки?

    @strelok011
    https://jquery-script.net/how-to-create-a-mosaic-t...
    Ответ написан
    Комментировать
    Комментировать

  • Какими средствами делают скроллинг выпадающего меню?

    @strelok011
    Задайте максимальную высоту блоку меню и оверфлоу
    .menu {
    max-height: 80vw;
    overflow: auto;
    }

    Максимальная высота не даст блоку развернуться больше высоты экрана, overflow: auto добавит скролл если контент больше чем доступная высота.
    80vw - 80% от высоты окна браузера. Не путать с 80% от родительского контейнера.

    Это грубые прикидки. Детально можно сказать зная что за макет, где используется, может меню появляется от элемента ниже по контенту и проч.
    Ответ написан
    4 комментария
    4 комментария

  • Какую лучше структуру выбрать?

    @strelok011
    Не согласен с разнесением по компонентам всего и вся.

    Структурировать правильнее по второму варианту. Если у вас реально сложный проект, то обязательно будут переиспользуемые компоненты. Иначе это не крупный проект а крупный бардак.

    Примерная структура:

    js - > pages -> page 1 -> лежит js этой страницы, всякие инициализации или уникальный код
    js - > pages -> page 2 -> лежит js этой страницы, всякие инициализации или уникальный код
    js -> utils -> утилитки
    js -> components -> reviews -> лежит js этого компонента

    scss -> components -> _head - стили для head
    scss -> components -> _forms - стили для форм
    и т.д.

    А на выходе будет один файл с минифицированным js (если только нет независимых библиотек и т.п.), один-два файла с css (если используются темы, то появляются второй и проч файлы).

    В крупном проекте не должно быть отдельных изображений в больших количествах. Декорации будут либо в спрайтах, либо в шрифтах, в идеале так вообще всё с cdn в конечном итоге.
    Изображения заглушки - просто в каталоге images.

    Плодить каталоги необходимо в соответствии со здравым смыслом как минимум.

    Ну и опять же - это всё надо определять по месту. Будет проект на реакте с jcss, всё поменяется еще раз )
    Ответ написан
    2 комментария
    2 комментария

  • Сервис для получения ссылки для html в этом одном сайте можно было загружать (видео, PNG, JPEG, SVG)?

    @strelok011
    Если вам не для личного пэт проекта а для бизнеса - используйте CDN сервисы, типа https://aws.amazon.com/ru/cloudfront/
    Специальная разновидность для хранения статики.
    Хотите - шарьте для всех, хотите - только по токену и т.п.
    Разумеется за деньги.
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли через панель разработчика найти нужный html-файл?

    @strelok011
    Нет. Нельзя.
    Результирующий html код может быть приготовлен на лету на стороне сервера или на стороне клиентского браузера.
    Если на стороне сервера - будьте уверены, он будет разделен на отдельные фрагменты, снабжен условиями и бизнес-логикой, наполнением информацией в цикле из базы данных и проч. Найти статичный html, который раздается с сайта - в настоящее время практически не реально.
    Ответ написан
    1 комментарий
    1 комментарий

  • Миниатюра изображения без размытия?

    @strelok011
    лучше поиграть с max-width и max-height
    jsfiddle.net/xwrvxser/1
    Ответ написан
    Комментировать
    Комментировать

  • Почему визуально нет разницы поместить a в li либо li в a?

    @strelok011
    Просто нужно разбираться в семантике html - какие теги как себя ведут в отсутствии вообще любых стилей и для чего предназначены.
    Гуглите блочные/строчные элементы, что во что можно вкладывать, а что нельзя и почему. Сразу подобные вопросы отпадут.
    И для чего придумывали всевозможные теги. К примеру , , ...
    Хорошая верстка не должна разваливаться в отсутствии всех стилей, списки должны быть списками, ссылки - ссылками.
    А стилями можно и глаз на глобус натянуть. Браузер съест.
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли обойтись без панели управления новичку?

    @strelok011
    Есть рекомендации (на том же убунту, кстати) как развернуть свой защищенный сервер (спрятать ssh, подключить https). Есть рекомендации как собрать сервер на nginx+php-fpm, есть рекомендации как развернуть maria-db вместо mysql, и проч и проч.
    Но. Никто не скажет, что лучше в Вашем случае. Без погружения в проблему. Погружаешься в проблему - читаешь инструкцию - выполняешь от А до Я - сталкиваешься с проблемами несовместимости пакетов/версий/собственного тугодумства/кривыми дистрибутивами - решаешь их - welcome to GURU (почти ;) )
    Ответ написан
    Комментировать
    Комментировать

  • Как запилить предосмотр вылезающей пикчи при наведении на ссылку?

    @strelok011
    JS - добавляет инлайн стили на скрытые блоки (т.к. блоки отображаются ЗА текстом, на котором отлавливается наведение). В частности добавляется scale с изменяемым значением и opacity, сиречь прозрачность.
    То бишь
    1.определяетесь с жизненно важной необходимостью вывести такую анимацию, определяете, где именно необходимо вывести подобную анимацию:
    а. Если блок внутри или следом за активатором - можно обойтись CSS с анимацией и keyframes
    б. Если блок находится в изоляции от активатора - используете js (ну, к примеру, богомерсский JQuery) и отображаете связанный элемент (если не знаете css) с изменением значений в стиле через JS. Либо тупо меняете классы, а анимация на css прописана внутри.

    профит.
    Ответ написан
    Комментировать
    Комментировать

  • Эффект переливать?

    @strelok011
    Ну, на самом деле, кмк, надо копать в сторону эффектов на svg. Комбинация фильтров (блюр, оффсет, бленд) дадут вам то что может пригодиться в этом случае. Примеры попроще можно посмотреть тут https://tympanus.net/Development/DistortedButtonEf...
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать последовательную анимацию?

    @strelok011
    Например используйте @keyframes.
    По событиям меняете классы на оба компонента, а к классам привязывайте последовательную анимацию.
    https://idg.net.ua/blog/uchebnik-css/ispolzovanie-...
    Ответ написан
    Комментировать
    Комментировать

  • Как добиться подобной трансформации?

  • Какие селекторы использовать?

    @strelok011
    Никогда не используйте обращения напрямую к тегам. Нужно знать как работает браузер. Если Вы пишете селектор вида .text .link a то браузер берет все теги а и начинает их фильтровать справа на лево.
    Ответ написан
    Комментировать
    Комментировать

  • Почему ссылки синие?

    @strelok011
    Исторически сложилось. У тега a свой браузерный стиль, который перекрывает неявный унаследованный от родителя. Сделано специально, чтобы в отсутствии любых стилей ссылка отличалась от обычного текста.
    Ответ написан
    Комментировать
    Комментировать

  • Что использовать на стороне frontend?

    @strelok011
    А еще придется использовать всякие штуки типа SSR, если нужно индексировать товары в поисковике. И весь ваш фронт превратится в тык... в бэк :)
    Ответ написан
    Комментировать
    Комментировать

  • Будет ли учитываться поисковиками тег H1..H6, при обертывании им элемента с пом. JS?

    @strelok011
    1. нельзя в заголовок вкладывать блок (по семантике)
    2. роботы хоть и умеют выполнять js - но даже всякие реакты и ангуляры запекают страницы на сервере, если есть необходимость взаимодействовать с пауками.
    Ответ написан
    Комментировать
    Комментировать