инструкция
Для чего нужен этот лонгрид
Инструменты нашей платформы дают возможности для создания структурно-слаженного лонгрида, но если при создании проекта вам хочется визуально разнообразить оформление — это возможно сделать со специальными кодами HTML, собранными в этом лонгриде (коды применяются для всех текстовых блоков).
ВНИМАНИЕ! Не перенагружайте лонгрид большим количеством разных визуальных приемов! Данные коды нужны для добавления акцентов и усилении иерархии. Обязательно проконсультируйтесь с преподавателем об визуальном облике вашего лонгрида.
инструкция
Как поменять цвет в коде
- Поймите какой код цвета* вы используете для своего проекта. Это можно сделать через любую программу, где есть работа с цветом (Photoshop, Illustrator, Figma, и др.) или через специальные сайты: пример такого сервиса*Код цвета имеет знак # и набор цифр, букв2. Скопируйте свой код цвета и найдите в коде место которое начинается с решетки:<span style="background-color: #D9D9D9;border-radius:8px; padding:4px 8px;">Ваш текст здесь</span>3. Замените код цвета на свой.
! ОБЯЗАТЕЛЬНО должен быть только один знак # в коде.
инструкция
Как встроить код в часть текста
Код состоит из начального знака < и конечного знака >. Когда внутрь кода вы поместили нужный вам текст, после знака > должно быть продолжение текста.Пример:
<span style="background-color:#FF77B7; font-weight:700; padding:3px 6px;">Нужный вам текст стоит здесь</span>После знака пишем продолжение текста.
Выделяем главное в тексте
Текст со скруглённой плашкой
<span style="background-color:#D9D9D9; border-radius:8px; padding:4px 8px;">Ваш текст здесь</span>
Текст с акцентом
<span style="border-bottom:3px solid #8B5CF6;">Ваш текст здесь</span>
Небольшое пояснение
<span style="border-left:4px solid #8B5CF6; padding-left:10px;">Ваш текст здесь</span>
Главное определение
<span style="background-color:#FF77B7; font-weight:700; padding:3px 6px;">Ваш текст здесь</span>
Текст в рамке
<span style="border:1px solid #BDBDBD; padding:4px 8px; border-radius:6px;">Ваш текст здесь</span>
Изменить цвет текста или фразы
<span style="color:#6D4AFF; font-weight:600;">Ваш текст здесь</span>
Работа с начертанием и иерархией
Базовый заголовок
<h1 style>Ваш текст здесь</h1>
Регулируем толщину текста
как хотим
Для того чтобы регулировать толщину, вводите нужное число после слова «weght»<h1 style="font-weight:900;">Ваш текст здесь</h1>
Изменение размера текста
Для того чтобы регулировать размер, вводите нужное число после слова «size»<h1 style="font-size:20px;">Ваш текст здесь</h1>
Курсив
<h1 style="font-style:italic;">Ваш текст здесь</h1>
