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

Блог

Web Мастерская

CSS: Хуки и псевдоэлементы (::before | ::after)

Псевдоэлементы ::before и ::after — это невероятно мощные инструменты CSS, которые позволяют добавлять виртуальные элементы до или после содержимого реального элемента. Они позволяют вносить изменения в дизайн, создавать декоративные элементы и добавлять интерактивность без изменения HTML-кода.

Что такое псевдоэлементы?

Псевдоэлементы — это особые селекторы CSS, которые добавляют дополнительные элементы в структуру документа. Они не видны в исходном HTML, но оказывают влияние на визуальное представление.

Основные псевдоэлементы:

::before: вставляет элемент перед содержимым выбранного элемента.
::after: вставляет элемент после содержимого выбранного элемента.

Примеры использования псевдоэлементов

1. Добавление цитатных кавычек
Хотите украсить цитату красивыми кавычками? Это легко сделать с помощью псевдоэлементов.

Выделить

<blockquote>Это моя цитата.</blockquote>

Выделить

blockquote::before {
	content: '"';
	font-size: 2em;
	color: gray;
	margin-right:10px;
}

blockquote::after

...

Жалоба

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

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); /* синий */
            }
        }

...

Жалоба

JS: Отличие переменных с $ вначале и без него?

JavaScript

В JavaScript наличие символа $ в начале имени переменной не имеет никакого особого значения для языка. Сам JavaScript рассматривает переменные с префиксом $ так же, как и любые другие переменные.

Почему программисты используют $?

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

DOM-объекты: Традиционно переменные, содержащие ссылки на элементы DOM (Document Object Model), называют с префиксом $, чтобы подчеркнуть, что они ссылаются на DOM-объекты.

Пример:
Выделить
```
const $header = document.querySelector('header');
const $button = document.getElementById('submit-btn');
```
Обозначения jQuery-оберток: В jQuery традиционно переменные, содержащие обернутые элементы jQuery, обозначаются с префиксом $, чтобы напомнить, что переменная содержит jQuery-коллекцию.

Пример:
Выделить
```
const $btn = $('#submit-btn');
```
Чистая конвенция: Иногда префикс $ используетс

...

Жалоба

Gulp

Gulp — это мощный и гибкий инструмент автоматизации задач (task runner) для фронтенд-разработки, написанный на JavaScript и работающий на платформе Node.js. Gulp позволяет автоматизировать рутинные задачи, такие как сборка проектов, минификация и оптимизация кода, оптимизация изображений, конкатенация файлов, компиляция препроцессоров CSS (Sass, Less) и многое другое.

Основные преимущества Gulp

Простота и удобство: задачи в Gulp описаны простыми JavaScript-функциями, что делает их легкими для понимания и модификации.
Гибкость: возможность комбинировать плагины и настраивать конвейеры обработки файлов.
Экосистема плагинов: огромная экосистема плагинов, позволяющая решать любые задачи фронтенд-разработки.
Производительность: асинхронное выполнение задач, параллельное выполнение заданий и кэширование предыдущих процессов.

Как работает Gulp

Установка: установить Gulp и зависимые пакеты через npm (Node Package Manager).
Конфигурация: создать файл gulpfile.js, в котором будут описаны задачи и

...

Жалоба