Как сделать цвет фона для h1 в пределах текста, что бы заголовок был по центру страницы?
eashla: С точки зрения красоты — первый.
С точки зрения seo — я бы выбрала второй.
Либо обсудила бы с дизайнером другие идеи украшения заголовка.
Можно на js выяснить какую ширину занимает именно текст и потом подложить градиент нужного размера, если речь именно о цветной подложке. В html будет только h1 — красиво. Но целесообразность сомнительна.
eashla @eashla Автор вопроса
Ankhena W:
Подойдёт ? Проверил — работает, но с точки зрения красоты по seo ?
Забыл обернуть в code
Ankhena @Ankhena Куратор тега CSS
eashla: По современным стандартам можно и в span, но выглядит непривычно.
Хороший вариант есть ниже про позиционирование и трансформ, но там надо аккуратно следить за окружающим контентом.
Верстальщик по жизни, буддист, кофеман
Забирайте на здоровье И ЗАБУДТЕ ПРО ДЕКОР ОБЕРТКИ КАК ПРО КОШМАР.
Ответ написан более трёх лет назад
Нравится 1 6 комментариев
Ankhena @Ankhena Куратор тега CSS
Это отличное решение, но есть минус:
если контент добавляет клиент и за заголовком может быть что угодно, например, просто текст вообще без тегов.
Ankhena W: Дык повесьте стили на класс, я так и делаю, как правило.
Ankhena @Ankhena Куратор тега CSS
Полина Емельянова: на чей класс? codepen.io/anon/pen/VbYyMW
Ankhena W: Простите, я немного запуталась: вы задаете «бездомный» текст/элемент и удивляетесь, что оно не работает или работает, но не так??
codepen.io/emelyanova/pen/eWmWEW — я например, делаю так, обычно.
Ankhena @Ankhena Куратор тега CSS
Полина Емельянова: Я? Я — нет. И не удивляюсь.
Я написала, что клиент в контентное поле может ввести все, что угодно. И при этом нет гарантии, что он обернет это хоть в какой-то тег. Или пусть даже это будет нормальный тег, но им окажется img
codepen.io/anon/pen/wdBYXB
Поэтому, Ваш вариант прекрасен и я полностью за него, вообще не люблю лишние теги и обертки, но он подходит только если есть полный контроль над окружающими тегами.
Плавная смена цвета фона
Чтобы сделать эффект плавной смены цвета фона, добавьте на страницу блок DV11A (категория «Разделитель») в том месте, где цвет должен поменяться. В настройках блока укажите цвет. Цвет фона страницы ниже этого блока поменяется.
Чтобы сделать переход к еще одному цвету или обратно к белому — добавьте еще один такой же блок и задайте новый цвет в настройках.
Разделы «Справочного центра»:
- Как устроена Тильда
- Настройки сайта
- Редактирование страницы
- Продвижение сайта
- Домен и сертификат
- Интернет-магазин
- Формы приёма данных
- Статистика сайта
- Zero Block
- Конструктор писем
- Тарифы и платежи
- Потоки и новости
- Личный кабинет
- Разработчикам
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Изменить цвет фона таблицы HTML
Метод изменения цветов фона частей таблицы на веб-сайте с годами менялся, становясь более простым и менее трудоемким с введением таблиц стилей.
Более старый метод использовал атрибут bgcolor для изменения цвета фона таблицы. Это также может быть использовано для изменения цвета строки таблицы или ячейки таблицы. Но атрибут bgcolor устарел в пользу таблиц стилей, поэтому он не является оптимальным способом управления цветом фона таблицы.
Лучший способ изменить цвет фона — добавить свойство background-color в таблицу, строку или тег ячейки.
Этот пример изменяет цвет фона всей таблицы:
Вы также можете применить цвета фона к заголовкам таблицы или тегу таким же образом:
Изменить цвет фона с помощью таблиц стилей
Однако лучше избегать использования атрибута background-color в пользу правильно отформатированной таблицы стилей. Например, вы можете установить стили в таблице стилей в заголовке вашего HTML-документа или установить их во внешней таблице стилей . Подобные изменения в HEAD или во внешней таблице стилей могут выглядеть следующим образом для таблиц, строк и ячеек:
table >
tr >
td >
Настройка цвета фона столбца
Лучший способ установить цвет фона для столбца — создать класс стиля, а затем назначить этот класс ячейкам в этом столбце. Создание класса позволяет назначить этот класс ячейкам в определенном столбце, используя один атрибут.
CSS :
td.ColColor >
HTML :
ячейка 1 ячейка 2
ячейка 1 cell 2
Одним из значительных преимуществ управления фоновыми цветами с помощью таблицы стилей является то, что вы можете изменить свой цветовой выбор позже. Вместо того, чтобы просматривать документ HTML и вносить изменения в каждую отдельную ячейку, вы можете внести одно изменение в выбор цвета в CSS, который будет немедленно применен к каждому экземпляру, где появляется синтаксис class = «ColColor» .
Несмотря на то, что встраивание CSS в ваш HTML или вызов отдельного файла CSS добавляет немного административных издержек, помимо просто изменения атрибута HTML, вы обнаружите, что использование CSS уменьшает ошибки, ускоряет разработку и улучшает переносимость вашего документа.
Фон в конструкторе Tilda: как изменить?
04.02.2021
Сложность: новичок
5 мин.
16 110
Фон или бэкграунд (background – англ. задний план) – это элемент оформления, который дополняет и оттеняет основные элементы, делая целостной концепцию дизайна. Кроме того, бэкграунд добавляет индивидуальность и подчеркивает тематику проекта. К примеру, в магазине кожаных изделий в виде фона можно использовать текстуру кожи, которая вызывает прямые ассоциации с товаром.
Посетители сайта, как правило, не заостряют внимание на этом элементе дизайна и не замечают его. Но, тем не менее, фоновое изображение нужно для формирования впечатления при посещении ресурса. Удачно подобранный фон для сайта вызывает положительные впечатления у посетителя, а неудачный вариант, наоборот, будет смотреться неуместно и визуально мешать, не вписываясь в дизайн посадочной страницы.
ResearchGate провели исследование на тему того, насколько сильно доверяют посетители демонстрируемому сайту. Выяснилось, что 94% элементов сайта, которые вызывают недоверие, связаны именно с дизайном. Первое впечатление о странице будет зависеть от ряда нюансов, таких как выбор цвета, объем текста, подбор шрифтов и расположения объектов на странице. А фон – это всегда первое, что видит посетитель, попадая на страницу.
Подобрать фон для сайта можно, воспользовавшись услугами дизайнера, либо можно использовать сайты с бесплатными текстурами.
Рис. 1. Примеры фона со стоков.
В конструкторе Тильда при добавлении новых блоков вы увидите, что большинство из них идут с готовым цветным фоном или фоновым изображением, но с функцией редактирования. Поменяйте цвет или замените изображение в зависимости от тематики своего сайта на Tilda.
Если вместо заливки цветом фона, вы хотите разместить изображение, то перейдите в категорию «Другое» и добавьте блок ⟶ T674. Либо найдите его с помощью поисковика, безошибочно определяемого характерной иконкой в виде увеличительного стекла. Этот модификатор добавляет выбранный фон для всей страницы.
Рис.2. Добавляем фон на Тильде.
Для добавления собственного изображения перейдите во вкладку «Контент» и нажмите кнопку «Загрузить файл». Затем выберите нужное изображение с жесткого диска компьютера. После добавления нужного файла не забудьте сохранить результат. В итоге добавленное в блок изображение будет размещено на фоне страницы. Встроенный в Тильде редактор изменяет размер, обрезает изображение или добавляет фильтры.
Обратите внимание: если у блока задан цвет фона, тогда он накладывается на добавленное фоновое изображение. Исправить это можно таким способом: перейдите в меню «Настройки», после этого удалите значения из поля «Цвет фона для всего блока». После этого цвет фона станет прозрачным. Потом нажмите кнопку «Сохранить» и изменения вступят в силу.
Если нужно, чтобы при скролле фон оставался на месте, а не двигался вместе с текстом, то для этого заходим в меню «Настройки» и переходим в раздел «Эффект при скролле» и выбираем пункт «С фиксацией». Так мы сможем использовать знаменитый параллакс-эффект на странице.
В конструкторе Тильда для создания или изменения фона специальных навыков не требуется. Но пренебрегать возможностями изменять стандартные фоны под свой проект не стоит, ведь фон – это важный элемент дизайна страницы, правильно выбранный бэкграунд влияет на общее позитивное или негативное мнение посетителей о сайте.
Помимо стандартных блоков, в конструкторе Tilda также имеются пустые, так называемые Zero Block, инструменты. Zero Block, или нулевой блок, позволяет не пользоваться шаблонными решениями, а создавать индивидуальный дизайн страницы сайта. Разберем, как изменить или добавить фон, работая с нулевым блоком конструктора Тильда.
Первое, что нужно сделать, – добавить сам блок на рабочую страницу. Сделать это можно двумя способами:
1. На рабочей области нажимаем на кнопку «Добавить блок», листаем в самый низ и выбираем Zero Block.
2. Кликая по кнопке «Все блоки», вызываем меню-бар слева. Также пролистываем до самого конца и выбираем Zero Block.
После появления Нулевого Блока нажимаем на «Редактировать блок» в левом верхнем углу, попадаем в редактор, выделяем и удаляем все элементы, содержащиеся в блоке. Готово, у нас получился пустой блок, с которым можно делать все, что мы хотим.
К добавлению фона в Нулевой Блок мы вернемся ниже, сначала поможем разобраться с базовым принципом работы в нем. В Zero block есть две рабочие области или два «контейнера». Область сетки, Grid Container и Window Container, используется для условного обозначения границ экрана.
Фоновые и выносные элементы мы прикрепляем к разным рабочим областям и выставляем разные варианты масштабирования: для фона в процентах (%), для выносных элементов в пикселях (px).
Все выносные элементы (кнопки, формы, логотипы и картинки) нужно размещать в зеро-блок таким образом, чтобы они не выходили за границы Grid Container. О полноценной работе с Zero Block мы расскажем позднее, т.к. это тема отдельной статьи, сейчас сосредоточимся на добавлении фона.
Чтобы разместить фоновый элемент, который будет зафиксирован в границах экрана устройства и сможет подстраиваться под разные разрешения, нужно:
1. Выбрать в панели элементов элемент «Shape»:
- Нажимаем на «Плюсик» в верхнем левом углу экрана;
- Выбираем «Add Shape». Здесь также можно выбрать «Add Image», чтобы сразу загрузить готовую фотографию, но тогда есть шанс, что при адаптивной верстке фотография будет отображаться некорректно;
- На нашей рабочей поверхности появится желтый квадрат, как в примере ниже:
Этим желтым квадратом нам и предстоит дальше работать.
2. Настраиваем расположение шейпа в Window Container:
- Кликаем левой кнопкой мыши по элементу, после чего переходим в настройки элемента в нижнем правом углу;
- Переходим в настройки и открываем раздел Container;
Привязываем нашу фигуру к Window Container:
Выставляем расположения по осям – фигура должна переместиться в центр экрана:
Далее меняем значения масштабирования элемента на процентное значение, после этого shape должен растянуться по всей рабочей области:
Финальным штрихом будет загрузка подготовленного изображения. Для этого прокручиваем меню настроек ниже, где находим кнопку «Upload File». Кликаем по этой кнопке, выбираем изображение с компьютера и загружаем.
После всех действий сохраняем результат и выходим из редактора блока или продолжаем работу дальше.
Готово. Проведя все эти манипуляции, мы получаем фон для блока, который будет растягиваться и сжиматься в зависимости от размера и типа устройства, с которого пользователь просматривает страницу.
Вариантов работы с фоновыми изображениями в Zero Block множество. Нулевой Блок позволяет максимально индивидуализировать вашу страницу и отстроиться от конкурентов. При работе зиро-блок у вас нет почти никаких творческих ограничений. О том, что еще можно делать с помощью этого инструмента, мы расскажем в следующих статьях о работе в конструкторе сайтов Tilda.