Блог компании SkillFactory » TCSE разработка и техническое сопровождение сайтов на основе DLE (DataLife Engine)

[Перевод] Как сделать веб-шрифты красочными

Сегодня рассказываем о палитрах CSS в работе с многоцветными шрифтами COLRv1, которые поддерживаются в последних Chrome и Edge, и, конечно, показываем их возможности к старту курса по Frontend-разработке. Читать далее...

27 мая 2022 0 58 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Веб-дизайн, CSS, Типографика, Дизайн, skillfactory, типографика, веб-дизайн, дизайн, css, браузеры, шрифты, решения, палитры, цвета,

[Перевод] Как написать калькулятор на HTML и CSS без JavaScript

Материалом о разработке калькулятора на CSS и HTML, без файла JS, тега script и обработчиков событий в HTML делимся к старту курса по Fullstack-разработке на Python. За подробностями приглашаем под кат. Читать далее...

16 апреля 2022 0 72 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Ненормальное программирование, CSS, HTML, skillfactory, html, css, селекторы, @property, @counter, программирование, трюки, декларативное программирование, трюки в коде,

[Перевод] CSS @layer — полное руководство по каскадным слоям

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

9 марта 2022 0 122 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Разработка веб-сайтов, CSS, IT-стандарты, skillfactory, css, css3, слои, конфликты, правила, свойства, руководство, гайд, @layer,

[Перевод] Как подключиться к базе данных с помощью CSS

К старту курса по Fullstack-разработке на Python делимся материалом о том, как при помощи современных возможностей CSS и JS — ворклетов и API Houdini — подключиться к базе данных и выполнять запросы к ней. За подробностями приглашаем под кат. Читать далее...

8 февраля 2022 0 126 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Ненормальное программирование, CSS, SQL, SQLite, skillfactory, програмимрование, ненормальное программирование, css, houdini, js, рисование, canvas, sqlite, базы данных,

[Перевод] Конфетти и CSS-матрёшка в дизайн-системе StackOverflow

В дизайне StackOverflow используются праздничные модальные окна, поэтому команда SO разработала удобный способ отображения конфетти. Первым решением был простой статический SVG с конфетти на заднем плане. Позже команда обнаружила 12 разных статических конфетти по всему коду и поняла, что нужен...

9 декабря 2021 0 103 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Разработка веб-сайтов, CSS, Программирование, Графический дизайн, skillfactory, css, веб, svg, дизайн, codepen, матрёшка, решения, stackoverflow, модальные окна,

[Перевод] Как сделать удобное 3D-меню на CSS

В новых AR/VR-играх часто заставляют меню как будто парить в воздухе. Воссоздадим основу этого эффекта, добавим адаптивную цветовую схему и учтём пользователей, предпочитающих поменьше анимации. Меню будет работать со скринридером, геймпадом, сенсорным вводом и не только. Подробностями делимся к...

30 ноября 2021 0 163 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Веб-дизайн, Разработка веб-сайтов, CSS, Разработка игр, skillfactory, css, веб-дизайн, разработка игр, веб-разработка, игры, меню, css3, css3 animation, css3 transform,

[Перевод] Как избавиться от position: absolute в CSS

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

17 ноября 2021 0 102 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Веб-дизайн, Разработка веб-сайтов, CSS, HTML, skillfactory, css, css3, веб-дизайн, web, aspect-ratio, absolute, фронтенд, css grid, позиционирование,

[Перевод] Анимация при прокрутке с помощью WAAPI и ScrollTimeline

Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие эффекта анимации с прокруткой. Подробностями делимся под катом, пока у нас начинается курс по Frontend-разработке. Читать далее...

8 ноября 2021 0 124 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Разработка веб-сайтов, CSS, JavaScript, Программирование, skillfactory, css, анимация, анимация скролла, прокрутка, эффекты, веб-дизайн, w3c, спецификации, браузеры,

[Перевод] Разбираемся с цветами, палитрами, фильтрами CSS и не только

Этот материал — карманный справочник о том, как работать с цветом в CSS и вебе в целом. Он начинается с теоретических основ и содержит множество инструментов и примеров работы с градиентами, анимацией, SVG и не только. Статья будет полезна и новичку, и специалисту с опытом. За подробностями...

17 октября 2021 0 125 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Разработка веб-сайтов, CSS, Accessibility, Читальный зал, skillfactory, css, цвета, цвет, смешивание, adobe, photoshop, svg, градиент, полезное,

[Перевод] Как написать собственное свойство CSS

Благодаря Paint API из состава Houdini можно не ждать выхода новых возможностей CSS. Шаг за шагом автор этого материала показывает, как написать новое свойство CSS для анимации с фрагментацией. Делимся материалом, пока у нас начинается курс по Frontend-разработке. Читать далее...

12 октября 2021 0 134 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Разработка веб-сайтов, CSS, JavaScript, Canvas, skillfactory, css, css3, css animation, анимация, фрагментация, canvas, js, эффекты, houdini,

[Перевод] Как сделать Змейку на чекбоксах и не только

В допандемическом 2020 Брайан Браун отправился на неделю в Recurse Center и разработал Checkboxland. Эта библиотека JavaScript отображает текст и анимацию на сетке флажков. К забавному маленькому проекту автор сделал несколько демонстраций, написал об этом, а в итоге положил проект на полку и не...

11 октября 2021 0 125 Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании SkillFactory, Ненормальное программирование, CSS, JavaScript, Программирование, skillfactory, html, css, js, видео, анимация, чекбокс, чекбокс сss, чекбоксы, дизайн,

[Перевод] Как я написал веб-синтезатор без сэмплов и зависимостей

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