border-radius
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.
Синтаксис
Значения
Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел (табл. 1). Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.
| Число значений | Результат |
|---|---|
| 1 | Радиус указывается для всех четырех уголков. |
| 2 | Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка. |
| 3 | Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка. |
| 4 | По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка. |
В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.
Рис. 1. Радиус скругления для создания разных типов уголков
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
border-radius
Результат данного примера показан на рис. 2.
Рис. 2. Радиусы скругления в браузере Safari
Браузеры
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius .
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius .
Как скруглить края у таблицы (border-radius)
Нужно скруглить края у всей таблицы. Я уже как не пытался, к чему не применял. Я у первого td скгруглить пытался, у tr пытался. У всей таблице, понятно, не применяется. В общем все никак. Помогите, пожалуйста
Отслеживать
задан 18 июн 2012 в 15:18
2,868 12 12 золотых знаков 56 56 серебряных знаков 103 103 бронзовых знака
Засунуть в div , и его скруглить.
10 апр 2017 в 10:59
10 ответов 10
Сортировка: Сброс на вариант по умолчанию
А на самом деле для кросс-браузерности вот так:):
.table_block < border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; border: 1px solid #000; display: block; >
Хотя наверно мой ответ уже неактуален.
Отслеживать
ответ дан 5 окт 2012 в 11:13
564 5 5 серебряных знаков 13 13 бронзовых знаков
почему же, он более полный и не менее правильный) я бы ТС порекомендовал бы именно его)
5 окт 2012 в 13:29
@hdimon, это уже будет не таблица.
13 ноя 2013 в 3:26
Насколько я помню, проблема глубже чем расстановка вендерных префиксов. border-radius конфликтует с border-collapse: collapse , которое, скорее всего используется. Я решал это двумя способами:
- отказаться от border-collapse: collapse , а бордюры внутри таблицы рисовать ячейкам. Скажежм правый и нижний, а добивать first-child`ами.
- не отказываться от border-collapse: collapse , но отказываться от вненего бордюра таблицы. Таблицу помещать в div. div`у рисовать бордюр и скруглять его.
P.S. Правда сейчас повторить не удается проблему 🙂
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 5 окт 2012 в 12:41
2,553 2 2 золотых знака 20 20 серебряных знаков 35 35 бронзовых знаков
.table_block < border-radius: 10px; border: 1px solid #000; display: block; >
Отслеживать
ответ дан 17 июл 2012 в 8:07
Denis Khvorostin Denis Khvorostin
5,160 5 5 золотых знаков 37 37 серебряных знаков 82 82 бронзовых знака
Если ты пробуешь сделать в Internet Explorer у тебя ничего не выйдет. В нем нужно использовать картинки — а в других браузерах должно работать как написано ниже. Прямо в теге прописан стиль:
ID Название Цена Цвета Продажи 1 Name 50$ Black, White 104 2 Name 70$ Red, Blue, Grey 255
И стиль прописан в классе:
.table_block ID Название Цена Цвета Продажи 1 Name 50$ Black, White 104 2 Name 70$ Red, Blue, Grey 255
Отслеживать
ответ дан 18 июн 2012 в 15:41
Тарас Лазаренко Тарас Лазаренко
394 1 1 серебряный знак 9 9 бронзовых знаков
Можно ещё проще:
table
Отслеживать
ответ дан 17 авг 2017 в 8:30
Alexander Shapovalov Alexander Shapovalov
41 3 3 бронзовых знака
Отслеживать
ответ дан 17 авг 2017 в 8:39
Ara Chinaryan Ara Chinaryan
191 1 1 серебряный знак 12 12 бронзовых знаков
Тоже столкнулся с проблемой, у меня получилось следующим образом.
Я сделал обертку div обертку вокруг table
div < border: 1px solid red; border-radius: 5px; >table
Отслеживать
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
ответ дан 1 дек 2020 в 12:28
Александр Назаров Александр Назаров
21 1 1 бронзовый знак
border-radius: 20px; overflow: hidden;
Отслеживать
ответ дан 15 авг 2019 в 15:32
13 5 5 бронзовых знаков
Изменять свойство display не стоит. Зачем тогда использовать таблицу? Моё решение такое:
tbody
.table_block td < padding: 10px; >.table_block tbody
ID Название Цена Цвета Продажи 1 Name 50$ Black, White 104 2 Name 70$ Red, Blue, Grey 255
Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 16 фев 2021 в 14:29
user430179 user430179
Разве оно работает?
16 фев 2021 в 18:40
Для меня отлично сработало. Безусловно, это костыль. Но явно лучше, чем переопределять элементы таблицы в display: block (в чём смысл использования таблицы?). Вот пример (добавил в свой ответ): codepen.io/madebydima/pen/KKNmBxR
– user430179
17 фев 2021 в 14:55
Углы какие-то покусанные, но вообще да, внезапно. А display много зачем переопределять можно, правда, не везде работает.
17 фев 2021 в 15:39
Покусанные углы — классика border-radius 🙂 Тут уже как браузер отрендерит
– user430179
17 фев 2021 в 17:47
.wp-block-lazyblock-tablica .bem-table < width: 100%; border-collapse: separate; border-spacing: 0; border: 0.5px solid var(--black, #1d1c23); border-radius: 15px; >.wp-block-lazyblock-tablica .bem-table__row:first-child .bem-table__cell:first-child < border-top-left-radius: 13px; >.wp-block-lazyblock-tablica .bem-table__row:first-child .bem-table__cell:last-child < border-top-right-radius: 13px; >.wp-block-lazyblock-tablica .bem-table__row:last-child .bem-table__cell:first-child < border-bottom-left-radius: 13px; >.wp-block-lazyblock-tablica .bem-table__row:last-child .bem-table__cell:last-child < border-bottom-right-radius: 13px; >.wp-block-lazyblock-tablica .bem-table__row__cell < border-bottom: 0.5px solid var(--black, #1d1c23); >.wp-block-lazyblock-tablica .bem-table__row:not(:last-child) .blog .wp-block-lazyblock-tablica .bem-table__row__cell:last-child < border-right: 0.5px solid var(--black, #1d1c23); >.wp-block-lazyblock-tablica .bem-table__cell < text-align: left; padding: 24px; color: var(--black, #1d1c23); font-size: 22px; font-style: normal; font-weight: 400; line-height: 150%; /* 33px */ border: 0.5px solid var(--black, #1d1c23); >
Таблица
Текст левой колонки текст левой колонки Текст правой колонки текст правой колонки Текст левой колонки текст левой колонки Текст правой колонки текст правой колонки Текст левой колонки текст левой колонки Текст правой колонки текст правой колонки
Не знаю почему, браузеры неправильно воспринимают в такой ситуации border-radius , но должен быть в ячейках чуть меньше. Подбирите сами, он точно везде будет одинаковый.
border-radius
border-radius — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.
Интерактивный пример
Скругление применяется ко всему background , даже если элемент не имеет границ, точное положение отсечения определяется свойством background-clip .
Свойство border-radius не применяется к элементам таблицы, когда свойство border-collapse (en-US) имеет значение collapse .
Примечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit , что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
Синтаксис
/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */ /* Скругление применяется ко всем четырём углам */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* Синтаксис из двух радиусов также может применяться ко всем четырём углам */ /* (первые значения радиуса) /радиус */ border-radius: 10px 5% / 20px; /* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Глобальные значения */ border-radius: inherit; border-radius: initial; border-radius: unset;
Свойство border-radius может быть задано как:
- одно, два, три или четыре значения или . Используется для задания обычного радиуса углов.
- одна, две, три или четыре пары значений or , разделённые «/». Используется для задания эллиптического скругления.
Значения
radius
или устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).
top-left-and-bottom-right
или устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями.
top-right-and-bottom-left
или устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.
top-left
или устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
top-right
или устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.
bottom-right
или устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
bottom-left
или устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.
Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.
border-radius: 1em/5em; /* . эквивалентно этому: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em;
border-radius: 4px 3px 6px / 2px 4px; /* . эквивалентно этому: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
Формальный синтаксис
border-radius =
(en-US) (en-US) [ (en-US) / (en-US) (en-US) ] (en-US) ? (en-US)
=
| (en-US)
Примеры
pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre > pre id="example-2"> border: groove 1em red; border-radius: 2em; pre > pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre > pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre > pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre > pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre > pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre >
pre margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1 border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2 border: groove 1em red; border-radius: 2em; > pre#example-3 background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4 border: none; border-radius: 40px 10px; background: gold; > pre#example-5 border: none; border-radius: 50%; background: burlywood; > pre#example-6 border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7 border: dashed; border-width: 2px 4px; border-radius: 40px; >
Живые примеры
- Пример 1: http://jsfiddle.net/Tripad/qnGKj/2/
- Пример 2: http://jsfiddle.net/Tripad/qnGKj/3/
- Пример 3: http://jsfiddle.net/Tripad/qnGKj/4/
- Пример 4: http://jsfiddle.net/Tripad/qnGKj/5/
- Пример 5: http://jsfiddle.net/Tripad/qnGKj/6/
Спецификации
Specification
CSS Backgrounds and Borders Module Level 3
# border-radius
- border-top-left-radius (en-US): 0
- border-top-right-radius (en-US): 0
- border-bottom-right-radius (en-US): 0
- border-bottom-left-radius (en-US): 0
- border-bottom-left-radius (en-US): две абсолютных length или percentage
- border-bottom-right-radius (en-US): две абсолютных length или percentage
- border-top-left-radius (en-US): две абсолютных length или percentage
- border-top-right-radius (en-US): две абсолютных length или percentage
- border-top-left-radius (en-US): длина, проценты или calc();
- border-top-right-radius (en-US): длина, проценты или calc();
- border-bottom-right-radius (en-US): длина, проценты или calc();
- border-bottom-left-radius (en-US): длина, проценты или calc();
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Относящиеся к Border-radius CSS-свойства: border-top-left-radius (en-US), border-top-right-radius (en-US), border-bottom-right-radius (en-US), border-bottom-left-radius (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 11 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
Как использовать border-radius
Чтобы скруглить рамку, нужно указать в border-radius одно, два, три или четыре значения.
☝ Значения можно указывать в пикселях, процентах или других единицах измерения.
Если укажете одно значение, оно применится ко всем углам элемента. Например, так из квадрата можно сделать круг:
Пропишете два значения — первое применится к левому верхнему и правому нижнему углу, а второе — к правому верхнему и левому нижнему:
Укажете три значения — первое применится к левому верхнему углу, второе — к правому верхнему и левому нижнему, третье — к правому нижнему:
А если пропишете четыре значения, первое применится к левому верхнему углу, второе — к правому верхнему, третье — к правому нижнему, четвёртое — к левому нижнему. Просто запомните, что значения распределяются по часовой стрелке, начиная от левого верхнего угла:
Как скруглить один угол
Чтобы скруглить только один угол, используйте свойства:
- border-top-left-radius — для верхнего левого угла;
- border-top-right-radius — для верхнего правого угла;
- border-bottom-left-radius — для нижнего левого угла;
- border-bottom-right-radius — для нижнего правого угла.
Одному элементу можно задать сразу несколько свойств, например, чтобы нарисовать полукруг или добиться каких-нибудь интересных фигур.
Сочетание с другими CSS-свойствами
border-radius легко комбинировать с другими свойствами CSS. Например, создадим стандартную карточку товара — добавим элементу скругления, фон и тень:
Попробуйте поиграться со стилями и посмотрите, какие эффекты получатся.
Альтернативные методы
Добиться скругления углов можно и другими способами. Например, для сложных фигур удобно использовать SVG. Однако стоит учитывать, что border-radius более легковесный и его проще использовать.
И напоследок два совета.
Используйте свойство с умом — не переусердствуйте с радиусом скругления, чтобы элементы не потеряли свою уникальность.
Тестируйте вёрстку. Свойство border-radius поддерживается почти во всех браузерах, но на разных устройствах и операционных системах рамки могут немного отличаться. Поэтому обязательно проверяйте, как выглядят страницы сайта.
Материалы по теме
- Как создать рамку вокруг элемента. CSS-свойство border
- Как оформить текст: 11 главных CSS-свойств
- Как добавить изображение фоном. Свойство background-image
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
Что такое CSS?
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
Как подключить CSS к HTML
Есть несколько способов использования CSS внутри HTML:
Внутренний CSS: внутри раздела HTML-документа, в теге :
Внешний CSS: создание отдельного CSS-файла и его подключение с помощью элемента :
Инлайновые стили: непосредственно в HTML-элементе, через атрибут style . Но это не очень хороший способ, лучше его не использовать, и вот почему.
Этот текст будет красного цвета.
Основы синтаксиса CSS
CSS состоит из селекторов и объявлений. Селектор указывает, к какому элементу HTML применяется стиль, а объявление состоит из свойства и его значения.
/* Селектор */ p < /* Свойство : Значение; */ color: green; font-size: 14px; >
Работа с цветом и фоном
Одни из самых основных свойств в CSS — это цвет и фон элементов.
color меняет цвет текста:
background-color меняет фоновый цвет элемента:
Типографика и шрифты
CSS позволяет нам контролировать шрифты на странице:
- font-family задаёт шрифт текста, даже если он нестандартный.
- font-size определяет размер текста.
- font-weight устанавливает жирность шрифта.
Блочная модель
Важной концепцией в CSS является блочная модель, которая включает в себя margin , border , padding , и content .
Внутренние и внешние отступы одной картинкой:
Позиционирование и Flexbox
Чтобы разместить элементы на странице, мы используем различные стратегии позиционирования, включая флексбоксы, которые позволяют нам упростить многие задачи.
.container < display: flex; /* Применяем Flexbox */ justify-content: center; /* Центрирование содержимого по горизонтали */ align-items: center; /* Центрирование содержимого по вертикали */ >
Адаптивный дизайн
С помощью медиа-запросов мы можем создавать адаптивный дизайн, чтобы наш сайт хорошо выглядел на разных устройствах.
@media (max-width: 600px) < .container < flex-direction: column; >>
Это только начало пути в мир CSS, но зная эти основы, вы уже можете начать экспериментировать и применять стили к вашим веб-страницам. В следующей статье мы разберём JavaScript и увидим, как добавить интерактивность нашим веб-страницам. Удачи в творчестве и до новых встреч в коде! ������
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
- 7 сентября 2023
Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>);
При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
- 29 августа 2023
4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >
Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
- 28 августа 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023
Как перекрыть один элемент другим. CSS-свойство z-index
z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .
Синтаксис
.my-element
- 10 июля 2023
Предыдущая запись