CSS

Правильное каскадирование, анимации, книги для верстальщиков, разбор сложных моментов и полезных приёмов.

4 способа центрировать текст в CSS

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое (text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в <div> с классом center-both:

<div class="center-both">
  <p>Центрированный текст</p>
</div>

И флексим:

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

Получается так:

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center:

.center-both {
  display: grid;
  place-items: center;
}

Результат:

Работает.

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А <p> внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both {
  position: relative;
}

.center-both p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height, равный высоте родительского элемента.

.center-both {
  line-height: 200px; /* Пример высоты */
  text-align: center;
}

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:


Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

🐈

CSS
  • 28 августа 2023
CSS-свойство contain

CSS-свойство contain

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

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container {
  contain: strict;
}
Читать дальше
CSS
  • 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top, right, bottom и left, которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element {
  inset: 10px 20px 30px 40px;
}

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 13 июля 2023
Как перекрыть один элемент другим. CSS-свойство z-index

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static.

Синтаксис

.my-element {
  z-index: 2;
}

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 10 июля 2023
Как верстать и оформлять цитаты

Как верстать и оформлять цитаты

Для вёрстки цитат используются теги <q> и <blockquote>. Тег <q> применяется для выделения коротких цитат внутри текста, это строчный элемент. Тег <blockquote> позволяет создавать отдельный блок с большой цитатой.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Цитату можно выделить из основного текста с помощью отличающегося начертания шрифта или цвета текста. До и после содержимого тега <q> браузер автоматически ставит кавычки. В русском языке ставятся „лапки“ или «ёлочки». Переопределить кавычки можно с помощью CSS-свойства quotes.

👉 Не используйте тег <q> для других видов текста — перевода или шутки, так как это не семантично.

Тег <blockquote> подходит для цитат, которые выделены в отдельную секцию. Это уже не просто текстовый элемент, но и элемент для разметки секций. Значит, у цитаты можно разметить свой заголовок, «шапку», «подвал» и текстовые элементы.

Читать дальше
CSS
  • 22 июня 2023
Окей, ChatGPT, сделай мне кнопку

Окей, ChatGPT, сделай мне кнопку

👤 Чатгпт, все разработчики и дизайнеры в отпуске. Сделай мне кнопку на CSS, чтобы все сразу купили профессию «Фронтенд-разработчик»

🤖 Конечно, я могу помочь с созданием кнопки на CSS и HTML! Вот пример кода, который создаст стильную кнопку:

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

👤 Я попросил кнопку, а не ссылку. И что это за шрифт вообще? Давай поинтереснее какой-то

🤖 Извините за недоразумение. Вот обновленный код, где кнопка создана без использования ссылки и добавлены некоторые стили для придания ей более интересного внешнего вида:

👤 Можно текст не такой длинный? И добавь красненького, этот недостаточно продающий

🤖 Окей, я сократил текст кнопки и изменил цвет фона на красный оттенок. Размер шрифта был увеличен до 20 пикселей для лучшей видимости. При наведении на кнопку цвет фона становится ещё более ярким красным.

👤 Этот красный слишком агрессивный. И пусть у кнопки будут все состояния и модная анимация, а не только ховер

🤖 В этом обновленном примере я изменил цвет фона на более мягкий оранжевый оттенок. Также добавлены состояния для фокуса и активного нажатия кнопки. Когда кнопка получает фокус, она получает ярчайший оранжевый цвет и эффект тени. При активном нажатии кнопка немного сдвигается вниз.

👤 Твоя анимация не работает. И пусть кнопка как бы разъезжается пополам и крутится и обещает скидку

🤖 В этом обновленном примере я добавил новую анимацию, которая разъезжает кнопку пополам и вращает левую половину при наведении курсора. Также я добавил текст с обещанием скидки, который появляется при наведении на кнопку.

👤 Ты издеваешься? Я хочу красную кнопку и чтобы анимация была премиальной

🤖 В этом обновленном примере кнопка имеет красный цвет фона, анимацию, которая разъезжает красную полосу с левой стороны кнопки при наведении, и текст «Премиум», который появляется при наведении.

👤 Ты бы ещё эмодзи с трактором добавил

🤖 Конечно! Вот обновленный код с красной кнопкой, премиальной анимацией и эмодзи с трактором:

👤 Я не это имел в виду!!! Сделай мне обычную нормальную кнопку с текстом «Купить», так, чтобы не стыдно было

🤖 Понял, извините за недоразумение. Вот обновленный код с обычной кнопкой с текстом «Купить»:

👤 Не, кнопка всё равно не работает. Придётся обычную ставить.

🐈

CSS
  • 21 июня 2023
Как использовать свойство object-fit в CSS

Как использовать свойство object-fit в CSS

В идеальном мире разработчик берёт подготовленную картинку из макета, вставляет в вёрстку и всё получается отлично. Но в реальности работа часто связана не только с вёрсткой, но и с поддержкой сайта. Некоторые картинки могут заменяться или обновляться. Контент-менеджер может прислать картинку в любом разрешении, а верстальщик должен уметь корректно её разместить.

В тех ситуациях, когда картинка не соответствует размеру бокса, но её нужно вставить, рекомендуется использовать object-fit. Он определяет, как элемент реагирует на размеры своего бокса. object-fit предназначается для замещаемых элементов — <img>, <video>, <object>, <input type="image">.

С помощью object-fit можно обрезать встроенное изображение и определить, как оно будет сжиматься и растягиваться.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 15 июня 2023
Что такое px, rem, em, fr, %

Что такое px, rem, em, fr, %

Единицы измерения в CSS используют для определения размеров элементов, расстояний, шрифтов и других свойств. Они делятся на абсолютные и относительные.

Абсолютные единицы измерения привязаны к настоящим физическим размерам. Среди них пиксели, сантиметры, миллиметры, дюймы.

Относительные единицы измерения описывают значения, которые зависят от других значений. Среди них em, rem, vh, ex и другие единицы измерения.

В статье расскажем про пять единиц измерения: px, em, rem, fr,%.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
CSS
  • 9 июня 2023