Css цифра в круге: css circle — цифры в круге на css3

Leave a Comment / Css / By /

html — Увеличение кругов на CSS3

При применении команды scale(n) в SVG происходит всё тоже самое, как и в CSS — чем больше увеличение, тем больше объект сдвигается от начального положения.

<circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" />

Как известно начало координат у svg находится в левом, верхнем углу.
При cx=»40″ cy=»40″ центр окружности будет расположен правее на 40px и ниже на 40px от левого угла (0,0) вьюпорта svg. При применении scale(2) эти цифры умножаются на два. Только из-за этого круг сместится правее и ниже.
Новые координаты центра окружности будут cx=»80″ и cy=»80″.
Для наглядности смотрите анимацию процесса.
Здесь к розовому кругу последовательно применяется увеличение в 1-2-4 раза и обратно 4-2-1

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.
 
 1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	 	 
          <text x="70" y="15">mouseover on pink circle</text>
		<circle cx="40px" cy="40px" r="20px" transform="scale(2)" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
		<circle cx="40px" cy="40px" r="20px" transform="scale(4)" fill="dodgerblue" stroke="none" opacity="0.9" />
		<text x="132" y="162">Scale(4)</text>
		<text x="52" y="82">Scale(2)</text>
		<circle cx="40px" cy="40px" r="20px" fill="violet" stroke="none" opacity="0.5">
		<animateTransform fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="circle1.mouseover" values="1;2;4" restart="whenNotActive"/>
		<animateTransform fill="freeze" attributeName="transform" begin="an1.end" type="scale" dur="1s"  begin="circle1.
  mouseover"           values="4;4" restart="whenNotActive"/> 
		<animateTransform fill="freeze" attributeName="transform" begin="an2.end" type="scale" dur="2s"    begin="circle1.mouseover"           values="4;2;1" restart="whenNotActive"/>
		
		</circle>

	</svg>
 
 </body>

Вариант 1:

Как с этим бороться,- есть несколько вариантов:
Допустим необходимо увеличить объект максимум в 4 раза.
Считаем координаты центра: 40*4= 160px; И сразу располагаем центр окружности с этими координатами: cx=»160″ cx=»160″ Теперь у нас есть уверенность, что круг не выйдет при увеличении за пределы канвы SVG. см. пример ниже.

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www. w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	   <text x="70" y="15">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="81px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />				
		
		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate attributeName="r" fill="freeze"  begin="c1.mouseover"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		 <circle cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

Следующий пример немного посложнее, с двумя кругами, попутно можно посмотреть, как взаимодействуют между собой две анимации.

<head>
  <meta charset="utf-8">
  <title>The increase of the circle when you hover</title>
   </head>
 <body>
 <svg version="1. 1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >

	  <text x="70" y="15">mouseover on greenyellow circle</text>
	  
		<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="160px" cy="160px" r="80px" fill="none" stroke="gray" stroke-dasharray="15 10" opacity="0.9" />		

		<circle cx="160px" cy="160px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animate attributeName="r"  fill="freeze"  begin="c1.mouseover;an2.end+0.2s"  dur="4s"   values="20;80;20" restart="whenNotActive"/> 
		</circle>

		<circle cx="160px" cy="160px" r="20px"  fill="crimson" stroke="none" opacity="0.9" > 
		<animate attributeName="r"  fill="remove"  begin="an1.end"  dur="4s"   values="20;80;20;80" restart="whenNotActive"/> 
		</circle>
		
		<circle cx="160px" cy="160px" r="20px" fill="greenyellow" stroke="none" opacity="0.
 
 9" /> 
		
	</svg>
 
 </body>

Вариант 2 Если вам нужно разместить окружность в углу канвы, но вы не хотите, чтобы она при увеличении уходила за границы канвы или убегала к центру по диагонали, делайте координаты центра окружности равными радиусу окружности.

<circle cx="20px" cy="20px" r="20px" />        

<head>
  <meta charset="utf-8">
  <title>An expanding circle in the corner</title>
   </head>
 <body>
 <svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
	 >
	   <text x="20" y="185">mouseover on greenyellow circle</text>
		
	<! --the maximum limit of the increase of circle - dotted-->
		<circle  cx="80px" cy="80px" r="82px" fill="none" stroke-width="1" stroke="gray" stroke-dasharray="15 10" opacity="0.
 
 
 9" />		
		
		<circle cx="20px" cy="20px" r="20px"  fill="dodgerblue" stroke="none" opacity="0.9" > 
		<animateTransform fill="freeze" attributeName="transform" type="scale" dur="4s"  begin="c1.mouseover" values="1;2;4" restart="whenNotActive"/>
		</circle>
		 <circle cx="20px" cy="20px" r="20px" fill="greenyellow" stroke="none" opacity="0.9" /> 
		
	</svg>
 
 </body>

Есть еще несколько способов для удержания, центрирования объекта при масштабировании. В ответах других участников уже всё хорошо объяснено. Спасибо за это всем участвующим.

Цветовая модель HSV — ГЕНШТАБ

По мотивам deadsign.ru

Весь ваш компьютер — это набор нулей и единиц, то есть, для него цвет — не более чем биты. Каждый компьютер создаёт абсолютно любой цвет, используя лишь 3 координаты.

Теперь о том, чем так сильно отличаются эти 3 координаты.

Если вы когда-нибудь программировали в HTML и CSS, то, возможно, сталкивались с моделью RGB, где любой цвет создаётся на основе 3 координат: (1) насколько цвет красный ( R ), (2) насколько цвет зелёный ( G ) и насколько цвет синий ( B ).

Если у компьютера всё просто, то это не значит, что у человека тоже. И тут в игру вступает HSB.

HSB (от англ. hue-saturation-brightness) — это тон, насыщенность и яркость; более ориентированная на человека модель для описания цвета.

HUE, ТОН = «ЦВЕТ РАДУГИ»

Тон — это любая цифра от 0 до 360. Тон измеряется в градусах, как и окружность (потому что в окружности тоже 360°). Помните цветовой круг? Тон — это любое место на нём.

Цветовой круг или тоновый круг

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

«А что же делать с чёрным? Белым? Серым?» — попозже мы и это узнаем.

Если вы хотите развить в себе интуитивное понимание HSB, вам нужно держать в уме несколько опорных точек. Для меня это красный, зелёный и синий, так как на цветовом круге они равноудалены:

  • Красный — 0°
  • Зелёный — 120°
  • Синий — 240°
  • Красный — также 360°, что абсолютно идентично 0°

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

SATURATION, НАСЫЩЕННОСТЬ = «КРАСОЧНОСТЬ»

Насыщенность — это любая цифра между 0 и 100. Поэтому, вне зависимости от того, какой тон вы выбрали, 100%-ная насыщенность будет пределом его красочности, а насыщенность в 0% даст его серый вариант (т.е. если цвет светлый, то он станет светло-серым, а если тёмный — то тёмно-серым).

С насыщенностью всё довольно просто. Иногда я думаю, что это просто цвет, в определенном количестве добавленный в серый. Таким образом, 0% — это тускло-серый, а 100% — это самый красочный цвет, который способен отобразить ваш монитор.

BRIGHTNESS, ЯРКОСТЬ = ЯРКОСТЬ

Яркость — это цифра от 0 до 100. Как и насыщенность, её иногда указывают в процентах. Довольно очевидно, что это значит, но не тут-то было.

  • при яркости 0%, цвет становится чёрным, вне зависимости от тона и насыщенности.
  • при яркости 100%, цвет становится белым только при условии, что насыщенность также равна 0%. В противном случае, 100%-ная яркость это всего лишь. .. очень яркий цвет.

Запутались? Давайте немного переосмыслим. Представьте себе, что яркость — это лампочка накаливания. 0% значит, что лампочка не горит (и в нашей комнате темно, хоть глаз коли). 100% значит, что лампочка горит на полную мощность. Возможно, 100%-ная насыщенность — это яркий цвет или, если свет и до этого был белым, то при 100%-ной насыщенности он абсолютно белый.

Итак, если быть кратким: мы можем описать любой цвет с помощью трёх координат:

  • Тона: определенного цвета на цветовом круге, от 0° до 360°
  • Насыщенности: того, как много в нём цвета, от 0% до 100%
  • Яркости: насколько ярко горит наша «лампочка», от 0% до 100%

ЦВЕТОВЫЕ ВАРИАЦИИ ТОНА

Во-первых, тон — это отличный способ создавать разные вариации цвета. Ведь в диапазоне от 0° до 360° можно остановиться где угодно. Зачем оставлять синий цвет просто «синим», когда можно без особых усилий получить неплохие его вариации, просто немного сдвинувшись вверх или вниз по кругу?

Здесь мы начали с очень стандартного синего, повернувшись сразу на 240°. Но дабы не выбирать самый унылый цвет из всех возможных, мы решили его немного оживить.

Даже сдвиг тона на 30° до 210° даёт крутой эффект. Стало светлее, веселее, и не так строго. Что-то вроде оформления в twitter, однако это лишь первый шаг.

Усиление тона до 240° даёт цвет индиго. Небольшой сдвиг на 20° — и вот уже смотрится совсем по-другому, покруче, и может неплохо сочетаться с неоном или тёмным фоном, так можно придать лёгкую нотку женственности. И так далее, вы поняли.

То же самое с красным. Сложный цвет, стоит только взяться — и уже проблемы. Он супер яркий и супер дерзкий. Однако всё зависит от того, чего мы хотим добиться — ну, допустим, сделать какое-нибудь сообщение об ошибке — тогда можно добавить в красный совсем чуть-чуть розового (опустившись по тону на 10°), и он станет приятнее. А для более сдержанного варианта можно подмешать немного оранжевого.

НАСТРОЙТЕ ВИДИМОСТЬ С ПОМОЩЬЮ НАСЫЩЕННОСТИ

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

Если в вашем UI есть цвет, который перетягивает на себя всё внимание, то исправить это можно, просто снизив насыщенность.

Например, взгляните на такую вариацию цвета в лого компании Google. Я увеличил насыщенность синего до 90%, и, как видите, он тут как бельмо на глазу.

Насыщенность синего 90%

Смотрите, как выпирает этот синий. Если вы не замечаете, попытайтесь расслабить взгляд и смотрите на лого в течение нескольких секунд. Едва ли не сразу на фоне остальных букв проступят «G» и «g».

Насыщенность синего 70%

В нормальной версии лого баланс между разными цветами выдержан гораздо лучше.

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

Теперь давайте перейдём к одному из самых удивительных фактов об HSB и к тому, что это значит.

ЧЁРНЫЙ ЦВЕТ НЕ ПРОТИВОПОЛОЖЕН БЕЛОМУ

Вот как делается чёрный и белый цвет в HSB:

  • Чёрный: снизьте яркость до 0%. Тон и насыщенность могут быть какие угодно.
  • Белый: увеличьте яркость до 100%, а насыщенность снизьте до 0%. Тон также может быть каким угодно.

Это значит — удивительно даже — что (в цветовой модели HSB) чёрный не противоположен белому.

Есть ещё один способ понять, как работает эта модель — подумать, что по сути значит добавить в цвет чёрного или белого.

Чтобы добавить в цвет белого, вам нужно сдвинуть его ближе к белому в палитре выбора цвета. Белый находится в левом верхнем углу и, добавив его, вы, само собой разумеется, уменьшите насыщенность (двигаемся влево) и увеличите яркость (двигаемся вверх).

Переходим от одного красного к более «выбеленному» красному

Добавление белого выглядит так:

А что с добавлением чёрного? Что ж, так как чёрный — это по сути весь низ на прямоугольнике цветовой палитры, то нам просто нужно уменьшить яркость. Насыщенность роли не играет.

Переходим от одного красного к более «чёрному» красному.

Эти две стрелки никак не исключают друг друга! Чёрный и белый в HSB не противопоставлены.

В практическом плане, более тёмные оттенки, полученные путём добавления чёрного, тусклее, чем их более светлые вариации.

Более тёмные оттенки выглядят тускло

Вот вам хороший толчок. Попробуйте вместо добавления чёрного убрать белый. Другими словами, одновременно:

  • Увеличьте насыщенность
  • Снизьте яркость

Или вот, если диаграммы вам больше по душе:

Двигаемся от одного красного к менее выбеленному красному.

Это даст вам более богатые тёмные оттенки:

Более тёмные оттенки выглядят богаче

Убрать белый — то есть «обогатить» свои более тёмные оттенки — «правильный» путь к созданию более тёмных цветовых вариаций более чем в 95% случаев.

ДОПОЛНИТЕЛЬНО: В ЧЁМ РАЗНИЦА МЕЖДУ HSL И HSB?

Те из вас, кто занимаются front-end разработкой, возможно, знают, что в CSS используется цветовая модель HSL (от англ. hue, saturation, lightness — тон, насыщенность, светлота). HSB и HSL — это одна и та же модель?

Если коротко, то нет. Но они очень похожи.

HSL — это абсолютно то же самое, что и HSB, с той лишь разницей, что чёрный и белый здесь противопоставлены друг другу.

Итак, в HSL:

  • Чтобы получился чёрный, снизьте светлоту до 0% (тон и насыщенность могут быть какие угодно)
  • Чтобы получился белый, увеличьте светлоту до 100% (тон и насыщенность могут быть какие угодно)

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

  • Настройка светлоты выше 50% — это то же самое, что и добавление белого (то есть соответствующий показатель насыщенности в HSB снижается, а яркости — увеличивается).
  • Настройка светлоты ниже 50% — это то же самое, что и добавление чёрного (на насыщенность в HSB это не влияет, но показатель яркости в HSB снижается).

Итак, показатель светлоты в HSL — это странная смесь насыщенности и яркости в HSB, которая зависит от степени освещённости!

Как бы то ни было, система, в которой чёрный и белые цвета противопоставлены друг другу, может показаться чуть логичнее, однако во всех современных программах для создания UI дизайна (Sketch, Figma и Adobe XD) используется HSB, а не HSL. И честно говоря, именно в этих программах мы выбираем и настраиваем цвета.

Конус HSB и двойнос конус HSL
Tон (hue), насыщенность (saturation), значение (value) и светлота (lightness)

Как добавить кружок вокруг числа в CSS

Добавить круг вокруг числа можно легко сделать с помощью CSS. Это можно сделать с помощью свойства border-radius.

В этом фрагменте вы также можете найти способ добавления кружка вокруг чисел, содержащих от одной до четырех цифр.

Теперь мы покажем процесс шаг за шагом.

  • Создайте
    с именем класса «circle» внутри.
  • Поместите число внутри этого
    .
 

  <голова>
    Название документа
  
  <тело>
    <дел>1

Попробуй сам »

  • Установите радиус границы на «50%».
  • Укажите ширину и высоту элемента.
  • Стиль класса с использованием свойств фона, границы и цвета.
  • Центрировать число, используя значение «center» свойства text-align.
  • Укажите шрифт номера.
 .круг {
  радиус границы: 50%;
  ширина: 34 пикселя;
  высота: 34 пикселя;
  отступ: 10 пикселей;
  фон: #fff;
  граница: 3px сплошная #000;
  цвет: #000;
  выравнивание текста: по центру;
  шрифт: 32px Arial, без засечек;
}

Теперь мы можем увидеть полный пример.

Пример добавления кружка вокруг числа: 

 

  <голова>
    Название документа
    <стиль>
      .круг {
        радиус границы: 50%;
        ширина: 34 пикселя;
        высота: 34 пикселя;
        отступ: 10 пикселей;
        фон: #fff;
        граница: 3px сплошная #000;
        цвет: #000;
        выравнивание текста: по центру;
        шрифт: 32px Arial, без засечек;
      }
    
  
  <тело>
    <дел>1

Попробуй сам »

Результат

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

Здесь мы будем использовать свойство line-height. Обратите внимание, что свойства width и line-height должны иметь одинаковое значение.

Пример добавления кружка вокруг чисел от одной до четырех цифр: 

 

  <голова>
    Название документа
    <стиль>
      .круг {
        ширина: 120 пикселей;
        высота строки: 120 пикселей;
        радиус границы: 50%;
        выравнивание текста: по центру;
        размер шрифта: 32px;
        граница: 3px сплошная #000;
      }
    
  
  <тело>
    <дел>1
    <дел>100
    <дел>10000
    
1000000

Попробуй сам »

В нашем последнем примере мы используем префиксы -moz- и -webkit- со свойством border-radius. Здесь мы также используем свойство отображения, для которого задано значение «inline-block», чтобы представить элемент как блочный контейнер встроенного уровня.

Пример добавления окружности вокруг числа с использованием свойства line-height: 

 

  <голова>
    Название документа
    <стиль>
      диапазон.круг {
        фон: #e3e3e3;
        радиус границы: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        цвет: #6e6e6e;
        отображение: встроенный блок;
        вес шрифта: полужирный;
        высота строки: 40px;
        поле справа: 5px;
        выравнивание текста: по центру;
        ширина: 40 пикселей;
      }
    
  
  <тело>
    1

Попробуй сам »

Как создать круг вокруг числа с помощью CSS

Это просто. Я покажу вам, как создать круг вокруг числа или текста на вашей веб-странице с помощью CSS.

Предположим, вы используете элемент &ltspan> (попробуйте также использовать элемент &ltdiv>), где вы определили число, подобное этому.

&ltspan>12&lt/span>

Теперь давайте добавим круг вокруг него с помощью CSS.

<span> 12
</span>

Попробуйте

Я определил стиль в строке. Вы можете определить его в файле .css или в теге &ltstyle> , как здесь.

<body>

  <style>
    .круг {
        ширина: 25 пикселей;
        высота: 25 пикселей;
        высота строки: 25 пикселей;
        -moz-border-radius: 50%;
        радиус границы: 50%;
        граница: сплошная 1px #1464F4;
        цвет: #1464F4;
        выравнивание текста: по центру;
        отображение: блок;'
    }
  </стиль>

  <span>
    12
  </диапазон>
</тело>

Я объясню стиль. Сначала я определил свойства ширины, высоты и высоты строки для элемента (элемент &ltspan>). Вы можете настроить значения в соответствии с вашими требованиями.

Высота и ширина строки важны, так как определяют размер элемента.

Затем я определил свойство border-radius по адресу 50% , за которым следует граница свойства.

-moz-border-radius: 50%;
радиус границы: 50%;
граница: сплошная 1px #1464F4;

Свойство text-align будет центрировать число внутри круга. В этом случае необходимо свойство diplay , так как я использую элемент &ltspan>.
Вы можете игнорировать свойство отображения, если используете элемент &ltdiv>.

Помните : если число (или длина текста) увеличивается, то же самое происходит с шириной, высотой и высотой строки. Например,

<style>
    .круг {
        ширина: 120 пикселей;
        высота: 120 пикселей;
        высота строки: 120 пикселей;
        -moz-border-radius: 50%;
        радиус границы: 50%;
        граница: сплошная 3 пикселя #1464F4;
        цвет фона: #ffffff;
        цвет: #1464F4;
        выравнивание текста: по центру;
        дисплей: блок;
    }
</стиль>
  
<span> 1200 </span>

Попробуйте

Во многих случаях шрифт числа (или текста) играет очень важную роль.

Добавить комментарий

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