Wrapper css что это
Частная коллекция качественных материалов для тех, кто делает сайты
- Creativo.one2000+ уроков по фотошопу
- Фото-монстр300+ уроков для фотографов
- Видео-смайл200+ уроков по видеообработке
- Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
- Главная»
- Уроки»
- CSS учебник, бесплатные уроки CSS для начинающих
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 8 Июня 2017 Просмотров: 34369 Комментариев: 0
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 1 Июня 2017 Просмотров: 22681 Комментариев: 0
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 28 Мая 2017 Просмотров: 23039 Комментариев: 0
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Что такое выражения от стилей
1 июля 2022 года обновился черновик CSS Containment Module Level 3, в котором добавили новую возможность контейнеру — работать от стилей.
До обновления выражение от контейнера имело одну единственную характеристику — размер. Контейнер принимал решение, как ему измениться, в зависимости от размера — ширины, высоты, inline-size, block-size, пропорции и ориентации.
.wrapper < container-type: inline-size; >.card < padding: 10px; >@container (width > 500px) < .card < padding: 20px; >> Теперь у выражений от контейнеров появилась новая характеристика — стили. Это значит, что контейнер в зависимости от вычисленного значения стиля может принять решение, как ему выглядеть.
���� Вычисленное значение — процесс преобразования относительного значения в абсолютное. Например, если у элемента значения font-size: 18px , а padding: 2em , то вычисленное значение у padding будет 36px.
Сейчасопустим проценты для лайаута, безразмерные числа и специальные значений initial и inherit для упрощения.
@container style(background-color: white) < .card < color: black; >> Выражения от стилей должны быть быть обёрнуты в style() , чтобы отличать запросы от размера. Также хорошей новостью является то, что все элементы по умолчанию будут иметь container-type: style . Именно поэтому он не указан в предыдущем примере кода.
Выражения от размеров и стилей можно комбинировать.
@container (width > 500px) and style(background-color: white) < .card < >> Где применять на практике
Пока сложно говорить, так как сама спецификация ещё черновик, а выражения от размеров работают в последней версии Safari и свежем Chrome, но кто нам помешает пофантазировать?
Например, если все наклонные тексты вам нужно сделать с подложкой, то это будет достаточно просто сделать:
@container style(font-style: italic) < span, i, .etc < background: lavender; >/* или */ * < background: lavender; >> Конечно же для добавления тем на сайт:
@container style(--theme: dark) < .card < >> И даже для ховеров
.card:hover, .card:focus < --theme: darkHover; >/* apply darkHover theme styles */ @container style(--theme: darkHover) < .card < >> А пока ждём, пока выражения от стилей появятся везде.
Дополнительное чтение
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Новое в 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 используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
- 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-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
- 28 июля 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023
Wrapper css что это
Обертки бывают двух типов:
- Про расположение блока относительно других блоков
- Про лейаут внутри блока
Когда сталкиваетесь с первым случаем, чаще всего подойдет микс (либо с элементом родителя, либо с элементом сетки). Например:
Еще можно не экономить на лишних DOM-узлах и делать так:
Примером из реальной жизни для этого случая будет позиционирование универсальной кнопки, которая ничего не должна знать об отступах от границ какой-нибудь конкретной шапки.
Как делать не стоит: создавать модификаторы для кнопки, задающие margin и т.п. свойства. Такое позиционирование по смыслу не является частью универсального блока, а лишь его конкретного места использования. Да и модификаторов на всех не напасешься.
Если же обертка относится именно к данному блоку (скажем, позиционирование иконки внутри той самой универсальной кнопки или ограничитель по max-width для контента страницы), то это будет внутренний элемент inner :
Блок или элемент с названием wrap не имеет особого смысла, потому что на самом деле примерно никогда не нужно заворачивать конкретный блок в абстрактную обертку.
Комментарии: 23
8 years ago
8 years ago
Но чем по сути блок button__inner отличается от блока-враппера, обертки? Это же и есть обертка. Просто ей придумали «красивое» название. Нет?
8 years ago
Т.е. разница в том что мы договариваемся считать их элементами блока, а не отдельными блоками (связанными названием или не связанными, тк получилось придумать логичное имя)?
VS .block > .h-block , VS .l-block > b-block и т.д.
8 years ago
Давай еще раз: h- и l- блоки — это как раз случай, когда есть некая внешняя сущность, отвечающая за лейаут. В моем примере — это блок grid . Это работает, когда позиционирование является абстрактным в вакууме. Например, у нас есть шаг сетки и он всегда такой во всех случаях использования.
А есть ситуации, когда позиционирование является очень конкретным, связанным с данным конкретным блоком и только с ним. Тогда это очевидно элемент блока и отдельная дополнительная сущность не имеет смысла.
При этом важно понимать, что это не блок logo (и даже не logo_type_header ) имеет отступ 20 пикселей от границ шапки, а элемент шапки header__logo . Тогда logo можно будет использовать повторно где-то еще на странице и не перебивать каждый раз отступы, т.е. получится тот самый независимый универсальный блок.
8 years ago
Для внутреннего позиционирования — понятно, используем элементы-врапперы, придумывая им красивые названия. Но проблема с придумыванием имен для позиционирования внешнего — там бывает просто не знаешь что выдумать, а .l-block , .b-block — здорово выручают с неймингом. И бонусом получаем понимание смысла блока видимое из названия (то о чем пишет Гарри Робертс: http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)
8 years ago
Я в посте написал буквально следующее: «на самом деле примерно никогда не нужно заворачивать конкретный блок в абстрактную обертку».
Можешь привести примеры макетов из реальной жизни, когда появляется необходимость в абстрактной внешней обертке не являющейся каким-либо аналогом сетки?
8 years ago
@tadatuta я тоже не понимаю о чем вещает @delka и какие кейсы он решает. По опыту примеры Вовы должны решать большенство кейсов
8 years ago
Вопрос про внутреннее позиционирование: что делать если надо разместить обертку внутри элемента, а не блока? И как правильно именовать эту обертку?
8 years ago
@alex-milovanov Ничего не меняется:
Для чего теги «оборачивают» Wrapper’ом?
Для чего теги «оборачивают» Wrapper’ом и почему у Wrappera часто ставят position:relative ? Что вообще дает использование wrapper’а?
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 17 апр 2016 в 18:36
41 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
В текущем виде на ваш вопрос невозможно дать лаконичный ответ. Для получения ответа поясните, в чем именно вы видите проблему, какие технологии используете и что хотите видеть в ответе.
17 апр 2016 в 18:41
@Grundy, видимо, идентификатор #wrapper имеется в виду, и участник не знает, что можно задавать любые значения атрибутом id и class , а wrapper приводится только для примера. Berty, для чего wrapper , например, как в этом примере Вы хотели узнать? Спасибо.
17 апр 2016 в 18:59
@Саша Черных,я тут первый раз,так что,извиняюсь за неточную формулировку)Да,я бы хотел узнать.
17 апр 2016 в 19:29
Когда понадобится, сам поймёшь.
27 фев 2018 в 22:39
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Это может быть связано с position:absolute для вложенного элемента. Дело в том, что без обёртки с position:relative координаты такого элемента будут отсчитываться относительно всего документа, а с обёрткой — относительно обёрточного элемента.
Отслеживать
ответ дан 17 апр 2016 в 18:58
6,894 2 2 золотых знака 26 26 серебряных знаков 56 56 бронзовых знаков
Это всего лишь контейнер для удобства, заключая блоки в обертку проще центрировать, задавать общую ширину. и т.д. Релейтив ставят если собираются абсолютно позиционировать внутренние блоки.
Отслеживать
ответ дан 17 апр 2016 в 19:36
1,087 3 3 золотых знака 15 15 серебряных знаков 40 40 бронзовых знаков
В целом, wrapper используют для удобства позиционирования. Самому wrapper , присваивают минимум свойств.
А иногда вообще оставляют его без них. Почему просто не оставлять див без класса? Во первых, противоречит некоторым методологиям (например БЭМ). Во вторых, слово «wrapper» переводится как «обертка» и дает понять, тем кто будет работать с кодом после вас, зачем этот div нужен (при беглом просмотре). Также, он может послужить прослойкой для функционирования различных скриптов.