CSS » Web Мастерская | Блог

Блог

Web Мастерская

Карусель фотографий

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

jQuery:

var carouselID = 1, change = 8000;

function carouselStart() {
	if ($('div[data-carousel="carousel"]').length < 1) {
		return false;
	};

	$('div[data-carousel="carousel"]').each(function() {
		$(this).removeAttr('data-carousel').attr('id', 'carousel_' + carouselID);
		carousel('#carousel_' + carouselID);
		carouselID++;
	});
};

$(() => {
	carouselStart();
	window.setInterval(carouselStart, 3000);
});

function carousel(carouselID) {
	var $slr, $sls, interval, $selectors, $btns, currentIndex, nextIndex;
	var cycle = index => {
		var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
		nextIndex        = index !== undefined ? index : nextIndex;
		$currentSlide    =

...

Жалоба

Псевдокласс :hover в атрибуте style (CSS | HTML | JS)

CSS HTML JavaScript

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

<span style="color: #CCCCCC;">Текст</span>

В него же необходимо вставить :hover, но делать этого конечно нельзя. Необходимо искать другой вариант решения, а вариантом вполне может быть - использование атрибутов событий: onMouseOver и onMouseOut:

onMouseOver - Выполняется, при наведении курсора.
onMouseOut - Выполняется, при выходи курсора за пределы элемента.

Делаем так:

<span style="color: #CCCCCC;" 
    onMouseOver="this.style.color = '#999999';"
    onMouseOut="this.style.color = '#CCCCCC';">
        Текст
</span>

Готово. Задача решена, теперь цвет текста меняется при наведении курсора и возвращается в прежний цвет, когда курсор убегает....

Жалоба

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, курсор не меняется на указательный палец, остаётся стрелочкой....

Жалоба