Изучаем основы CSS при работе с элементом на сценах

[Bagir]

CSS расшифровывается Cascading Style Sheets (Каскадные Документы Стилей). С помощью CSS Вы можете оформлять HTML документы. Давайте попробуем использовать это для наших элементов, чтобы сделать их вид более интересным.
Для начала надо получить базовое представление о CSS и о структуре таблиц стилей. Читаем первые три страницы сайта http://www.wisdomweb.ru/CSS/css-first.php Материал изложен великолепно. Все очень просто, понятно, и с примерами. Там совсем маленько, так что к прочтению обязательно.
После этого у Вас должно быть понимание что такое селекторы в CSS. А именно селекторы тэгов, id, class и атрибутов. А так же как их можно комбинировать. Это очень важно. Можно сказать, что в этом ключ к успеху в этой теме.
Еще нужно знать, что такое <div>. Тип нашего элемента - html. А в этом языке тег <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Другими словами, это как бы прямоугольный кусок места на страничке (контейнер) к которому мы можем применять CSS стили оформления. Но будьте внимательны, когда прячете один <div> в другой. Пока что разберем простой пример. В нем вообще не будет кода <div>, но надо знать, что весь написанный в поле код, будет помещен как раз таки в <div> блок, с указанным классом и id, посмотреть которые можно внизу в строке под полем ввода (где мы код пишем).

Теперь можно приступить к экспериментам. Создадим на сцене новый элемент с типом html. Сохраним его. У элемента сразу будет создано первое состояние. Назовем его first. В поле Код запишем какой нибудь текст. Напримет Первое состояние. Внизу, под полем Код, увидим что то наподобие
(CSS class: type_html style_default state_Logs element_116, CSS id: state_179)
Сейчас нам понадобятся знания с прочитанной ранее третьей страницы.
element_116 это Селектор class. Код оформления в этой группе будет влиять на весь наш элемент и на все его состояния.
state_179 это Селектор id. В этой группе можно писать разный код для каждого состояния нашего элемента.
Создадим второе состояние. Назовем его к примеру second. Запишем в поле Код текст Второе состояние. Сохраним, и увидим
(CSS class: type_html style_default state_second element_116, CSS id: state_180)
номер элемента тот же самый, а вот номер состояние увеличился.

А теперь самое интересное. Поставим галочку Дополнительный код CSS и впишем туда вот такой код:

Код: Выделить всё

div.element_116 {
 font-size:22pt;
}
#state_179 {
 color:#ff0000;
}
#state_180 {
 color:#00ff00;
} 

Перед тем как посмотреть на результат, давайте разберем этот код по винтикам. Будет очень полезно еще раз прочитать третью страницу. В этом коде три группы. Первая задает стиль для всего элемента. То есть шрифт у обоих состояний элемента будет увеличен. Но что такое вообще div.element_116? Это комбинированный селектор тэга с селектором class. То есть стиль будет применен к тегу <div> у которого указан класс element_116.
Едем дальше. #state_179 это Селектор id. Его код оформления будет применен только к первому состоянию нашего элемента.

Весь код из поле первого состояния нашего элемента, при обработке помещается в тег

Код: Выделить всё

<div id='state_179' class='element_116'>
Первое состояние
</div> 

А из второго

Код: Выделить всё

<div id='state_180' class='element_116'>
Второе состояние
</div> 

Теперь мы можем видеть, почему комбинированный селектор div.element_116 влияет на оба состояния сразу, а id селекторы только на свои.
Удачных экспериментов!

[Bagir]

Небольшая находка, но весьма полезная для рисования элементов.

Код: Выделить всё

<style type = "text/css">
div.element_117 {
  width: 100px;
  height:150px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  border-radius: 5px;
  background-image: linear-gradient(#a3e5a3 60%, #00ffff 0%);
  transform: rotate(180deg)
}
</style> 

#a3e5a3 и #00ffff это цвета
60% уровень заполнения индикатора. Его можно заменить на %Объект.Свойство%%
Вся фишка тут в transform: rotate(180deg). Это позволяем повернуть элемент на 180 градусов, чтобы при увеличении процента, заливка продвигалась вверх.

Профи, добавьте пожалуйста вариант с кругом. Нам нужна ваша помощь

[LutsenkoDenis]

лучше конечно в svg, но можно и в приведенном css'е кое-что изменить

СпойлерПоказать

Код: Выделить всё

<style type="text/css">
.element_circle
{
  width: 100px; 
  height:100px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  border-radius: 60px;
  background-image: linear-gradient(#a3e5a3 60%, #00ffff 0%);
  transform: rotate(180deg);
  margin:1em;
    
}

div.element_circle span 
{
  position: relative;
  transform: rotate(180deg);
  margin-top: 35px;
  text-align:center;
  font-weight:bold;
  font-size:20pt;
  display:block
}

.element_117 
{
  width: 100px;
  height:150px;
  border-style: solid;
  border-width: 3px;
  border-color: black;
  border-radius: 5px;
  background-image: linear-gradient(#a3e5a3 60%, #00ffff 0%);
  transform: rotate(180deg);
  margin:1em;
}  
  
.gradient_red_green
  {
    background-image: linear-gradient(red 60%, green 0%);
  }  
  
</style>
<div class="element_circle gradient_red_green">
  <span>50%</span>
</div>
<div class="element_circle">
  <span>10%</span>
</div>

<div class="element_117"></div>
<div class="element_117 gradient_red_green"></div> 

[Bagir]

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

[triada13]

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

Код в студию.

[Bagir]

а вот с этим непросто. Сижу и вращаю кружки Может чего и накручу. Вот что пока есть. Вечером выложу. Вроде все работает.

[Bagir]

Я не знаю что такое я слепил, но оно работает. Делал даже не по примерам. Пускай пока повисит в этой теме. Может кто чего еще и подскажет с позиционированием. Как обычно правим element_122 на свой. Точил под ширину и высоту 100, но их можно менять на свои. Правда при этом сползают круги и текст. Круги можно легко поправить изменив width и height в css группах round1 и round2.
font-size - размер текста.
ThisComputer.textBoxTest заменить на свое свойство в двух местах. Значение в нем должно быть от 0 до 100

СпойлерПоказать

Код: Выделить всё

<style type="text/css">
.element_122 #substrate {
  width: 100%;
  height: 100%;
  position: absolute;
  border: 16px solid;
  border-color: linen;
  background-color: Ivory;
  border-radius: 50%;
  text-align:center;
  font-weight:bold;
  font-size:250%;
}
.element_122 #semicircle1 {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 16px solid;
  border-color: orange orange transparent transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.element_122 #semicircle2 {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 16px solid;
  border-color: linen linen transparent transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.element_122 #round1 {
  position: absolute;
  width: 129%;
  height: 129%;
  border: 2px solid;
  border-color: grey;
  border-radius: 50%;
}
.element_122 #round2 {
  position: absolute;
  top:15px;
  left:15px;
  width: 98%;
  height: 98%;
  border: 2px solid;
  border-color: grey;
  border-radius: 50%;
}
</style>

<script> 
 var s = '', gr = Number(%ThisComputer.textBoxTest%);
 gr = Math.round(gr * 360 / 100);

 if ( gr < 180 ) {
   gr = gr + 45;
   s = 'border-color: linen linen transparent transparent;';
 } else {
   gr = gr -135;
   s = 'border-color: orange orange transparent transparent;';
 }
 
 s = s + "transform: rotate(" + gr + "deg)"; 
 document.getElementById('semicircle2').setAttribute('style', s);
</script>


<div id="substrate">
  <br/>
  <span>%ThisComputer.textBoxTest%%</span></div>
<div id="semicircle1"></div>
<div id="semicircle2"></div>
<div id="round1"></div>
<div id="round2"></div>

[sega6549]

код стиля

СпойлерПоказать

Код: Выделить всё

.element_196 #substrate {
  width: 100%;
  height: 100%;
  position: absolute;
  border: 16px solid;
  border-color: linen;
  background-color: Ivory;
  border-radius: 50%;
  text-align:center;
  color: #1955A2;
  font-weight:bold;
  font-size:250%;
}
.element_196 #semicircle1 {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 16px solid;
  border-color: orange orange transparent transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.element_196 #semicircle2 {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 16px solid;
  border-color: linen linen transparent transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.element_196 #round1 {
  position: absolute;
  width: 129%;
  height: 129%;
  border: 2px solid;
  border-color: grey;
  border-radius: 50%;
}
.element_196 #round2 {
  position: absolute;
  top:15px;
  left:15px;
  width: 98%;
  height: 98%;
  border: 2px solid;
  border-color: grey;
  border-radius: 50%;
}

цвет текста забыли добавить, у меня сливается с основным цветом круга, так правильнее будет

*** Сообщение запрещено. Сообщение похоже на спам. ***