rcl-radio.ru

Тени в CSS делают элементы объёмнее и помогают выделить их на фоне. За это отвечает свойство box-shadow. Оно кажется простым, но у него есть нюансы: от значений смещения до того, как тень ведёт себя с border-radius и overflow. Разберём всё по делу и с примерами. Базовый синтаксис css selector { box-shadow: [смещение по X] [смещение […]

Свойство border-radius кажется простым: задал радиус — углы скруглились. Но на практике бывают ситуации, когда ожидаемого эффекта нет: углы остаются прямыми, скругление «ломается», появляются артефакты или скругления вообще не видно. Разберём частые причины и способы их исправить — с примерами. Как вообще работает border-radius border-radius задаёт радиус скругления для углов рамки. Можно указать одно значение — оно применится ко всем углам, […]

Свойство border в CSS позволяет задать рамку вокруг элемента. Оно объединяет три характеристики: толщину (border-width), стиль (border-style) и цвет (border-color). Синтаксис и базовые варианты записи Самый компактный вариант — через сокращённую запись: css selector { border: толщина стиль цвет; } Пример: css .box { border: 2px solid red; } Это эквивалентно трём отдельным свойствам: css […]

Когда верстаешь страницу, легко столкнуться с ситуацией: задаёшь элементу ширину 300 px, а в браузере он занимает 340 px. Часто причина — в padding. Это свойство добавляет пространство внутри элемента, и оно напрямую влияет на то, сколько места блок реально занимает на странице. Что такое padding и как он ложится в box model Блочная модель (box model) — это способ, которым […]

Объект Date в JavaScript — базовый инструмент для работы с временем, но в нём скрыто несколько неочевидных особенностей. Ниже — частые ошибки и способы их избежать, с конкретными примерами кода. Ошибка 1: вызов Date() без new В чём проблема. Если написать const d = Date(), получится не объект даты, а строка с текущим временем. Такой результат нельзя использовать для вычислений или извлечения […]

border-radius задаёт радиус скругления для углов элемента. Ниже — варианты использования с готовыми HTML+CSS, которые можно сразу открыть в браузере. Одинаковое скругление для всех углов Одно значение применяется ко всем четырём углам: html <div class=»box-all»></div>   <style> .box-all { width: 200px; height: 100px; background: #3498db; border-radius: 16px; } </style> Скругление только одного угла Используют отдельные […]

Схлопывание margin (margin collapse) — это когда вертикальные отступы двух соседних блоков не складываются, а «схлопываются» в один — берётся больший из двух. Это не баг, а часть спецификации CSS, но именно из‑за него часто «ломается» верстка: отступы получаются меньше ожидаемых, элементы прилипают друг к другу, а при масштабировании всё едет. Где вообще бывает схлопывание Оно работает только для […]

Fetch API — это встроенный в браузер способ делать HTTP‑запросы. Не нужно подключать библиотеки: просто вызываешь fetch(), передаёшь URL и (опционально) настройки, получаешь промис с ответом. Дальше разбираешь тело ответа (JSON, текст, Blob и т. д.) и работаешь с данными. Минимальный GET‑запрос Самый простой запрос: js fetch(‘https://api.example.com/data’) .then(response => { if (!response.ok) { throw new Error(`Ошибка HTTP: ${response.status}`); […]

Область видимости говорит, где в коде переменная «живёт» и где её можно использовать. Если не учитывать правила для var/let/const, код будет выдавать странные значения или падать с ошибками. Дальше — только факты и примеры, которые можно сразу проверить. var: живёт по функции, всплывает, разрешает повтор Что это значит на практике: Виден во всей функции, блок […]

vw и vh — это единицы в CSS, которые считают размер от размера окна браузера. 1vw = 1% от ширины окна. 1vh = 1% от высоты окна. Пример: на экране шириной 1000 px значение 50vw будет равно 500 px. На экране 400 px — 200 px. Их используют, чтобы элементы масштабировались вместе с экраном. Но из‑за этого появляются проблемы: горизонтальный скролл, «прыгающие» отступы, […]