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

Блог

Web Мастерская

CSS: Позиционирование

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

Что такое позиционирование в CSS?

Позиционирование определяет, как элемент располагается относительно своего нормального потока документов. Существует несколько типов позиционирования:

Static: нормальное позиционирование, элементы располагаются последовательно.
Relative: элемент смещается относительно своего первоначального местоположения.
Absolute: элемент позиционируется относительно ближайшего позиционированного предка.
Fixed: элемент фиксируется относительно окна браузера.
Sticky: элемент «прилипает» к определенной точке при прокрутке страницы.

Типы позиционирования

Static Positioning
Это базовый тип позиционирования, при котором элементы располагаются последовательно, следуя нормальному потоку документа. Никаких...

Жалоба

CSS: Как сделать переливающийся бордюр

CSS

Чтобы сделать так, чтобы бордюр (граница) элемента плавно менял цвета, можно использовать CSS-анимацию и свойства градиента. Вот несколько способов реализации этого эффекта:

Использование анимации и градиента

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

Выделить

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Меняющийся бордюр</title>
    <style>
        .border-animated {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            box-shadow: inset 0 0 0 3px transparent; /* внутренняя рамка */
            animation: border-change 5s infinite alternate;
        }

        @keyframes border-change {
            0% {
                box-shadow: inset 0 0 0 3px rgba(255, 0, 0, 1); /* красный */
            }
            100% {
                box-shadow: inset 0 0 0 3px rgba(0, 0, 255, 1); /* синий */
            }
        }

...

Жалоба

CSS: Как сделать картинку квадратной

CSS

Для вывода дополнительных картинок, в виде ссылок на них, стояла задача сделать все фото квадратными и одинаково размера. При этом сами картинки имеют абсолютно разные размеры. Фотографии резать или сжимать нельзя. Перво, что пришло на ум - это вставить в теги атрибут style, вот так:

Выделить

<div style="display: inline-block; width: 165px;">
	<a style="display: block; background-image: url('{img server_id=$photo.server_id path='photo.url_photo' file=$photo.destination suffix='_240' return_url=true}'); background-position: 50% 25%; background-size: cover; height: 160px; width: 160px;" href="{permalink module='photo' id=$photo.photo_id}" title:"{$photo.title|clean}" rel="{$photo.photo_id}"></a>
</div>

Решил вставлять стили в теги, потому что используется свойство background-image: url(), а URL картинки постоянно меняется, и угадать его нельзя.

Тут:

Выделить

background-image:
background-position: 50% 25%;
background-size: cover;

Отлично справляется с поставленной задачей. Но, я...

Жалоба

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

CSS HTML JavaScript Библиотека JS

Для одной своей идеи, использовал карусель фотографий, взятую из интернета и переписанную под себя. Выложу, как было у меня. Карусель использует библиотеку 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>

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

Жалоба