xmoonlight: сначала не так прочитал вопрос. Если надо чтоб просто при загрузке этот эффект применился то убери из моего моследнего jsfiddle анимацию из ховера и поставь ее в сам элемент, а из элемента убери transform: scale(30)
xmoonlight: вот так только возможно сделать https://jsfiddle.net/ka4t1oe4/1/
если надо чтобы картинки изначально были темные а после наведения всегда оставались видимыми, то только через js. Кстати а почему без джаваскрипта именно надо?
xmoonlight: это уже с помощью анимации надо делать. Там есть свойство которое позволяет оставить состояние элемента по последнему кадру анимации. Но вроде есть еще один способ, ща потестирую
xmoonlight: к сожалению с телефона сейчас сижу(
Будет не удобно. Первый вариант во первых это надо в фотошопе заранее подготовить спрайт нужного размера, но этот способ более громоздкий. Второй способ могу сделать в редакторе, но уже когда у компьютера буду попозже
Роман Краббз: погуглил, действительно десктопы не обращают внимания на запрет масштабирования в метатеге. Поэтому возможно они позволят масштабировать отдельно текст если в настройках это у браузера включить. Я смотрел как это выглядит - зрелище не из приятных). Скорее всего это пережиток прошлого, когда все сайты состояли из текста и табличек, то ничего страшного не случалось от этого шрифтового масштабирования. А сейчас на мой взгляд эта возможность не нужна, когда у нас есть ее аналог полного масштабирования, который работает намного лучше и предоставляет пользователю ту же возможность увеличения текста в разумных пределах, но с сохранением разметки. Единственное обьяснение почему это до сих пор пождерживают, по моему - слепое копирование методичек прошлого в новых руководствах.
Роман Краббз: это другое масштабирование. Оно запрещает вообще масштабировать страницу, а не только текст. Его как раз и не желательно использовать, за исключением случаев, когда мы делаем вэб приложение, которое на телефонах должно выглядеть именно как приложение, а не веб страница.
Роман Краббз: насколько я знаю все немного не так.
У браузера существуют свои стили по умолчанию для элементов и стили пользователя, которые имеют приоритет над браузерными стилями, но слабее стилей автора сайта. Когда пользователь увеличивает шрифт то его стиль оверрайдит браузерный стиль для шрифта (16 px обычно). Потом наш стиль оверрайдит стиль пользователя и если мы указали свой стиль в процентах, то эти проценты будут вычислены от размера указанного пользователем. Все эти версталы кто указывает шрифт в процентах хотят сохранить для пользователя возможность меня размер шрифта на самом деле, ибо так рекомендуется делать. Если мы укажем размер шрифта в пикселях то наш стиль будет переписывать всегда стиль пользователя и он не сможет менять размер шрифта, а rem это просто размер, который вычисляется относительно размера шрифта заданного для корневого элемента документа.
Роман Краббз: Теперь осталось найти лучший способ для запрета)
Какой способ посоветуете?
Я пока вижу вариант указать фонт сайз в пикселях(16 например для десктопа и возможно 12 для телефонов) в боди вместо фонт сайз 100%
Вот что сайт гугл девелопер говорит про это:
"Аппаратный пиксель: физический пиксель на экране. Например, у iPhone 5 ширина экрана составляет 640 аппаратных пикселей."
"Аппаратно-независимый пиксель (Device-independent pixel, dip): результат масштабирования пикселей устройства до размеров опорного пикселя для просмотра с нормального расстояния, представляет собой примерно одну величину на всех устройствах. Ширина экрана iPhone 5 составляет 320 аппаратно-независимых пикселей."
"Если для метатега viewport установить значение width=device-width, ширина страницы выбирается в соответствии с размером экрана устройства в аппаратно-независимых пикселях."
"Атрибут initial-scale=1 заставит браузер установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства."
В итоге они утверждают, что при width=device-width (я это имел ввиду когда писал про initial-scale но перепутал) мы будем работать с аппаратно независимыми пикселями, которые по сути являются результатом деления аппаратных пикселей на аспект ратио.
Если у вас на планшете работает по другому, то придется мне провести дополнительные тесты видимо ((
А на гугл планшетах браузеры позволяют в настройках масштабировать страницу?
Если нет - то можно благополучно думаю забить на этот аспект ратио и запретить масштабирование текста.
про pixel aspect ratio не заметил. В чем оно проявляется? Думаю что если в мете указан viewport и initial-scale=1.0 то тогда физические пиксели приравниваются к пикселям CSS и следовательно pixel aspect ratio не будет ни на что влиять.
Если верстка ломается, то это значит что создатель верстки не предусмотрел этот вариант)
Я хочу это предусмотреть и радикально отсечь такую возможность)
ayapergenov: забыл один нюанс. Если зависимость была установлена как dev dependencies то удалять ее надо с флагом -D кажется.
Либо для надежности удалить вручную из package.json
попозже выложу код
там не сложно вроде