Как плавно сменить фон у блока из спрайта при наведении?

Максим Ленский, А если сделать :before и :after. При наведении :before будет плавно исчезать, а :after плавно появляться через bg:opacity. Такая штука получится с SVG спрайтом. Как считаете? Я вот сейчас подумал...а не столь и важен этот эффект плавной замены по факту, но как альтернативный вариант...

Как плавно сменить фон у блока из спрайта при наведении?

Максим Ленский, Это прям стопроцентная уверенность?

Как плавно сменить фон у блока из спрайта при наведении?

Максим Ленский, я говорю не про сам эффект. Должно двигаться не слева направо или с какой либо другой стороны. Красный квадрат должен полностью/целиком замещаться синим, ни двигаться с какой-либо стороны, а замещаться. Вот тут есть пример, но он для двух отдельных изображений.

Как плавно сменить фон у блока из спрайта при наведении?

Максим Ленский, Не то. Когда наводите на текст, то цвет текста меняется плавно. Надо точнот так, без всяких визуальных смещений изображений, только для фонового SVG.

Как плавно сменить фон у блока из спрайта при наведении?

Максим Ленский, Я SVG перевел в datauri в backgroung-image, а вообще, вот код SVG:

<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="20" fill="#FF0809"/>
<rect x="20" width="20" height="20" fill="#0400D9"/>
</svg>

Что за техника рисования?

Максим Ленский, Обвел эти линии. Может быть не туда смотрите)

Невидимая часть фиксированного блока не дает нажимать на ссылки за ней — как исправить?

Пробовал и так, но тогда плавающий блок скрывался при скроллинге за подвалом или же ссылки подвала перекрывали плавающий блок.

Невидимая часть фиксированного блока не дает нажимать на ссылки за ней — как исправить?

Тогда непонятно как прилепить плавающий блок ровно к правой части контента.

Невидимая часть фиксированного блока не дает нажимать на ссылки за ней — как исправить?

Спасибо.
Первый вариант прост и понятен + работает (почти во всех браузерах).
Второй вариант сам пробовал вчера, но он не работает — при задании высоты 0px родительскому блоку, предположительно из-за position: fixed;, как не задавай высоту дочерним блокам, они не появляются (скрыты).
Третий вариант возможен и даже можно на JS все это дело запилить, но просто нах)

А какие конфликты может вызвать первый вариант?
А по поводу float/flex, надо будет заняться изучением. Много раз читал, но забивал на это дело, так как нужна была поддержка IE9-10. Она и сейчас, как бы это ни звучало странным, нужна.

Как выровнять в дизайне треугольник по центру?

Статью эту уже видел давненько. Там автор во многом показывает результат, но не процесс с разъяснениями.

Как выровнять в дизайне треугольник по центру?

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

Как через SVG-спрайт подключать картинки через background?

Brendan Castaneda, Выглядит сложно без объяснений что в этом коде к чему и малость непонятно как именно это соотнести с последним вопросом. Допустим, нафиг все эти адаптивности, если с ними такие сложности, просто берем и впихиваем в один файл всю графику, а вот как её потом вывести через background — вопрос! Можно сделать нечто вроде подобия спрайта изображений растровых, тогда надо будет все расставить и высчитывать координаты, но хочется еще проще — накидал графики по типу в стартовом примере и потом выводи её, но пока не могу понять как и в сети не найду. Можно ли , нельзя ли пока...непонятно.

Как через SVG-спрайт подключать картинки через background?

Если отбросить возможность управления стилями, то как подключить, чтобы вызывать нужные фигуры через стили, а не инлайново? Пример можете привести?

Как разукрасить SVG-спрайт?

twobomb, Ну, вы даете) А как думаете о том, что делать в случае, когда в первую позицию svg (там где #mysvg *:nth-child(1)) надо будет вставить дополнительный элемент и всего их станет 14 вместо 13 — тогда все цвета сместятся. Тогда надо будет к nth-child(n) прибавлять единицу. А если добавиться элемент не на первую позицию, а в центр и все это идет вразнобой, тогда надо будет много чего определять и менять. Тогда лучшим вариантом будет задать ID вместо nth-child(n) и станет возможным добавлять/удалять элементы и цвета останутся на своих местах...Спасибо.

Как разукрасить SVG-спрайт?

Adamos, если конкретизировать все и сразу, то это иногда бывает излишним. Поэтому стараюсь упрощать.

Как разукрасить SVG-спрайт?

Ход верный, но я привел весьма упрощенный пример, ответ лежит на поверхности. Мое упущение. Может быть, у вас есть соображения о том, что делать в таком случае:

<svg width="191" height="152" viewBox="0 0 191 152" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M161.5 60C158.5 59.8333 150 63 140 77V89.5L161.5 77L148.5 86.5C150.5 91.6667 154.9 102.4 156.5 104C158.1 105.6 166.167 107 170 107.5C175.167 104.167 185.9 97.1 187.5 95.5C189.1 93.9 184.167 78.8333 181.5 71.5L161.5 60Z"  />
	<path d="M189.5 133.5L142.5 129.5L133 133.5L130.5 146.5C134.5 147.833 143.6 150.5 148 150.5C152.4 150.5 152.833 144.5 152.5 141.5L170.5 150.5L189.5 133.5Z"  />
	<rect x="45" width="35" height="35" />
	<rect x="45" y="48" width="35" height="35" />
	<rect x="45" y="96" width="35" height="35" />
	<circle cx="17.5" cy="17.5" r="17.5" />
	<circle cx="17.5" cy="65.5" r="17.5" />
	<circle cx="17.5" cy="113.5" r="17.5" />
	<path d="M107.5 2L122.655 28.25H92.3446L107.5 2Z" />
	<path d="M107.5 50L122.655 76.25H92.3446L107.5 50Z" />
	<path d="M107.5 98L122.655 124.25H92.3446L107.5 98Z" />
	<line x1="133" y1="19.5" x2="156" y2="19.5" />
	<line x1="133" y1="36.5" x2="156" y2="36.5" />
</svg>

Как разукрасить SVG-спрайт?

И что тогда? — Круг, квадрат и треугольник станут красными? — Да, так и будет. Мне не то надо.

Использовать SVG или увеличенные изображения для Retina дисплеев?

А почему именно векторным должен быть логотип, а не растровым?

Как сделать вот такие скругления?

alalala, Класс, я про то и спрашиваю — как?

Как сделать вот такие скругления?

border-radius просто скругляет четыре угла, но не делаем форму такой.