Сделать адаптивные круги с текстом с помощью CSS
 | |
| Легко создавать отзывчивые круги с помощью CSS, но главное знать, как правильно сделать, чтоб корректно отображались на мобильных аппаратах. Ведь на современном шаблоне это просто необходимость, а если еще будет установлено на главной страницы, то безусловно все элементы должны быть отзывчивым по стилистике. Добавьте текст или шрифт, как удивительный значок в круг и даже добавьте фоновое изображение. Использование CSS3, это окружность и других формы чрезвычайно легко создавать без использования изображений или других скриптов. Вы можете использовать окружность в качестве кнопок или даже размещать в них значки или другой контент. Вот пример чувствительного круга, что представлен в материале, за исключением того, что добавление дополнительного класса ztumol-content где будет идеально центрировать любой контент, который мы выбираем для размещения в нашем круге, независимо от того, является ли он отзывчивым или фиксированным. Но это просто поставленный знак, для него установлен класс, но в стилях не приписано, так как все идет на саму фигуру, точнее круг, чтоб на всех экранах смотрелся корректно и безусловно не выделялся от контента. Чтобы разделы отображались как нужно, мне нужно было начать с создания идеальных квадратов. Тогда можно использовать радиус радиуса, установленный на 50% и больше, чтобы идеально округлить секцию в круг. В старые времена я мог установить точную ширину и высоту для элементов, но это не сработало здесь. Из-за гибкого характера разделов вызова было невозможно установить для них явную ширину. Вместо этого их ширина будет зависеть от экрана, на котором они были показаны. Другая проблема, с которой я столкнулся, заключалась в том, что ширина и высота элементов вычисляются по-разному. Теперь давайте создадим отзывчивый круг, который будет занимать всю ширину его контейнера и уменьшится при изменении размера браузера.  Сначала настройте свой HTML таким образом измените класс CSS renderanson на то, что описывает то, что вы установите для фона круга. HTML Код <div class="magesawhile-tudatasibeing renderanson"> <div class="ztumol-content">ZR</div> </div> CSS Код .magesawhile-tudatasibeing { font-size: 93px; font-weight: 800; margin: 0 auto 19px; width: 37%; } .magesawhile-tudatasibeing::after { border-radius: 50%; content: ""; display: block; height: 0; margin-bottom: 20px; padding-bottom: 100%; width: 100%; } .magesawhile-tudatasibeing div { color: #f1eded; float: left; line-height: 1em; margin-top: -0.4em; padding-top: 49%; text-align: center; width: 99%; } Установите фоновое изображение или цвет для вашего реагирующего круга: Код .renderanson::after { background: url("http://zornet.ru/ABVUN/sarunolas/zornet/kotas/kartinka-zornet.jpg") repeat scroll 0 0 / cover ; } Как вы можете видеть, этот трюк может быть весьма полезным. Вы даже можете использовать его для других вещей, помимо создания идеальных кругов. Просто убедитесь, что процентное значение, где задали для верхнего дополнения на родительском псевдоэлементе, соответствует соотношению, которое вы пытаетесь достичь. В демонстраций будет представлено несколько вариантов, где один из которых представлен здесь. По сути они по конструкций идентичны, но где то можно поставить изображение, где то идет без него, что в стилях его отдельно вывел. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
