Главная » 2020 » Октябрь (страница 2)

Месячные архивы: Октябрь 2020

Как использовать маски в CSS

От автора: когда вы обрезаете элемент, используя свойство clip-path, обрезанная область становится невидимой. Если вместо этого вы хотите сделать часть изображения непрозрачной или применить к ней какой-либо другой эффект, вам необходимо использовать маску. В этом посте объясняется, как применять свойство CSS mask-image, которое позволяет указать изображение для использования в качестве слоя маски. Это дает вам три варианта. Вы можете использовать ...

Читать далее »

Нет идеального показателя количество ссылок для одной страницы

От автора: в Google появился лимит на количество ссылок, которое можно размещать на одной веб-странице. При этом оптимального показателя числа гиперссылок не существует. Во время общения с вебмастерами в Twitter Гэри Илш рассказал, что сейчас Google установил лимит на количество ссылок, которое можно размещаться на одной странице сайта. После достижения этого лимита поисковый робот перестает анализировать остальные ссылки на странице. ...

Читать далее »

Как использовать обрезку в CSS

От автора: все элементы на веб-страницах определены в прямоугольной рамке. Однако это не значит, что мы должны делать все блоками. Вы можете использовать свойство CSS clip-path, чтобы вырезать части изображения или другого элемента и создать интересные эффекты. В приведенном выше примере изображение воздушного шара квадратное (источник). Использование clip-path со значением базовой фигуры circle() обрезает изображение, оставляя сам воздушный шар и ...

Читать далее »

Представители Google о тонкостях локализации контента

От автора: представители Google напомнили вебмастерам о необходимости использования тегов <title> в переводах оригинального контента на сайте. Дэнни Салливан в Twitter порекомендовал вебмастерам не забывать использовать в переводах контента на сайте тег title. Иначе локализованный контент будет отображаться на языке оригинального источника. Также Салливан посоветовал переводить и URL страницы, на которой размещен перевод. Но только в том случае, если адрес ...

Читать далее »

Факторы ранжирования Google, которые повлияют на поиск в 2021 году

От автора: какие из новых факторов ранжирования Google на самом деле повлияют на практику SEO, а какие исчезнут? Узнайте в этой статье. 30-секундное резюме Самое большое обновление Google года называется обновлением Page Experience. Core Web Vitals являются частью этого обновления, и они определенно являются факторами ранжирования, о которых следует помнить, особенно при оптимизации изображений. AMP больше не единственный способ получить ...

Читать далее »

Фильтр Drop-Shadow для изображений

От автора: сегодня сложно представить себе современный сайт, на котором бы не использовались тени. Благодаря теням можно обратить внимание на тот или иной элемент, сделать его объемным и более привлекательным. Для работы с тенями используется свойство box-shadow. Но что если тень необходимо задать для изображения? При этом данное изображение является прозрачным, к примеру, это PNG. Полагаю, вы знаете, что box-shadow ...

Читать далее »

Google не учитывает при ранжировании ссылки в комментариях к HTML-коду

От автора: GoogleBot видит ссылки в комментариях, размещенных в HTML-коде страницы, но поисковик не учитывает их при ранжировании. В начале октября Мартину Сплитту (сотруднику Google) вебмастер в Twitter задал вопрос относительно того, как поисковик обрабатывает ссылки, размещенные в комментариях в HTML-коде. Но сразу Мартин не смог ответить вопрос и пообещал разобраться в этой ситуации. На днях представитель Google рассказал, что ...

Читать далее »

Drag and Drop с линейной интерполяцией в JavaScript

От автора: используйте линейную интерполяцию для создания плавного и эффективного UX перетаскивания с использованием vanilla JavaScript. Недавно я написал статью о реализации функции перетаскивания с использованием vanilla JavaScript. На этот раз я хочу применить линейную интерполяцию для логики перетаскивания, чтобы перетаскиваемый объект плавно «догонял» курсор / точку касания пользователя, а не сразу следовал за ним: Без линейной интерполяции С линейной ...

Читать далее »

4 неизвестных свойства макета CSS

От автора: CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех. PLACE-ITEMS Оно поражает многих разработчиков. Свойство place-items — это сокращение для свойств CSS align-items и justify-items. Если ...

Читать далее »