Краткая шпаргалка по CSS. Часть 2

7. Цвета

- Цвета по названию: red, blue, green.
- HEX: #ff0000 — красный цвет.
- RGB: rgb(255, 0, 0) — красный цвет.
- RGBA: rgba(255, 0, 0, 0.5) — красный цвет с 50% прозрачностью.

Пример:

body {
  background-color: #f0f0f0;
  color: rgb(0, 128, 0);
}

8. Шрифты и текст

#### Шрифты

body {
  font-family: 'Arial', sans-serif;
}

#### Размер шрифта

p {
  font-size: 16px;
}

#### Жирный и курсив

strong {
  font-weight: bold;
}
em {
  font-style: italic;
}

#### Высота строки и выравнивание текста

p {
  line-height: 1.5;
  text-align: center;
}

9. Фоновые изображения и цвета

body {
  background-color: #e0e0e0;  /* Цвет фона */
  background-image: url('image.jpg');  /* Изображение фона */
  background-repeat: no-repeat;  /* Изображение не повторяется */
  background-size: cover;  /* Изображение растягивается по всему фону */
}

10. Flexbox (модель для выравнивания элементов)

#### Основные свойства контейнера:

.container {
  display: flex;
  justify-content: center;  /* Выравнивание по горизонтали */
  align-items: center;  /* Выравнивание по вертикали */
}

#### Основные свойства для элементов внутри Flexbox:

.item {
  flex-grow: 1;  /* Элемент занимает все доступное пространство */
  flex-shrink: 0;  /* Элемент не сжимается */
  flex-basis: 200px;  /* Начальный размер элемента */
}

11. Grid (сетка)

#### Определение контейнера Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Три колонки одинаковой ширины */
  grid-gap: 10px;  /* Отступы между элементами */
}

#### Расположение элементов Grid

.item {
  grid-column: 1 / span 2;  /* Элемент занимает две колонки */
  grid-row: 1 / 2;  /* Элемент на первой строке */
}

12. Переходы и анимации

#### Переходы

a {
  transition: color 0.3s ease;
}
a:hover {
  color: red;
}

#### Анимации

@keyframes example {
  0% { background-color: red; }
  100% { background-color: yellow; }
}
div {
  animation: example 5s infinite;
}

👉 @frontend_1

Анимированный SVG-логотип

Впервые я увидел такую анимацию штрихов в SVG в Material Line Icons Вячеслава Трушкина. Это было круто, но я никогда не задумывался о том, чтобы сделать что-то свое, пока не увидел баннер Му-Ан Чиоу на ее сайте. Я вдруг почувствовал, что тоже хочу быть крутым парнем!

https://antfu.me/posts/animated-svg-logo

👉 @frontend_1

Совет по Javascript 💡

Возможно вы не знаете об этом простом способе сортировки без учета регистра.

👉 @frontend_1

Красивый и последовательный набор иконок, созданный сообществом.

Проект с открытым исходным кодом и форк Feather Icons.
Мы расширяем набор иконок настолько, насколько это возможно, сохраняя при этом приятный внешний вид - присоединяйтесь к нам!

https://lucide.dev/

https://github.com/lucide-icons/lucide

👉 @frontend_1

Cовет💡

Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.

👉 @frontend_1

Пишем одностраничное приложение с помощью htmx

JS-библиотеку htmx воспринимают как средство, которое спасает интернет от одностраничных приложений. Всё дело в том, что React поглотил разработчиков своей сложностью (так говорят), а htmx предлагает столь желанное спасение.

Создатель htmx, Карсон Гросс, иронично объясняет эту динамику библиотеки так:

Нет, здесь у нас диалектика Гегеля:

- тезис: традиционные многостраничные приложения,
- антитезис: одностраничные приложения,
- синтез (возвышенная форма): гипермедиа-приложения с островками интерактивности.

https://habr.com/ru/companies/ruvds/articles/849854/

👉 @frontend_1

Адаптивные SVG

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

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

https://12daysofweb.dev/2023/responsive-svgs/

👉 @frontend_1

Поговорим про деньги в IT?

Приглашаем опытных IT-специалистов пройти небольшой опрос про зарплаты и бенефиты в технологических компаниях. Это займёт не более 7 минут — а ваше мнение поможет одному крупному российскому работодателю делать актуальные оферы.

Пройти опрос можно здесь

Совет по HTML 💡

Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?

👉 @frontend_1

Совет по JavaScript 💡

Возможно, вы не знали об этом простом способе выполнения сортировки без учета регистра

👉 @frontend_1

Улучшаем типизацию роутинга в Next.js

Неработающие ссылки, неправильно сформатированные строки запросов и отсутствующие параметры маршрута — всё это легко решаемо с помощью типизированной системы, такой как TypeScript.

К сожалению, большинство современных решений для маршрутизации, включая Next.js, не включают этого, оставляя нас одних в холодной, тёмной ночи.

В Next.js есть экспериментальная функция с возможностью подключения для статически типизированных ссылок. Чтобы её включить, активируйте experimental.typedRoutes в вашем файле next.config.js следующим образом:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    typedRoutes: true,
  },
}
 
module.exports = nextConfig

https://www.flightcontrol.dev/blog/fix-nextjs-routing-to-have-full-type-safety


👉 @frontend_1

33 Концепта

33 концепции JavaScript, которые должен знать каждый разработчик.

Данный репозиторий был создал с целью помочь разработчикам лучше разобраться в концептах JavaScript. Это не требование, а руководство для будущих исследований. Он основан на статье, написанной Стивеном Кертисом, и вы можете прочитать ее здесь.

https://github.com/gumennii/33-js-concepts

👉 @frontend_1

Создаем drag and drop, используя HTML, CSS и Javascript 👨‍💻

https://github.com/atherosai/ui/tree/main/drag-and-drop-04


👉 @frontend_1

Совет по Javascript 💡

👉 @frontend_1

Хотите узнать, как создать чат-приложение с использованием React и WebSockets?

На вебинаре вы узнаете:
- Основы WebSockets и их интеграция с React.
- Реализация функциональности чата.
- Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния).

Этот вебинар будет полезен:
- JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени.
- Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений.
- Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями.

После вебинара вы сможете:
- Настроить и управлять WebSocket соединением в React-проектах.
- Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений.
- Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры).

Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров!

Регистрируйтесь на открытый вебинар прямо сейчас! 👇

https://vk.cc/cDM83c

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576