Традиционно цвета в CSS задаются с помощью модели RGB (red, green, blue — красный, зелёный, синий) в шестнадцатеричном формате. Вот, к примеру, как будет выглядеть белый цвет текста на зелёном фоне.

.primary { 
  background-color: #63a03e; /* Зелёный фон */
  color: #fff; /* Белый цвет */
}

Тот же цвет можно выразить и десятичными числами через стилевую функцию rgb().

.primary {
  background-color: rgb(99 160 62); /* Зелёный фон */
  color: rgb(255 255 255); /* Белый цвет */
}

Цветовая модель RGB поддерживает более 16 миллионов цветов, работает во всех браузерах и графических редакторах. Несмотря на такие преимущества, у неё есть и важный недостаток — она подходит для компьютеров и не удобна для людей.

• Довольно сложно интуитивно, без помощи сторонних программ, получить желаемый цвет.
• Также сложно, взяв определённый цвет, сделать его светлее или темнее.
• Изменение одного из параметров не даёт предсказуемый результат.

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

Но есть и другая категория веб-дизайнеров, которые хотят задавать цвет другим способом. Для них в CSS введена поддержка цветовых моделей HSL, HWB, LAB, LCH и OKLCH. О последней и поговорим подробнее.

Сделал первый учебный курс на Stepik под названием CSS на примерах.

Курс охватывает такие темы:

• подключение стилей;
• синтаксис CSS;
• псевдоклассы
• псевдоэлементы;
• вложения;
• переменные CSS;
• каскадные слои;
• медиа-запросы.

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

По промокоду HTMLBOOK цена до конца сентября снижена до 300 рублей.

Обновил справочник CSS на сайте webref.ru. Появилось много нового:

• изменились некоторые примеры, чтобы они лучше отражали суть элементов HTML;
• поменялись скриншоты для примеров — они стали высокого разрешения и более симпатичные;
• картинки в примерах тоже заменены на изображения высокого разрешения;
• обновились таблицы с версиями браузеров, где написано, с какой версии тот или иной браузер поддерживает элемент HTML;
• исправлены мелкие орфографические ошибки, вроде той, где вместо ё было написано е. Да, это тоже считается ошибкой.

И не забывайте, что примеры в справочнике интерактивные — если в примере есть ссылка, то её можно открыть, а не просто так на неё смотреть. Код каждого примера можно скопировать в буфер или буквально одним щелчком открыть в CodePen или JSFiddle, где доработать по своему желанию.

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

Селекторы потомка и дочерние селекторы читаются слева направо, следующая запись означает, что следует найти все элементы <button>, внутри них <span> и стиль применить уже к ним.

button > span { color: red; }

В CSS не существует селектора родителя, позволяющего применить стиль к родителю при наличии у него указанного дочернего элемента. Роль такого селектора выполняет псевдокласс :has().

Псевдокласс :has() применяет стилевые правила к элементу, если у него есть указанный потомок или родственный элемент. Это даёт возможность задавать стили родителя на основе его дочерних элементов. К примеру, следующая запись означает применить стиль к элементу <li>, если внутри него располагается элемент <a>.

li:has(a) { background-color: tomato; }

Платформа Pandorra.pro, о которой мы писали ранее, предлагает распродажу своего продукта. Скидка составляет 90%, акция заканчивается завтра, 6 июня. Платёж делается один раз и навсегда, никаких месячных отчислений больше не планируется.

Что умеет делать Pandorra.pro:

• создаёт шаблон типовой страницы по её описанию;
• с помощью встроенной нейросети пишет текст по запросу на основе тематики сайта;
• к тексту генерирует подходящие по смыслу картинки в желаемом стиле;
• может модифицировать уже готовые изображения;
• для отдельных элементов полученной веб-страницы с помощью нейросети можно генерировать CSS и править его вручную или редактируя запрос.

Торопитесь, после завершения акции цена снова станет прежней.

Нейросети сейчас повсюду, в том числе они помогают программистам и веб-разработчикам в решении повседневных, типовых и рутинных задач. Сервис Pandorra.pro позволяет делать сайты на платформе WordPress, дополняя её работу возможностями встроенной нейросети. Что она умеет:

• сама пишет текст статьи;
• генерирует изображения по запросам, подходящим к содержимому статьи;
• при необходимости меняет готовое изображение;
• по нашим указаниям формирует стиль элементов.

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

Сделай градиентный текст заголовка, который переходит от ярко-голубого к ярко-розовому.

В итоге получится следующий код с градиентом под 90 градусов (идущим слева направо) и цветами в шестнадцатеричном формате.

.selector h1 {
  background-image: linear-gradient(90deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  color: transparent;
}

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

.selector h1 {
  background-image: linear-gradient(#00ffff, #ff00ff);
  -webkit-background-clip: text;
  color: transparent;
}

Сервис Pandorra.pro платный, но сейчас идёт распродажа и можно приобрести «вечную» лицензию по хорошей цене.

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

Сама функция rgb() принимается в качестве значения стилевого свойства и позволяет установить цвет фона или текста с помощью цветовой модели RGB. В настоящий момент функция rgb() поддерживает два синтаксиса, несколько различающихся между собой: традиционный и современный.

В CSS добавились новые стилевые тригонометрические функции, такие как sin(), cos(), tan() и др. В физике, математике и программировании, понятно, тригонометрические функции востребованы и нужны для различных вычислений. Но где их можно применять в веб-дизайне? В итоге появление всяких синусов и косинусов вызвало недоумение у многих веб-разработчиков. Давайте разбираться, где и как их можно использовать на практике.

Для начала вспомним, что собой вообще представляют синус и косинус на примере прямоугольного треугольника (рис. 1).

Рис. 1. Прямоугольный треугольник

Синусом угла φ называется отношение противолежащего катета к гипотенузе.

Косинусом угла φ называется отношение прилежащего катета к гипотенузе.

Синус и косинус используется при вычислении координат точки на окружности, когда нам известен радиус и угол φ между горизонтальной осью и линией, соединяющей нашу точку с центром окружности (рис. 2).

Рис. 2. Точка на окружности

Используя определения синуса и косинуса получаем формулы для вычисления координат точки x и y.

• x = R·cos φ
• y = R·sin φ

На webref.ru добавилось новое руководство от Мэта Маркиза, посвящённое изображениям, в том числе и адаптивным. В руководстве изучаются разные графические форматы, включая современные (WebP, AVIF), синтаксис элемента <picture> и атрибуты srcset и sizes.

Рекомендуется в первую очередь тем, кто интересуется адаптивной вёрсткой и подготовкой изображений под разные устройства.

На webref.ru добавился учебный курс по MathML.Это язык разметки математических выражений, который расширяет возможности HTML. В курсе рассказывается, как писать математические выражения, содержащие дроби, корни, степени, интегралы и суммы. Также написано про системы уравнений и матрицы.

Каждый урок сопровождается самостоятельной работой (всего 35 заданий), а ещё есть интерактивные задания и тесты для закрепления прочитанного материала.

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

Программисты – одни из самых высокооплачиваемых работников, причём не только в IT-индустрии. Больше опытного кодера получают разве врачи, узкие специалисты и разного рода менеджеры (управляющее звено). Для желающих примкнуть к сообществу разработчиков, выучить новый язык или повысить квалификацию мы сделали подборку лучших курсов по программированию. Ещё больше курсов вы сможете найти на агрегаторе онлайн-курсов.

Java-разработчик | GeekBrains

• Для кого: будущие разработчики, IT-специалисты (переквалификация).
• Формат: живые и записанные лекции, практические задачи, контрольные работы, тренажёр, аттестация.
• Длительность: 9 месяцев (15 часов еженедельно).
• Стоимость: 36 × 3 839 ₽/мес.
• Документ: диплом.
• Проекты для портфолио: есть.
• Преподаватели: команда из 24 экспертов — программисты, DevOps-инженеры.
• Программа: Основы программирования. Git. Базы данных. Математика для IT. Алгоритмы, структуры данных. ООП. Обработка исключений. Инструменты Java. Spring. Linux. Контейнеризация. SQL. Карьерные мероприятия.

Созданный с учётом требований рынка курс по изучению языка Java, где освоите серверную разработку: создание сайтов, веб-приложений, работу с базами данных, их поддержку. Также научитесь искать и исправлять ошибки, оптимизировать код, повышать стабильность работы продукта, обеспечивать его безопасность, разрабатывать техническую документацию.

Особенности

• На практику отведено 300+ часов (100+ заданий).
• Обратная связь от практиков, ревью кода.
• Бесплатная консультация в выборе программы.
• Изучение 23 инструментов разработчика.
• Курс по нейросетям и английскому языку в подарок.

Преимущества

• Асинхронный формат – учитесь, когда удобно.
• Доступ к дополнительным материалам, закрытому каналу.
• Трудоустройство в течение 3 месяцев или возврат всей суммы, потраченной на обучение.
• Помощь в построении карьеры.
• Работа с преподавателем.
• Рассрочка без переплат.

Недостатки

• Изучать Java с нуля будет непросто, но проявив упорство и больше работая с преподавателем, справляются даже новички.

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

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

Основы Python-разработки | Яндекс.Практикум

• Для кого: все желающие, обучение с нуля.
• Формат: теоретические материалы, практика на интерактивной платформе.
• Длительность: 20 часов.
• Чему научитесь: на мини-курсе освоите основы бэкенд-разработки на Python. Вы научитесь писать код и создадите личного помощника Анфису, способного искать информацию на сторонних ресурсах.

Руководство от Ахмада Шадида, где рассматриваются современные методы построения адаптивных макетов. Сюда входит использование флексов, гридов, контейнерных запросов, а также функций вроде clamp().

Добавил новое большое руководство по Bootstrap 5 от Йена Диксона. Новые возможности, типографика, работа с формами и таблицами, компоненты — всё это вы найдёте в руководстве.

Bootstrap — это бесплатный набор инструментов с открытым исходным кодом для создания сайтов и веб-приложений. Это самый популярный HTML, CSS и JavaScript-фреймворк для разработки адаптивных и ориентированных на мобильные устройства проектов в Интернете.