Время от времени я снова сталкиваюсь с веб-технологией, о существовании которой почти забыл. Не потому, что она старая, а потому, что она настолько новая и не поддерживается браузерами.

Одна из технологий — вариативные шрифты. И только сейчас стало понятно, что после первого представления в 2016 году, у них появилась надежная поддержка браузеров. Google Fonts даже начали развертывать фильтрацию по вариативным версиям еще в 2020 году. Это как поколение назад в веб-годы, поэтому я решил, что пришло время попробовать их.

В JavaScript HTML DOM (объектная модель документа) представляет структуру и содержимое HTML-документа в виде древовидной структуры. В нем каждый элемент, атрибут и текстовый узел в документе HTML представлен как узел в дереве DOM.

В этой статье вы узнаете, как можно использовать эту структуру для более эффективного управления поведением ваших HTML-элементов. Вы также узнаете, как использовать его для добавления динамической интерактивности в опыт ваших пользователей.

CSS предоставляет множество свойств, которые позволяют нам управлять положением элементов на веб-странице. Одним из таких свойств является vertical-aling, которое обычно используется для управления вертикальное выравнивание содержимого в элементах таблицы. В этой статье мы рассмотрим свойство вертикального выравнивания и способы его использования для центрирования содержимого таблицы.

Анимация печатной машинки часто выполняется с помощью Javascript. Но мы можем легко добиться такой анимации с помощью TailwindCSS.

Простая пишущая машинка

Tailwind Play: https://play.tailwindcss.com/17LendGXa0

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

Чтобы сделать текст адаптивным в CSS, вы можете применить следующие приемы:

Используйте относительные единицы:

Логические свойства CSS - это мощный инструмент для создания гибких, адаптивных веб-макетов. Используя логические свойства вместо традиционных физических свойств в вашем CSS-коде, вы можете создавать дизайны, которые автоматически адаптируются к различным размерам экрана и ориентации, без необходимости писать несколько версий одних и тех же правил компоновки. Логические свойства позволяют вам выразить логику вашего макета в терминах start/end вместо left/right или top/bottom, что упрощает создание макетов, которые работают на любом языке или в любом направлении написания. С помощью логических свойств вы можете упростить свой код, уменьшить избыточность и создавать более эффективные, динамичные веб-сайты, готовые к работе в современном Интернете.

Создание адаптивного веб-дизайна в CSS включает в себя адаптацию макета и стиля вашего веб-сайта к разным размерам экрана и устройствам. Вот руководство от базовых до продвинутых методов создания адаптивного дизайна в CSS:

Контактная форма - это больше, чем просто средство, с помощью которого посетители вашего сайта могут связаться с вами. Это также возможность собрать ценную информацию о них и лучше понять их потребности. В этом руководстве мы расскажем вам о процессе создания современной интерактивной контактной формы с использованием HTML, CSS и JavaScript.

В этой статье я покажу вам, как создать эффект бесконечной прокрутки, используя изображение в качестве фона.  Для начала вам потребуется подключение к CSS и некоторое понимание селекторов. Мы будем использовать 2 класса и ключевые кадры для целей анимации.

Вам понадобится: