Полезные приёмы и примеры для верстальщиков и дизайнеров.
-
Предупреждение: На этой странице используется нестандартное свойство «zoom»
Реагируем на сообщение: На этой странице используется нестандартное свойство «zoom». Попробуйте использовать calc() в соответствующих значениях свойств или использовать «transform» вместе с «transform-origin: 0 0»
-
Атрибуты async и defer для скриптов
Атрибуты async и defer позволяют оптимизировать загрузку и выполнение скриптов
-
Свойство scroll-margin-top определяет размер верхнего отступа внутри контейнера прокрутки
Это свойство особенно полезно при наличии фиксированной верхней панели или других элементов, которые могут перекрывать часть содержимого при прокрутке до него
-
Свойство inset в CSS используется для одновременного задания значений внутреннего отступа
Это свойство является сокращённой формой записи для свойств top, right, bottom и left
-
Классические стили для оформления ссылок на чистом CSS
Эти стили можно применять для разнообразия визуального представления ссылок
-
Многоколоночный макет (Multi column layout) в CSS
Это способ организации контента в несколько колонок, что улучшает читабельность и визуальное восприятие
-
Стилизация кнопки выбора файла input type=file
Базовый пример CSS, который можно использовать для стилизации кнопки выбора файла
-
CSS код создаёт эффект глюка или сбоя
Эффекта включает в себя небольшие изменения цвета и скосы
-
Запрет индексации сайта в robots.txt
Для запрета индексации сайта поисковыми системами используйте директиву Disallow
-
Форматирование текста в сообщениях Телеграм
Telegram поддерживает несколько способов форматирования текста
-
Мягкий перенос строки в HTML
Этот символ является неразрывным пробелом, который может превратиться в перенос строки при необходимости
-
Шпаргалка по markdown синтаксису с примерами
Markdown — это легковесный и простой язык разметки, который преобразует обычный текст в форматированный
-
Предварительное соединение с доменом с помощью preconnect
Этот атрибут используется для установки предварительного соединения с определённым доменом
-
Предварительное разрешение имён DNS для доменов с помощью dns-prefetch
Используется для предварительного разрешения имён DNS для доменов, на которые будет производиться запрос в будущем
-
Предварительная загрузка ресурсов с помощью prefetch
Используется для предварительной загрузки ресурсов, которые, как ожидается, будут использоваться в следующих навигационных запросах
-
Предварительная загрузка ресурсов с помощью preload
Используется для предварительной загрузки ресурсов, таких как изображения, видео, стили и скрипты, которые будут использоваться на странице
-
modulepreload для загрузки модуля JavaScript в фоновом режиме
modulepreload - это атрибут HTML, который указывает браузеру, что модуль JavaScript нужно загружать в фоновом режиме
-
Отложенная загрузка изображений в HTML
Атрибут loading с значением lazy в HTML позволяет отложить загрузку изображений, которые находятся вне видимой области экрана
-
Запретить браузеру проверку правописания текста
Если значение атрибута spellcheck не указано, то браузер будет использовать настройки по умолчанию
-
Запретить браузеру переводить текст сайта на другой язык
Атрибут translate используется для указания, должен ли браузер переводить текст на другой язык
-
Атрибут ping для ссылки
Используется для указания URL, который получит уведомление при клике
-
Атрибут download для ссылки
Атрибут download используется для того, чтобы при клике на ссылку, пользователь мог скачать файл, а не перейти на другую страницу
-
Градиентная тень с помощью CSS
Используйте свойство filter с параметрами blur и brightness
-
Резервные значения для переменных CSS
Используются для значения по умолчанию, если переменная не определена или имеет недопустимое значение
-
Заполнение текста изображением с помощью CSS
Используйте свойство background-clip и background-image
-
Кастомный курсор css
Нужно использовать свойство cursor и указать значение url() с ссылкой на изображение курсора
-
Конвертация шрифта TTF в форматы WOFF и WOFF2
Можно использовать специальные инструменты, такие как woff-converter или fontforge
-
Базовый HTML код формы обратной связи
Пример базовой формы обратной связи
-
Плавные переходов между состояниями элемента в CSS
CSS Transition - это способ задания плавных переходов между начальным и конечным состояниями элемента при изменении его свойств
-
Переменные в CSS
Пример использования CSS переменных (CSS variables) в CSS-стилях