Ответы пользователя по тегу CSS
  • Как сделать такой графический индикатор?

    neuotq
    @neuotq
    Прокрастинация
    У них скорее всего на стороне сервера генерируется и потом кешируется для отдачи, так что это не супер проблема 1000+ картинок.
    А насчёт css, то сделать легко, но без регулирования либо через ручное изменения style на элементе или через js никак.
    Ну те так:
    Ответ написан
    Комментировать
  • Сужаются icons при наведении мышки на меню (a:hover), как исправить?

    neuotq
    @neuotq
    Прокрастинация
    border - влияет на геометрию(ширину и высоту) элемента, поэтому чтобы убрать эффект вам нужно либо задать border у элемента изначально(без наведения), пусть будет прозрачным:
    #topmenu a {
    // ...
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
    }

    Либо заменить border на трюк с псевдоэлементами(before и after) задав им соответствующие дизайну стили, либо поиграться со свойством background.
    Ответ написан
    Комментировать
  • Кастомизация гугл карт?

    neuotq
    @neuotq
    Прокрастинация
    У гугл карт огромные возможности для кастомизации, легче всего уже брать готовые сделанные сборки, например здесь: https://snazzymaps.com/ , там же есть и конструктор.
    Ответ написан
  • Частичная прозрачность через css filter?

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

    neuotq
    @neuotq
    Прокрастинация
    Я не лез прям разбираться в ваш код на сайте, это неудобно.
    Но проблема не в плагине. Плагин делает только две штуки: ставит превьюшку видео как обычную картинку, по клику динамически загружается iframe всего плеера youtube. Всё.
    Ваша задача, реализовать новые функции по зыкрытию модельного окна.
    Алгоритм:
    1. Отслеживаете событие закрытие окна.
    2. Когда событие сработало вы либо, через youtube js api ставите плеер на паузу (не знаю насколько это возможно в вашем варианте) либо полностью сами удаляете весь плеер, и восстанавливаете вид поумолчению, те то как должен выглядит код html с самого начала тег div с параметрами, но тут вопрос насколько динамически отслеживает библиотека, поэтому наверное легче будет снести вообще всё оттуда. А инициализировтаь div и библиотеку lazyYT динамически каждый раз когда модалка открывается.
    Вообще конечно всё корявенько по совремнным меркам.

    А вообще советую использовать тогда лучше уж plyr вмеcто устаревшего lazyYT , у него хотя бы api есть для удобного управления плеером.
    Ответ написан
    1 комментарий
  • Как тут обойтись без флоата?

    neuotq
    @neuotq
    Прокрастинация
    https://jsfiddle.net/bvuco1hj/
    Дичь со
    .stars div {
    float: left;
    }

    Убираем.
    Далее, stars_inner делаем realtive, а красный фон абсолютом
    .stars__inner {
      position: relative;
    }
    .stars__progress {
      background: red;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }
    Ответ написан
    1 комментарий
  • Адаптивное горизонтальное меню?

    neuotq
    @neuotq
    Прокрастинация
    Открывай смотри.
    Для этого удобно использовать Flex, при этом используя media query можно менять направление на колонку, вместо строки.
    Ну а дальше дело техники. Добавляй вспомогательные элементы, которые видны только на маленьком экране, а на большом не видно. Это может быть как раз символ меню(ну допустим тот же "бургер"), далее с помощью js можно сделать по клику добавлять "показать"/ "скрыть" для нового уже вертикального меню (на самом деле можно и чисто на css, чуть больше мороки и ограничений)

    Ответ написан
    4 комментария
  • Как обойти anti-adblock на qaru.site?

    neuotq
    @neuotq
    Прокрастинация
    Как временное решение можешь в консоли разработчика (Ctrl - Shift - J в хроме) в браузере написать:
    $('.desc').parent().removeClass();
    Это удалит класс, который они добавляют для того чтобы перевернуть вид всех элементов.
    Ответ написан
    Комментировать
  • Как такое сделать адаптивно?

    neuotq
    @neuotq
    Прокрастинация
    Все просто
    1) Адаптивный: левую боковую панель "Розовый фильтр, смайлики и комментарии" прячешь через media queries , с помощью их же показываешь эти же подписи внутри "таблицы" (ну да, будет дубляж в тексте, но кому сейчас легко), далее через js определяешь что мы на мобильном и инициализируешь карусель.
    Ну и да верстать это нужно будет не на таблицах, а наверное на флексе.
    2) Практически аналогичен первому, только проверку на мобильность делаем на стороне сервера, и он подгружает соответствующий компонент шаблона, которые подходит устройству пользователя.
    Ответ написан
    Комментировать
  • Какой плагин для Lazyload вы используете?

    neuotq
    @neuotq
    Прокрастинация
    На мой взгляд здесь описано лучшее решение. Советую прочитать все статью, там же можно найти готовые сниппеты кода, а так же ссылки на полифилы для поддержки старых браузеров и ссылки на некоторые библиотеки.
    Ответ написан
    Комментировать
  • Какой размер подойдёт под все устройства?

    neuotq
    @neuotq
    Прокрастинация
    Не морочьте себе голову берите из проверенных решений, например у Bootstrap так :
    // Extra small devices (portrait phones, less than 576px)
    // No media query for `xs` since this is the default in Bootstrap
    
    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }
    
    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }

    Или в обратном порядке (указанный размер либо меньше):
    // Extra small devices (portrait phones, less than 576px)
    @media (max-width: 575.98px) { ... }
    
    // Small devices (landscape phones, less than 768px)
    @media (max-width: 767.98px) { ... }
    
    // Medium devices (tablets, less than 992px)
    @media (max-width: 991.98px) { ... }
    
    // Large devices (desktops, less than 1200px)
    @media (max-width: 1199.98px) { ... }
    
    // Extra large devices (large desktops)
    // No media query since the extra-large breakpoint has no upper bound on its width
    Ответ написан
    Комментировать
  • Как в PHP наложить текст с CSS стилем на картинку?

    neuotq
    @neuotq
    Прокрастинация
    Нет, это делается не таким образом.
    Работа с изображениями в php через специальный библиотеки GD/ImageMagick.
    Но чтобы не возиться самому с велосипедо строением, лучше уже использовать готовые обертки.
    Я советую image.intervention.io, у них отличная документация, широкие возможности по манипуляциям с изображениям, фильтры, кропы, эффекты и тд и тп. В том числе и работа с текстом, поддержка шрифтов.
    Если уж хочется именно css/html шаблоны, то есть библиотека https://github.com/niklasvh/html2canvas , но тут уже вам стоит разделить логику и отображение. Мы у себя успешно использовали эту библиотеку для реализации генерации баннеров автоматически под нужный размер, используя адаптивную верстку. Сама библиотека не идеал, на практике бывают всплывают косяки и проблемы, но думаю для вашей задачи более чем подойдет.
    Ответ написан
    1 комментарий
  • Вертикальное выравнивание в Bootstrap 4?

    neuotq
    @neuotq
    Прокрастинация
    Вот сверстал пример.
    Суть:
    Левой колонке делаешь направление флекса - колонкой класс хелпер d-flex flex-column
    Инпут у тебя в свое обертке, а блоку который должен быть по центру делаешь вертикальные марджины - авто: my-auto, таким образом он будет пытаться занять центральную позицию.
    Ответ написан
    1 комментарий
  • Проблема с Svg в Firefox?

    neuotq
    @neuotq
    Прокрастинация
    Чаще всего проблема в том что не заданы параметры width и height у viewport
    viewBox="0 0 500 200" width='500px' height='200px'
    Не обязательно в пикселях, и в целом это не ограничивает дальнейшее масштабирование svg через css или как-то иначе, но позволяет многим браузерам правильно подсчитать размеры изображения.
    Ответ написан
    Комментировать
  • Как разместить блоки текста над input или на нем?

    neuotq
    @neuotq
    Прокрастинация
    Разу у вас все сверстано, то разумнее всего задать дивам что перекрывают кнопку свойство pointer-events в значение none.
    pointer-events: none;
    Таким образом бразуер будет игнорировать события мыши для этих элементов.
    Ответ написан
    1 комментарий
  • Кто нужно знать для создания сайта "Конструктор"??

    neuotq
    @neuotq
    Прокрастинация
    Легче всего будет быстренько пройтись по туториалам React/Vue, понять принцип компонентов, ну а далее набросать простенький базовый редактор добавления заранее готовых компонентов, с каким-нибудь базовым редактированием данных, а далее грубо говоря сам конструктор запоминает в БД только список используемых компонентов + данные.
    В целом создание таких штук как полная копия uKIT не сложно, но таки займет приличное количество времени, в основном на создания всей сложной библиотеки доступных компонентов, и рюшечек со свистелками, но я думаю для курсовой можно и простенький вариант придумать.
    PS можно конечно же и jquery использовать, но там выйдет больше кода/библиотек, всякой каши, да и плюс легче будет сделать что-то типа WYSIWYG редактора (типа ckeditor). Так конечно тоже можно сделать кучу "красоты", но...
    Короче советую все же взять react/vue и писать на современном js.
    Ответ написан
    3 комментария
  • Как float для img заменить во flex?

    neuotq
    @neuotq
    Прокрастинация
    Для чего заменять?
    Флекс у вас должен использоваться для построения самих карточек, а внутри карточки уже отдельная история. Пусть завголовок будет блочным, параграф инланй, а картинку во float left. И будет вам обтекание. Только clearfix не забудьте.
    Тыц
    Ответ написан
    Комментировать
  • Почему не срабатывают изменения через browserSync?

    neuotq
    @neuotq
    Прокрастинация
    Вы смотрите за изменениями в scss, а как же сам css который компилица после изменений в scss. Вот и выходит что дефакто ничего не поменялось и страницу перегружать не нужно. Добавляй слежение за итоговым скомпилированным css или папокй где он лежит, смотря что за проект будет.
    UPD: выше пропустил, что у вас настроена инъекция.
    мб взять из оригинала и под вас передалать:
    var gulp        = require('gulp');
    var browserSync = require('browser-sync').create();
    var sass        = require('gulp-sass');
    
    // Static Server + watching scss/html files
    gulp.task('serve', ['sass'], function() {
    
        browserSync.init({
            server: "./app"
        });
    
        gulp.watch("app/scss/*.scss", ['sass']);
        gulp.watch("app/*.html").on('change', browserSync.reload);
    });
    
    // Compile sass into CSS & auto-inject into browsers
    gulp.task('sass', function() {
        return gulp.src("app/scss/*.scss")
            .pipe(sass())
            .pipe(gulp.dest("dist/css"))
            .pipe(browserSync.stream());
    });
    
    gulp.task('default', ['serve']);
    Ответ написан
    Комментировать
  • Наследование обязательно в медиа-запросах?

    neuotq
    @neuotq
    Прокрастинация
    Помимо каскадирования(и приоритета по более точному указанию), работает принцип последовательности.
    Таким образом ваши стили указанные в media queries срабатывают, но затем перетираются стилями которые подходят этим же элементам, но указаны ниже.
    Короче говоря, лучше всего все media запросы располагать в конце файла либо несоредственно после определения базовых стилей, таким образом медиа запросы будут дополнением, которое при срабатывании переопределит основной класс.
    Отдельный разговор методики распределения свойств, наверное самые простой будет определять в css классах базовые свойства(иногда + для мобильных вертикальных экранов), а далее в медиа запросах расширять их для каждого более высокого разрешения экрана. От простого к сложному.
    PS а вообще на досуге советую изучить.
    Ответ написан
  • Узнать название скрипта, который меняет плавно изображение при движении мышки?

    neuotq
    @neuotq
    Прокрастинация
    Прям так и пишешь, сравнение изображений. Например
    Вот руководство как сделать самому.
    Все из первых строчек гугла.
    Ответ написан
    Комментировать