Подключение

Скачиваем любую версию нашей библиотеки и подключаем её, как обычный CSS-файл.

<link href="css/AdaptiveText.css" rel="stylesheet" />

или

<link href="css/AdaptiveText.min.css" rel="stylesheet" />

Также можете подключить библиотеку по ссылке.

<link href="https://eugeneblogs.github.io/AdaptiveText/files/AdaptiveText.css" rel="stylesheet" />

или

<link href="https://eugeneblogs.github.io/AdaptiveText/files/AdaptiveText.min.css" rel="stylesheet" />

Адаптивный текст ^{главное достоинство}

С этим точно не возникнет проблем. Наша библиотека автоматически адаптируем элементы: h1, h2, h3, h4, h5, h6, p, а также другие элементы с классами: .h1, .h2, .h3, .h4, .h5, .h6, .p.

Я адаптивный заголовок первого уровня.

<h1>Я адаптивный заголовок первого уровня.</h1>

Я адаптивный заголовок второго уровня.

<h2>Я адаптивный заголовок второго уровня.</h2>

Я адаптивный заголовок третьего уровня.

<h3>Я адаптивный заголовок третьего уровня.</h3>

Я адаптивный заголовок четвёртого уровня.

<h4>Я адаптивный заголовок четвёртого уровня.</h4>

Я адаптивный заголовок пятого уровня.

<h5>Я адаптивный заголовок пятого уровня.</h5>

Я адаптивный заголовок шестого уровня.

<h6>Я адаптивный заголовок шестого уровня.</h6>

Я адаптивный параграф.

<p>Я адаптивный параграф.</p>

Цвета текста

Теперь из HTML-кода вы можете быстро присвоить цвет тексту! Мы предоставляем 11 вариантов!

Красный

<p class="red">Красный</p>

Оранжевый

<p class="orange">Оранжевый</p>

Жёлтый

<p class="yellow">Жёлтый</p>

Зелёный

<p class="green">Зелёный</p>

Голубой

<p class="cyan">Голубой</p>

Синий

<p class="blue">Синий</p>

Фиолетовый

<p class="purple">Фиолетовый</p>

Розовый

<p class="pink">Розовый</p>

Чёрный

<p class="black">Чёрный</p>

Белый

<p class="white">Белый</p>

Серый

<p class="gray">Серый</p>

Цвета фона

Эти же цвета можно использовать в качестве фона!

Красный

<p class="bg-red">Красный</p>

Оранжевый

<p class="bg-orange">Оранжевый</p>

Жёлтый

<p class="bg-yellow">Жёлтый</p>

Зелёный

<p class="bg-green">Зелёный</p>

Голубой

<p class="bg-cyan">Голубой</p>

Синий

<p class="bg-blue">Синий</p>

Фиолетовый

<p class="bg-purple">Фиолетовый</p>

Розовый

<p class="bg-pink">Розовый</p>

Чёрный

<p class="bg-black">Чёрный</p>

Белый

<p class="bg-white">Белый</p>

Серый

<p class="bg-gray">Серый</p>

Градиенты

Ещё один вариант украсить сайт - градиент - перелив одного цвета в другой.

Красный

<p class="gradient-red">Красный</p>

Жёлтый

<p class="gradient-yellow">Жёлтый</p>

Зелёный

<p class="gradient-green">Зелёный</p>

Синий

<p class="gradient-blue">Синий</p>

Фиолетовый

<p class="gradient-purple">Фиолетовый</p>

Тёмный

<p class="gradient-dark">Тёмный</p>

Прозрачность

Если нужно сделать что-то менее видным!

0%

<p class="tr-0">0%</p>

10%

<p class="tr-1">10%</p>

20%

<p class="tr-2">20%</p>

30%

<p class="tr-3">30%</p>

40%

<p class="tr-4">40%</p>

50%

<p class="tr-5">50%</p>

60%

<p class="tr-6">60%</p>

70%

<p class="tr-7">70%</p>

80%

<p class="tr-8">80%</p>

90%

<p class="tr-9">90%</p>

100%

<p class="tr-10">100%</p>

Дисплей

Быстрый доступ к свойству display.

Block

<p class="d-b">Block</p>

Inline

<p class="d-i">Inline</p>

Inline-Block

<p class="d-ib">Inline-Block</p>

Flex

<p class="d-f">Flex</p>

Inline-Flex

<p class="d-if">Inline-Flex</p>

Grid

<p class="d-g">Grid</p>

Inline-Grid

<p class="d-ig">Inline-Grid</p>

Table

<p class="d-t">Table</p>

Inline-Table

<p class="d-it">Inline-Table</p>

None

<p class="d-n">None</p>

Расположение текста

Привязка текста к одной из трёх сторон.

Слева

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quidem pariatur nobis expedita asperiores qui voluptatibus dolorem nisi adipisci ea provident doloribus quo debitis praesentium, minus vero quas obcaecati natus! Velit sit magnam repellendus mollitia saepe vitae repellat voluptatibus dolores! Quia sint id voluptatibus labore ullam illum, a molestiae eos, cum est consequatur quos illo aliquam dolorum dicta. Quis consequuntur aut perspiciatis ratione necessitatibus optio excepturi quod beatae ipsum assumenda impedit asperiores, deserunt aspernatur voluptatibus quidem placeat ut dolor iusto eum eveniet atque iure. Fugit praesentium, amet neque iure eveniet, earum ratione excepturi enim, tempore aliquam architecto at doloremque accusamus.

<h6 class="left">Слева</h6>

Центр

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quidem pariatur nobis expedita asperiores qui voluptatibus dolorem nisi adipisci ea provident doloribus quo debitis praesentium, minus vero quas obcaecati natus! Velit sit magnam repellendus mollitia saepe vitae repellat voluptatibus dolores! Quia sint id voluptatibus labore ullam illum, a molestiae eos, cum est consequatur quos illo aliquam dolorum dicta. Quis consequuntur aut perspiciatis ratione necessitatibus optio excepturi quod beatae ipsum assumenda impedit asperiores, deserunt aspernatur voluptatibus quidem placeat ut dolor iusto eum eveniet atque iure. Fugit praesentium, amet neque iure eveniet, earum ratione excepturi enim, tempore aliquam architecto at doloremque accusamus.

<h6 class="center">Центр</h6>

Справа

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quidem pariatur nobis expedita asperiores qui voluptatibus dolorem nisi adipisci ea provident doloribus quo debitis praesentium, minus vero quas obcaecati natus! Velit sit magnam repellendus mollitia saepe vitae repellat voluptatibus dolores! Quia sint id voluptatibus labore ullam illum, a molestiae eos, cum est consequatur quos illo aliquam dolorum dicta. Quis consequuntur aut perspiciatis ratione necessitatibus optio excepturi quod beatae ipsum assumenda impedit asperiores, deserunt aspernatur voluptatibus quidem placeat ut dolor iusto eum eveniet atque iure. Fugit praesentium, amet neque iure eveniet, earum ratione excepturi enim, tempore aliquam architecto at doloremque accusamus.

<h6 class="right">Справа</h6>

Равномерно

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quidem pariatur nobis expedita asperiores qui voluptatibus dolorem nisi adipisci ea provident doloribus quo debitis praesentium, minus vero quas obcaecati natus! Velit sit magnam repellendus mollitia saepe vitae repellat voluptatibus dolores! Quia sint id voluptatibus labore ullam illum, a molestiae eos, cum est consequatur quos illo aliquam dolorum dicta. Quis consequuntur aut perspiciatis ratione necessitatibus optio excepturi quod beatae ipsum assumenda impedit asperiores, deserunt aspernatur voluptatibus quidem placeat ut dolor iusto eum eveniet atque iure. Fugit praesentium, amet neque iure eveniet, earum ratione excepturi enim, tempore aliquam architecto at doloremque accusamus.

<h6 class="justify">Равномерно</h6>

Обычный текст (для сравнения)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quidem pariatur nobis expedita asperiores qui voluptatibus dolorem nisi adipisci ea provident doloribus quo debitis praesentium, minus vero quas obcaecati natus! Velit sit magnam repellendus mollitia saepe vitae repellat voluptatibus dolores! Quia sint id voluptatibus labore ullam illum, a molestiae eos, cum est consequatur quos illo aliquam dolorum dicta. Quis consequuntur aut perspiciatis ratione necessitatibus optio excepturi quod beatae ipsum assumenda impedit asperiores, deserunt aspernatur voluptatibus quidem placeat ut dolor iusto eum eveniet atque iure. Fugit praesentium, amet neque iure eveniet, earum ratione excepturi enim, tempore aliquam architecto at doloremque accusamus.

<h6>Обычный текст (для сравнения)</h6>

Пространство между...

Словами

Маленькое Маленькое Маленькое Маленькое Маленькое

<p class="sp-w-min">Маленькое Маленькое Маленькое Маленькое Маленькое</p>

Среднее Среднее Среднее Среднее Среднее

<p class="sp-w-med">Среднее Среднее Среднее Среднее Среднее</p>

Большое Большое Большое Большое Большое

<p class="sp-w-max">Большое Большое Большое Большое Большое</p>

Буквами

Маленькое

<p class="sp-let-min">Маленькое</p>

Среднее

<p class="sp-let-med">Среднее</p>

Большое

<p class="sp-let-max">Большое</p>

Строками

Маленькое
Маленькое

<p class="sp-line-min">Маленькое<br>Маленькое</p>

Среднее
Среднее

<p class="sp-line-med">Среднее<br>Среднее</p>

Большое
Большое

<p class="sp-line-max">Большое<br>Большое</p>

Стили текста

Дополнительный фишки для быстрого форматирования текста!

Обычный текст

<p class="normal">Обычный текст</p>

Жирный текст

<p class="bold">Жирный текст</p>

Курсив

<p class="cursive">Курсив</p>

Подчёркивание

<p class="line-down">Подчёркивание</p>

Надчёркивание

<p class="line-up">Надчёркивание</p>

Перечёркивание

<p class="line-center">Перечёркивание</p>

Большие буквы

<p class="up">Большие буквы</p>

Маленькие буквы

<p class="down">Маленькие буквы</p>

Начинать с больших букв

<p class="start-up">Начинать с больших букв</p>

Тень

Добавьте 3D-эффект вашему тексту!

Тень слева

<p class="shadow-left">Тень слева</p>

Тень спправа

<p class="shadow-right">Тень спправа</p>

Скругление

Красивая рамка для фотографий.

Лёгкое скругление

<img src="img/Example.jpg" class="round-25">

Среднее скругление

<img src="img/Example.jpg" class="round-50">

Сильное скругление

<img src="img/Example.jpg" class="round-75">

Мощное скругление

<img src="img/Example.jpg" class="round-100">

Максимальное скругление

<img src="img/Example.jpg" class="round-max">

Внешние отступы

Допустимые значения отступов: 0,5,10,15,20,25,30,35,40,45,50.

Отступ слева

<p class="m-l-30">Отступ слева</p>

Отступ справа

<p class="m-r-30">Отступ справа</p>

Отступ сверху

<p class="m-t-30">Отступ сверху</p>

Отступ снизу

<p class="m-b-30">Отступ снизу</p>

Отступ со всех сторон

<p class="m-a-30">Отступ со всех сторон</p>

Внутренние отступы

Допустимые значения отступов: 0,5,10,15,20,25,30,35,40,45,50.

Отступ слева

<p class="p-l-30">Отступ слева</p>

Отступ справа

<p class="p-r-30">Отступ справа</p>

Отступ сверху

<p class="p-t-30">Отступ сверху</p>

Отступ снизу

<p class="p-b-30">Отступ снизу</p>

Отступ со всех сторон

<p class="p-a-30">Отступ со всех сторон</p>

Списки

Быстрая стилизация элементов ol и ul.

Круг

• Элемент
• Элемент
• Элемент

<ul class="ul-disk">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ul>

Пустой круг

• Элемент
• Элемент
• Элемент

<ul class="ul-circle">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ul>

Квадрат

• Элемент
• Элемент
• Элемент

<ul class="ul-square">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ul>

Десятичные числа

1. Элемент
2. Элемент
3. Элемент

<ol class="ol-decimal">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>

Десятичные числа, перед которыми 0

1. Элемент
2. Элемент
3. Элемент

<ol class="ol-decimal-zero">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>

Маленькие римские цифры

1. Элемент
2. Элемент
3. Элемент

<ol class="ol-rom-low">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>

Большие римские цифры

1. Элемент
2. Элемент
3. Элемент

<ol class="ol-rom-up">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>

Маленькие латинские буквы

1. Элемент
2. Элемент
3. Элемент

<ol class="ol-alpha-low">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>

Большие латинские буквы

1. Элемент
2. Элемент
3. Элемент

<ol class="ol-alpha-up">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>

Греческие буквы

1. Элемент
2. Элемент
3. Элемент

<ol class="ol-greek">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>

Границы

Рамки для текста.

Линия

<p class="b-solid">Линия</p>

Штрихи

<p class="b-dashed">Штрихи</p>

Точки

<p class="b-dotted">Точки</p>

Двойная

<p class="b-double">Двойная</p>

Внутрь

<p class="b-inset">Внутрь</p>

Наружу

<p class="b-outset">Наружу</p>

3D-1

<p class="b-ridge">3D-1</p>

3D-2

<p class="b-groove">3D-2</p>

Кнопки

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

С нашим классом

Нажми на меня!
<button class="btn-ebc-red">Нажми на меня!</button>
Нажми на меня!
<button class="btn-ebc-yellow">Нажми на меня!</button>
Нажми на меня!
<button class="btn-ebc-green">Нажми на меня!</button>
Нажми на меня!
<button class="btn-ebc-blue">Нажми на меня!</button>
Нажми на меня!
<button class="btn-ebc-light">Нажми на меня!</button>
Нажми на меня!
<button class="btn-ebc-dark">Нажми на меня!</button>

Без нашего класса

Нажми на меня!
<button>Нажми на меня!</button>

Детали

Благодаря нашему классу, вы можете сразу красиво оформить элемент details. Мы не стали делать автоматическое оформление данного элемента, так как может кому-то оно не понравится.

С нашим классом

Заголовок

Текст.

<details class="details-ebc">
<summary>Заголовок</summary>
<div>Текст.</div>
</details>

Без нашего класса

Заголовок

Текст.

<details>
<summary>Заголовок</summary>
<div>Текст.</div>
</details>

Прелоудер

Невероятно красивая современная анимация загрузки.

<div class="loading-sphere">
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
</div>