Serezha, вы можете сделать градиент из белого в прозрачный?
Ну или тупо скопировать код из моих примеров, поменяв цвет на свой и повернув уголок, потому что у меня как раз таки в прозрачный.
alexalexes В данном случае CSS никак не ограничивает задумку дизайнера.
Serezha, есть: обычный радиальный градиент. Можете поискать по моим ответам и комментариям. За последний месяц я раза пару раз точно отвечала на этот вопрос.
1. Песочница нерабочая, картинок не видно, размеры не проставлены.
2. За пропорции отвечает в основном aspect-ratio. (а также хак с паддингами, единицы измерения от вьюпорта или контейнера и т.д.)
3. Нет образца - не понятно, зачем вообще абсолют.
Для начала, потому что нарушены правила вложенности тегов. У вас там ссылки снаружи li, должно быть наоборот.
Прогоните код валидатором и исправьте ошибки.
Cortez72, общепринятые стандарты есть, но размеров во-первых, всё равно много, а во-вторых, дизайнер не обязан использовать именно такую ширину фрейма.
Что-то вопрос в заголовке вообще мимо текста внутри.
Если ширина фрейма 1600, то на 1600 всё должно совпадать с макетом с учетом погрешностей разрешенных по ТЗ.
Почему вы проверяете 1600 на 1920 это загадка.
На самом деле вообще без разницы какой экран у вас.
Сайт должен хорошо смотреться на любом экране при любом размере вьюпорта и любой плотности пикселей.
Levott, картинка никуда никого не переводит. Этим занимаются ссылки <a>
Пожалуйста, используйте теги по назначению, вам будут благодарны и люди с ограниченными возможностями и пользователи клавиатуры, работающие без мыши и даже коллеги.
Levott, не правы. Потому что сайтами пользуются не только зрячие люди.
Почитайте как выбирать контентное изображение или украшение.
В этих картинках нет смысла - это украшения.
Хотя бы скройте картинки от скринридеров и добавьте доступно скрытый текст.
melodze, Вы меня извините, но в вопросе вообще нет слова высота.
Карточки грида в принципе одной высоты, по умолчанию. Обведите li рамочками и убедитесь.
Дальше встает вопрос, зачем все остальные обертки внутри. Их либо удалить либо растягиваться на высоту li.
Ответы, которые могут помочь решить задачу тут принято отмечать решениями.
Это помогает и другим спрашивающим с аналогичными проблемами и другим отвечающим не тратить время на чтение вопроса.
imko, так
1. Если лейбл не связывается с инпутов по for, то инпут должен лежать внутри лейбла. И тогда не надо их накладывать так сложно.
2. Инпут вообще скрывают для таких дел (доступно, не через dispalay:none). Или я чего-то не поняла в вашей идее? Зачем он там видимый?
Может скринчик того, что нужно в реальности?
p.s. вы же можете представить сколько сил у меня ушло, чтобы промолчать про идею делать табы на инпутах в целом? :)))
Если вы уверены в том, что фон и мужик всегда должны иметь одинаковое взаиморасположение, то можно:
1. Слить мужика и фон в одно изображение.
2. Использовать относительные единицы (%, vw) и пропорции.
Я вот не очень уверена в этом.
Либо тогда и тексты и все остальное должно масштабироваться также. Т.е. vw, clamp и т.д.
Очевидная проблема в том, что при расширении экрана, отличимом от макета все сломается.
Сначала нужно описать как оно должно себя вести на самом деле на родном языке. Можно нарисовать.
Т.е. что от чего зависит, как и куда должно или не должно двигаться. К какой точке прибито, если не должно. И т.д.
Либо спросить у дизайнера, если с ним есть связь и это его дело, а не ваше.
Ну или тупо скопировать код из моих примеров, поменяв цвет на свой и повернув уголок, потому что у меня как раз таки в прозрачный.