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

1. Что такое position свойство?

Сегодня мы создадим базовый инструмент рисования с использованием Tailwind CSS и JavaScript. Мы будем использовать элемент 'Canvas' для рисования на странице и метод toDataURL для сохранения рисунка в формате PNG.

Таймеры обратного отсчета — популярная функция на многих веб-сайтах, которая расширяет функциональность для мероприятий, продаж и вовлечения пользователей. Хотя обычно используется JavaScript для динамического поведения в Интернете, также возможно создать функциональный и визуально привлекательный таймер обратного отсчета, используя только CSS.

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

В этой статье мы рассмотрим как создать собственное дерево ссылок на языке программирования Python и хостинга GitHub Pages. Мы создадим страницу похожую на LinkTree (Taplink) и реализуем проект на Python. Вот таким образом будет выглядеть наш результат.

Когда вы занимаетесь веб-дизайном, особое внимание стоит уделять мелким деталям. В частности это относится на способность элементов реагировать на запросы пользователей. В этой статье мы рассмотрим библиотеку Hover.css, которая предоставляет коллекцию плавных и привлекательных эффектов наведения. 

Hover.css предоставляет мощный инструмент для создания интерактивных и динамичных элементов на веб-страницах. Он позволяет изменять стили элементов при наведении курсора, что улучшает пользовательский опыт и делает интерфейс более привлекательным. Область применения довольно широка, вы можете использовать к ссылкам, кнопкам, изображениям и др.  Библиотека простая в интеграции и совместима со многими современными браузерами, чем привлекает внимание дизайнеров и разработчиков.

Существует аналогия, которая сравнивает языки программирования с домом: HTML — это структура дома (стены, перегородки), CSS — декор и оформление (мебель, интерьер), а JavaScript — функциональность (электроснабжение, сантехника).

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

На этом уроке вы научитесь создавать 3D-эффекты с помощью CSS, используя свойства и операции, которые позволяют управлять элементами в виртуальном 3D-пространстве. Мы также рассмотрим визуальные иллюзии с использованием теней и света.

Теперь, когда мы рассмотрели все основные темы Next.js в нашей серии, пришло время научиться стилизовать наше приложение Next.js.

Изучение того, как стилизовать приложение Next.js, — это часть фронтенд-разработки, которую нельзя пропустить. В Next.js мы можем создавать стили разными способами: Global CSS, CSS Modules, Tailwind CSS, CSS-in-JS, и Sass.

Tailwind CSS — это платформа, которая помогает нам создавать современные адаптивные веб-сайты без написания собственного кода CSS. Он имеет коллекцию предопределенных классов, которые мы можем использовать непосредственно в нашем HTML-коде для стилизации элементов.

Tailwind CSS — это CSS-фреймворк, ориентированный на утилиты. «Сначала утилита» означает, что у него есть набор небольших повторно используемых служебных классов, которые мы можем использовать по отдельности или вместе для легкого создания современных и сложных проектов. Таким образом, вместо того, чтобы писать собственный CSS для выделения абзаца жирным шрифтом, мы можем напрямую использовать шрифт-жирный, и все.

clip-path часто используется для обрезки узла DOM в определенные формы, например треугольники. Но что, если я скажу вам, что он также отлично подходит для анимации?

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

View Transition API — это революционный инструмент веб-разработки. Независимо от того, является ли ваш сайт одностраничным или многостраничным, этот мощный API позволяет вам создавать плавные переходы между представлениями, что приводит к нативному опыту, который очаровывает пользователей. В настоящее время доступно в Chrome, а вскоре такие же переходы между представлениями документов будут доступны в Safari.

Поскольку все больше людей начинают изучать API View Transition, пришло время развеять некоторые заблуждения.