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

strelok011

Ответы

  • Как сделать подстраивание ширины ячейки таблицы под содержимое при переносе строки?

    @strelok011
    Нет, нельзя. Если почитать, как именно браузер рендрит строки, то становится понятно, что строка продлевается до самого края и контент переносится на следующую строку, соответственно вся кажущаяся пустота - забронированное место. И это не лечится.
    Ответ написан
    Комментировать
    Комментировать

  • Почему nth-child() не видит изменения в DOM?

    @strelok011
    Лучше переделать всё это на grid, с указанием gap. Один класс на обертке без всяких nth
    Ответ написан
    Комментировать
    Комментировать

  • Возможно ли анимировать форму таким образом?

    @strelok011
    1. Есть вариант анимировать используя фильтр блюр. Поизвращаться придется конечно, но вполне себе будет рабочий вариант

    Пример
    Обязательно нужно учитывать, что фильтр на контейнере применится ко всему что в него вложено, соответственно, эти штуки придется делать на отдельном диве.

    2. Как предложили выше - svg path
    3. Canvas - трудоемкость большая

    Вот подборка примеров "жидких" эффектов
    Ответ написан
    1 комментарий
    1 комментарий

  • Как так же обрезать круг в svg?

    @strelok011
    Посмотрите сюда
    Ответ написан
    Комментировать
    Комментировать

  • Как верстать на React?

    @strelok011
    Ну, помимо того что существуют разнообразные решения react вида material-ui, prime-react, адаптации react-materializecss возникает вопрос - а зачем оно вам?
    Используйте styled components, на контейнер класс с гридом на css, на вложенные блоки - стили с грид-роу или грид-колумн: span на нужное количество через пропсы.. Отличная сетка получится, чес слово :)

    Долой костыли :) Учите матчасть! Фронт который не умеет в css - это КГ/АМ
    Ответ написан
    2 комментария
    2 комментария

  • Зачем так сделано?

    @strelok011
    Есть еще подозрение, что верстка может быть сгенерирована каким-нибудь древним генератором.
    Ответ написан
    Комментировать
    Комментировать

  • Как лучше продолжить изучение веб-программирования?

    @strelok011
    Идём например сюдой, смотрим, что надо для стека frontend разработчика (к примеру), составляем план TODO с пунктиками на изучение по технологиям, ищем курсы, читаем документацию, пишем свои пет-проекты, ну и вот он - ПРОФИТ
    Ответ написан
    Комментировать
    Комментировать

  • Почему Хром игнорирует viewport?

    @strelok011
    указывайте initial-scale
    <meta name="viewport" content="width=device-width, initial-scale=1">


    А еще - видно, что у вас вьюпорт отрабатывает правильно, иначе у вас вся страница была бы отображена на экране и очень мелко.
    Вам нужно либо скорректировать вьюпорт с нужным масштабированием (это зло, управлять оч тяжело), либо делать корректный адаптив - для ширины от 340 до 600 (к примеру) - указываете размер шрифта и картинки отличный от десктопа.
    Нужна ручная работа, на автомате - играть с процентом масштабирования (если сработает, если честно, я таким извратом не баловался)
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему блокируется отправка формы авторизации и редирект в Iframe?

    @strelok011
    Вы не сможете обойти блокировку из-за настроек параметров CORS (Cross-Origin Resource Sharing). Настраивается это на стороне серверов.
    Есть сайты, специально настроенные для обеспечения такого доступа, обычно это какие-либо виджеты для сайтов.
    Мечты "открыть на любом сайте форму любого другого сайта" запрещены (к счастью) во всех современных браузерах, иначе воровство денег и персональных данных ничем бы не сдерживалось.
    https://developer.mozilla.org/ru/docs/Web/HTTP/CORS
    Ответ написан
    Комментировать
    Комментировать

  • Как в glideapps сделать разные QR коды для разных вкладок приложения?

    @strelok011
    Судя по всему - вам сюда https://docs.glideapps.com/all/reference/design-an...
    Сервис deep-links позволяет в ссылке использовать передаваемые параметры, которые потом можно использовать внутри запускаемого приложения.
    Ответ написан
    Комментировать
    Комментировать

  • Анимация градиента внутри SVG?

    @strelok011
    Анимацию атрибутов внутри SVG можно реализовывать отдельным тегом Animate

    Пример анимации цвета
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="stop-color" values="yellow;red" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="1" stop-color="yellow">
                <animate attributeName="stop-color" values="red;yellow" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>


    Пример анимации офсета
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="0.5" stop-color="yellow">
                <animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>
    Ответ написан
    Комментировать
    Комментировать

  • Как отключить загрузку изображения браузером при определенном размере экрана?

    @strelok011
    1. Для картинок есть такой тег как picture
    Позволяет подгружать нужное изображение в зависимости от размера окна, подгружать различные форматы изображений, на случай если какой-то не поддерживается.
    2. Что запрещает завернуть в медиа-запрос оба условия?

    @media screen and (max-width: 767px) {   
    .img{
    	background-image: url(http://...);
    } 
}

@media screen and (min-width: 768px) {      
    .img{      
    	background-image: url(http://...);
    } 
}
    Ответ написан
    Комментировать
    Комментировать

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

    @strelok011
    у вас стиль table td содержит word-wrap: break-word;
    В первой колонке ширина 0, класс visible, бедный текст ID порвало на две строки. Вот вам и отступ.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать задний фон картинки прозрачным html?

    @strelok011
    Фотошоп надо освоить. Просто ластиком потереть в jpg оригинале не поможет.

    https://youtu.be/awz-RjRF6E4
    Ответ написан
    Комментировать
    Комментировать

  • Почему transition работает только в одну сторону?

    @strelok011
    Пишете небольшой js для получения высоты своей страницы (ну или элемента, на котором должен проявляться эффект) после загрузки, добавляете инициализацию этого же кода на resize (мало ли как контент себя поведет), используете это значение для анимации.
    Если высота не известна - никакие транзишны и анимашки корректно работать не будут. Всякие аккордеоны, прокрутки и т.п. требуют заранее известной высоты для корректной работы. Браузер ее, к сожалению "на автомате" не подсовывает.
    Решение не привожу, в интернете можно найти. Но общий смысл действий описал.
    Ответ написан
    Комментировать
    Комментировать

  • Почему верстальщики редко используют CSS clip-path: polygon?

    @strelok011
    Для работы с вектором SVG в данный момент подходит лучше всего (с тем же clip path, к примеру).
    Понятно, что у CSS есть эта возможность, но это всё равно что использовать велосипедный мультитул там, где гораздо эффективнее динамометрический ключ.
    Помимо исторических причин с совместимостью, IMHO есть еще и целесообразность.
    Ответ написан
    Комментировать
    Комментировать

  • Как изменить содержимое iframe видео с утуба через апи?

    @strelok011
    А кто вам разрешение выдал на изменение содержимого с чужого сайта?
    https://developer.mozilla.org/ru/docs/Web/HTTP/CORS
    "В целях безопасности браузеры ограничивают cross-origin запросы, инициируемые скриптами."
    Ответ написан
    Комментировать
    Комментировать

  • Лучше ли будет, если задавать классы элементам с одинаковыми стилями?

    @strelok011
    Верстайте независимыми блоками, давайте названия классам по смыслу содержимого.
    Если придет заказчик и попросит изменить у заголовков виджетов размер шрифта - полезете изменять разметку в шаблоны? Или всё же обновить только файл со стилями?
    Хотите использовать универсальные переменные - заводите их для препроцессоров в крайнем случае.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно верстать фигурные блоки?

    @strelok011
    Думаю, вам помогут clip и mask.
    Работает и просто в css и с помощью svg
    Генератор css clip
    Обрезка и маска svg
    Ну и в инете по этим словам найти уроки и примеры не составит труда
    Ответ написан
    Комментировать
    Комментировать

  • Как размыть(заблюрить) выделнную область на странице?

    @strelok011
    Когда вопрос задаете - лучше рассказывать и сопутствующие моменты. А еще - таблицу браузеров, под что совместимость пилить. И будет вам щасте )
    Есть атрибуты стилей типа filter: blur, есть всевозможные эффекты через svg на том же механизме (примеров в инете навалом), а есть реализация супер дубовая и очень тяжеловесная, но совсем кроссбраузерная (фильтры в старых браузерах не везде работают) - создается канва, перехватывает битмап отрисованной страницы, библиотечкой на js успешно блюрится именно как растр.
    Вот только если прячете текст - его надо блюрить на бэке. А на фронте - это просто не шибко полезные свистоперделки, которые еще и на производительности сказываются.
    Ответ написан
    1 комментарий
    1 комментарий