Это библиотека, которая адаптирует текст под все расширения устройств! Вам нужно написать одну строчку кода, вместо множества Media-запросов.
Данная страница написана с помощью нашей библиотеки. Как вы можете заметить - она превосходно выглядит на любом экране!
Простота подключения и использования
Сокращение кода
Дополнительные удобства (форматирование текста)
Размер: 17 КБ.
Скачать обычную версиюРазмер: 10 КБ.
Скачать MIN-версиюСкачиваем любую версию нашей библиотеки и подключаем её, как обычный 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>
<ol class="ol-decimal">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>
<ol class="ol-decimal-zero">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>
<ol class="ol-rom-low">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>
<ol class="ol-rom-up">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>
<ol class="ol-alpha-low">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>
<ol class="ol-alpha-up">
<li>Элемент</li>
<li>Элемент</li>
<li>Элемент</li>
</ol>
<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>