HTML + Сайт

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

Строчные элементы в HTML - ссылка на материалы

Файлы с урока - GitHub repo

Документация на строчные элементы - ссылка

Мои соц. сети:

Telegram

LinkedIn

Twitter

Facebook

Instagram

----------- ТРАНИСКРИПТ УРОКА -------------

В современной верстке выделяется 2 типа элементов:

• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

Строчные элементы

Они не занимают всю ширину родителя в которого вложены, из-за чего соседствующие с ними элементы не переносятся на новую строку. Они высчитывают свою ширину в зависимости от ширины контента который в них вложен.

Основные списочные элементы: span, a, i, b, strong, em

Мы можем вкладывать строчные элементы в блочные и в другие строчные элементы, но вкладывать блочные элементы в строчные не рекомендуется, так как это нарушает семантику и усложняет чтение кода.

ВАЖНО!

Сами по себе элементы не являются ни блочными ни строчными, а также не имеют никаких стилей сами по себе. HTML - это все лишь разметка. Для всех тегов существуют стандартные стили которые по-умолчанию настроены в браузере. За стилизацию элементом всегда отвечает язык CSS который и будет определять то блочный элемент или строчный, а также множество других стилей.

P.S. Больше курсов у меня на канале

<hr>  <!-- Вариант 1 -->
<hr />  <!-- Вариант 2 -->
<br>  <!-- Вариант 1 -->
<br />  <!-- Вариант 2 -->

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

<section>
<h2>Some another title</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
excepturi incidunt maxime odio sint? Commodi cupiditate modi nesciunt
pariatur tempore?
</p>
</section>

<ul>
<li>Lorem ipsum.</li>
<li>At, maxime!</li>
<li>Dolores, recusandae.</li>
</ul>

Привет, пикабу!

Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.

Расскажу про изменения и обновления за это время.

Вращение градиента

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

Новый вид страницы градиента

Добавление градиента в общую ленту

Зарегистрированные пользователи могут добавить свои градиенты в общую ленту.

Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.

Пользователю придёт письмо о добавлении в общую ленту и ссылка на градиент.

Генерация градиентов без грязных переходов

Случайная генерация градиентов теперь красивая, не появляются грязные переходы, а цвета рассчитываются по HSL модели.

Появился инструмент смешивания цветов

Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.

Просто про режимы RGB и HSL:

Смешивая синий и желтый в RGB вы получите серый цвет, а в режиме HSL зеленый. В RGB между синим и желтым на цветовом круге серый цвет поэтому их сложение его и даст, а в HSL получится дуга т.к. цвета на разном уровне.

Появился генератор оттенков

Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.

Набор сочетаний цвета текста и фона

На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.

Можно отсортировать наборы по контрасту, времени и просмотрам.

На подробной странице сочетания добавлен заголовок, абзац текста со всеми буквами алфавита и различные начертания шрифта.

Генерация сочетаний цвета текста и фона

К наборам добавил генерацию и для пользователей.

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

Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.

Буду рад критике и советам.

Ссылка на сайт — https://gradients.app/ru

Спасибо, всем!

Привет, пикабу!

Делюсь своим проектом Gradients.app, занимаюсь им в свободное время и очень жду замечаний и предложений. Проект может пригодиться дизайнерам и иллюстраторам — тут про цвета и градиенты.

Набор градиентов

На сайте можно скачать градиенты разных размеров в PNG, скопировать цвета по отдельности и CSS-коды градиентов. Градиенты сортируются по цветам, скачиваниям и дате. Градиентов на сегодня 87, добавляю их самостоятельно, если у вас есть классные сочетания — буду рад их добавить.

Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.

Генератор градиентов

Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.

Наборы палитр

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

Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.

Генератор палитры по фото

Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.

Проект переведен на английский и частично на китайский язык.

Буду рад критике и идеям, может что-то вышло неудобно и непонятно.

Ссылка на сайт — https://gradients.app/ru

Спасибо, всем!