DANFA
Поиск блогов...

PHP: Цикл в две колонки | В два столбика

CSS HTML PHP
Работая над одним приложением, потребовалось перечислить элементы массива в две колонки (Столбика):



Для решения этой задачи, у меня было два варианта. Первый:
Выделить
		<?php foreach ($characteristics as $characteristic): ?>
		<div class="feature">
			<?php echo $this->lang()->phrase($characteristic['name']); ?>: <strong><?php echo $characteristic['info']; ?></strong>
		</div>
		<?php endforeach; ?>

И CSS к шаблону:
Выделить
.feature {
	display: inline-block;
	width: 48%;
}

И второй:
Выделить
		<?php foreach ($characteristics as $key => $characteristic): ?>
		<?php if ($key % 2): ?>
		<div style="float: right;">
		<?php else: ?>
		<div style="float: left;">
		<?php endif; ?>
			<?php echo $this->lang()->phrase($characteristic['name']); ?>: <strong><?php echo $characteristic['info']; ?></strong>
		</div>
		<?php endforeach; ?>

Я выбрал первый вариант. Он мне показался лучшем, чем второй....

Как избавиться от наследования "opacity"

CSS
Известно, что CSS свойство opacity наследуется элементами, что находятся внутри элемента с данным свойством. Для потомственных элементов свойство поменять не выйдет, прописав их в ручную. Однако, если прозрачность необходима для фона, можно поменять:
Выделить
.class {
	background: #FFFFFF;
	opacity: 0.6;
}

На:
Выделить
.class {
	background: rgba(255, 255, 255, 0.5);
}

И прозрачность будет только у родителя....

Не использовать "cursor: pointer" если элемент "disabled"

CSS HTML
Есть выбор из перечисленного:
Выделить
<input type="radio" class="choice" id="choice1" name:"action" />
<label class="categorylabel" for="choice1">
	<div>
		<!-- -->
	</div>
</label>

<input type="radio" class="choice" id="choice2" name:"action" disabled />
<label class="categorylabel" for="choice2">
	<div>
		<!-- -->
	</div>
</label>

На одном input прописан: disabled (Запрет использовать). Стояла задача менять курсор при наведении на label, но не менять курсор, если элемент имеет: disabled. Для решения этой задачи использовался следующий CSS код:
Выделить
input[type="radio"][disabled] {
  cursor: default;
}

input[type="radio"]:not([disabled]) + label {
  cursor: pointer;
}

Теперь, если у тега есть: disabled, курсор не меняется на указательный палец, остаётся стрелочкой....

CSS переменные в SVG

CSS SVG
На данный момент работаю с SVG. Практически в каждом теге есть код цвета. В основном использую одни и те же цвета, пока их всего пять. Думаю, что в будущем цвет буду менять, придётся копаться в нескольких файлах, производить замену. Тут задумался - а ведь проще написать переменные и использовать их, в будущем не придётся рыться в нескольких файлах, а отредактировать всего один. Так я и сделал, я добавил переменные в SVG. Сейчас расскажу, как я это сделал.

Я создал файл: "svg.css", с таким содержимым:
Выделить
:root {
	--cool:   #0074FF; /* Оттенок синего */
	--murk:   #033C59; /* Оттенок синего + зелёного */
	--spring: #48CFAD; /* Оттенок зелёного */
	--smoke:  #CCD3EB; /* Оттенок серого */
	--fire:   #FC6459; /* Оттенок красного */
}

Подключил "svg.css" к документу. Теперь в SVG меняю:
Выделить
<g fill="#0074FF">

На:
Выделить
<g fill="var(--cool)">

Готово. Переменная отдаёт указанный ей код цвета.

CSS переменная должна начинаться с двойного дефиса (--)....

Как посчитать количество элементов на чистом CSS

CSS
Допустим у нас есть блок с ID block, в котором находятся элементы (<span> или другие), и нам надо посчитать их на чистом CSS:
Выделить
<div id="block">
    <span></span>
    <span></span>
    <span></span>
</div>

Добавим блок, для вывода количества элементов:
Выделить
<div id="sum"></div>

Затем считаем на чистом CSS:
Выделить
#block {
	counter-reset: block;
}

#block > span {
	counter-increment: block;
}

#sum:before {
	content: counter(block);
}

CSS посчитает элементов в блоке и выведет результат в блок <div id="sum"></div>....