![[Перевод] Первый взгляд на CSS свойство object-view-box](/uploads/habrahabr_logo.png){kind=logo}
Я всегда хотел, чтобы CSS умел обрезать изображение и размещать его в любом нужном мне направлении. Это стало возможным благодаря использованию дополнительного элемента HTML в сочетании с различными свойствами CSS, которые я объясню позже. В этой статье я познакомлю вас с новым свойством CSS object-view-box, предложенным Джейком Арчибальдом в начале этого года. Это позволяет нам обрезать или изменять размер замененных HTML-элементов, таких как или . Читать далее
Подробнее
Дайджест новостей и интересных статей из мира фронтенд-разработки за 16—22 мая. Как отключить запрос favicon.ico, если это нужно. Вы же знали ,что ваш браузер всегда запрашивает favicon.ico? Теперь фраза «поиграться шрифтами» усложняет задачу, так как грядёт COLRv1 Как работают :where(), :is() :has() и какой из селекторов упрощает жизнь Playwright теперь готов тестировать ваши компоненты на React, Vue и Svelter Большое обновление Figma Что там у вас ещё
Подробнее
Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать
Подробнее
Всем привет! Меня зовут Лихопой Кирилл и я - фронтенд-разработчик в компании idaproject. Сегодня я представляю вам перевод статьи о новой CSS-фиче, которую, я уверен, многие ждали. И это - object-view-box, которое позволит нам обрезать и масштабировать фотографии не прибегая к “костылям” в виде фонового изображения или доп. элементов. Итак, знакомьтесь - object-view-box! В этой статье я познакомлю вас с новым CSS-свойством object-view-box , которое было предложено Jake Archibald еще год…
Подробнее
В статье наглядно показано, каким образом скрыть внешнюю ссылку сайта от поисковых систем без вреда для ссылочной массы. Также Вы сможете облегчить этот процесс с применением php, если у Вас имеется много подобных ссылок. Читать далее
Подробнее
Я большой поклонник фильмов Дж. Дж. Абрамса. Мне нравятся их напряженные сюжеты, остроумные диалоги и, конечно же, анаморфные блики линз (lens flares). Такие режиссеры, как Абрамс, используют lens flares, чтобы добавить в свои фильмы немного "доморощенного" реализма. Эту технику мы можем легко воссоздать в таких инструментах, как Photoshop, а затем добавить на наши сайты в виде растровых изображений. Читать далее
Подробнее
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная - Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм. Читать далее
Подробнее
Дайджест новостей из мира фронтенд-разработки за последнюю неделю 9–15 мая. Что там у вас ещё
Подробнее
Тени помогают сделать визуальную составляющую сайта интересной и эстетичной. В посте рассмотрим свойство CSS box-shadow и то, как его можно стилизовать. Читать далее
Подробнее
Данная заДанная заметка является своего рода комментарием к другой статье на Хабре Удивительная история document.write, которая, в свою очередь, представляет из себя перевод публикации с сайта https://eager.io/ The Curious Case of document.write. Я же здесь хочу лишь подчеркнуть определённую полезность данного метода клиентского JavaScript (https://developer.mozilla.org/ru/docs/Web/API/Document/write), а также немного порассуждать о подходах и проблемах, связанных с генерацией…
Подробнее
Подборка того, что волновало фронтенд-разработку, пока все отдыхали на майских. Горячее Веб быстро развивается и уже пора переосмыслить подходы к адаптации интерфейсов. Используйте CSS-свойства, функции и значения: clamp(), min-content, max-content, fit-content, auto-fit, minmax(). Узнайте о JavaScript контейнерах. Что случится если вы откажетесь от React? Ещё один сайт на HTML. Да, так тоже можно. Остальные новости и статьи — под катом. Что там у вас ещё
Подробнее
Кластеризация семантического ядра – это распределение ключевых запросов на группы, которые будут использоваться для оптимизации определенных страниц на сайте или добавления новых страниц. Приступают к кластеризации после очищенного семантического ядра от неподходящих и «мусорных» запросов. Если этого не делать, могут быть проблемы со структурой сайта, особенно это касается интернет-магазинов и крупных сайтов (например, агрегаторы). Читать далее
Подробнее