Секреты, трюки, приемы

Руководство по современным цветам CSS - RGB, HSL, HWB, LAB и LCH

Руководство по современным цветам CSS - RGB, HSL, HWB, LAB и LCH

alexei06/01/2022 - 09:52
Знаете ли вы, что выбранная вами цветовая палитра может влиять на количество потребляемой вашим сайтом энергии? И выбор определенных цветов может увеличить время автономной работы мобильных устройств. В этой статье даются советы по не очень очевидным вещам, о которых следует помнить, работая с цветами в CSS
Подробное руководство по темному режиму на сайте

Подробное руководство по темному режиму на сайте

alexei05/12/2021 - 09:09
Темный режим в последнее время приобрел большую популярность. Так, например, компания Apple добавила темный режим в свои операционные системы iOS и macOS. Windows и Google сделали то же самое. Давайте же взглянем на темный режим в контексте веб-сайтов
Как использовать object-fit и background-size в CSS

Как использовать object-fit и background-size в CSS

alexei06/11/2021 - 09:01
Мы не всегда можем предоставить для HTML элемента изображение нужного размера. Если же мы используем контейнер с шириной и высотой, которые не пропорциональны соотношению сторон изображения, то изображение будет либо сжато, либо растянуто. Это выглядит нехорошо, однако решить эту проблему
Галерея изображений с увеличением по клику

Галерея изображений с увеличением по клику

alexei19/10/2021 - 09:23
Одним из вариантов использования CSS-сетки является отображение галереи изображений, но галерея сама по себе не так уж и впечатляет. Но мы могли бы, например, добавить эффект, когда при нажатии мышкой на изображение галереи, оно будет увеличиваться, не влияя на всю сетку. Это уже будет интереснее
Теперь можно обойтись и без псевдоэлементов

Теперь можно обойтись и без псевдоэлементов

alexei04/10/2021 - 09:27
В течение многих лет псевдоэлементы добросовестно помогали разработчикам реализовывать креативные проекты. Хотя они все еще занимают важное место, однако теперь, благодаря новым свойствам CSS, в некоторых сценариях мы можем отказаться от псевдоэлементов
Как использовать в CSS цвета в формате HSL

Как использовать в CSS цвета в формате HSL

alexei26/07/2021 - 09:30
В настоящее время большинство цветов, определяемых в CSS, задаются в формате hex и RGB. Но кроме этого существует еще один формат цвета, который в последнее время становится все более популярным, - это HSL. В данной статье хотелось бы показать, как HSL действительно может помочь нам лучше работать с цветами в CSS.
Проблемы переполнения в CSS и способы их решения

Проблемы переполнения в CSS и способы их решения

alexei15/06/2021 - 09:48
В этой статье мы рассмотрим причины возникновения проблем с переполнением в CSS и способы их решения. Мы также рассмотрим, как современные инструменты разработчика могут облегчить процесс выявления этих проблем и отладки кода
Как уменьшить фотографию - Простые и эффективные способы

Как уменьшить фотографию - Простые и эффективные способы

alexei06/03/2021 - 09:26
Это умение пригодится, особенно когда вы публикуете файлы в интернете или хотите отправить их по электронной почте. Мы подскажем, как простыми способами изменить разрешение и вес фотографии без большой потери качества
Как выровнять HTML изображение по центру

Как выровнять HTML изображение по центру

alexei10/08/2020 - 08:53
Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов - как выровнять изображение по центру определенной секции
Кнопка Наверх своими руками

Кнопка "Наверх" или Scroll To Top своими руками

alexei07/04/2020 - 09:16
Повысить удобство работы вашего сайта можно с помощью особой кнопки в виде стрелки вверх, которая появляется тогда, когда пользователь начинает прокручивать страницу вниз. При нажатии на такую кнопку страница плавно прокручивается вверх
Умное перенаправление по ошибке 404

Умное перенаправление по ошибке 404

alexei18/02/2020 - 10:38
Плохо реализованная страница ошибки 404 ("Страница не найдена") может стать причиной массовой потери посетителей и клиентов сайта. И с этим следует всячески бороться. Ведь даже страница с ошибкой 404 является потенциальной воронкой конверсии, если, конечно, все сделать правильно. При этом, если сайт построен криво, то такая страница может даже стать вашей самой посещаемой целевой страницей
Нет изображения

Возможно вам больше не потребуется jQuery

alexei24/09/2019 - 09:35
С момента выпуска jQuery в 2006 году DOM и нативное API браузеров значительно улучшились. Статьи о том, что вполне можно обходиться без jQuery, выходят с 2013 года. Не хотелось бы пересказывать уже старые тезисы, но с тех пор в браузерной стране многое изменилось. Браузеры продолжают внедрять новые API-интерфейсы, которые избавляют от проблем при разработке без использования JavaScript библиотек, многие из которых напрямую скопированы из jQuery
Нет изображения

Оптимизируем загрузку шрифтов Google

alexei07/08/2019 - 09:25
Шрифты Google легко внедрить на сайт, но они могут оказать большое влияние на время загрузки вашей страницы. Давайте рассмотрим, как мы можем загрузить их наиболее оптимальным способом
Скорость загрузки сайта

Как настроить критические последовательности рендеринга веб-страницы

alexei12/06/2019 - 20:11
Настройка идеальной критической последовательности рендеринга является одним из наиболее важных аспектов формирования быстрого отображения веб-страниц. Команда Google PageSpeed ​​уже несколько лет проливает свет на эту концепцию и считает ее одним из ключевых факторов скорости страницы. А когда говорят эти специалисты, то их следует слушать
Оптимизация загрузки CSS

Оптимизация загрузки CSS

alexei10/05/2019 - 09:52
Несмотря на то, что введение технологии CSS стало серьезным новшеством, которое до сих пор практически не имеет недостатков, важно понимать, как использование скриптов CSS может влиять на скорость загрузки веб-страницы, особенно когда речь заходит о ее визуализации