Как сделать бэкграунд
Не могу понять каким образом создавать подобные бэкграунды не используя заранее заготовленное изображение.
Отслеживать
задан 25 янв 2018 в 18:50
Bohdan Kinash Bohdan Kinash
81 7 7 бронзовых знаков
Эта статя тебе поможет habrahabr.ru/company/raiffeisenbank/blog/346770, если присмотреться на фон, видно деление на градиенты)
– user282582
25 янв 2018 в 19:30
25 янв 2018 в 20:02
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.variant1,.variant2 < height:50vh; border:1px solid; >.variant1 < background:repeating-linear-gradient(-45deg, #6ac4e6 200px,#61c0e7 250px); >.variant2
Отслеживать
ответ дан 29 янв 2018 в 7:10
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков
Без изображений создать данный фон крайне сложно: создается много div-ов на заднем плане через for на js с абсолютной позицией на заднем плане. Паттерн (форма секции) создается через свойство border. Альтернатива: делается одна секция фона и задается фоновым изображением:
body
секция повторяется много раз и закрывает фон. Настройка повторения: св-во repeat в css. Можно самим создать данный паттерн: Сайт PatternNinja
Бэкграунд из квадратных точек
Я хочу получить бэкграунд, как в моем примере, только с прозрачным фоном (а не белым). Это возможно на CSS без изображений?
body
Отслеживать
51.6k 200 200 золотых знаков 61 61 серебряный знак 242 242 бронзовых знака
задан 21 июн 2019 в 18:32
177 7 7 бронзовых знаков
Задний фон страницы не может быть прозрачным, так как за ним ничего не расположено.
21 июн 2019 в 19:09
@StrangerintheQ в реальной жизни у меня боди с изображением, а поверх него див с бэкграундом в виде точек. Хочу добиться того, чтобы через него было видно изображение. У меня получилось реализовать такое с помощью круглых точек, но квадратные я не знаю как сделать. Ниже поделились интересным решением через .svg, но у него есть небольшой недостаток, ему нельзя задать background-repeat: space, чтобы заполнение точками было равномерным P.S.: не то чтобы я не любил круглые точки, но они криво рендерятся в браузерах
21 июн 2019 в 21:54
@Jenya , background-repeat: space работает, если задать высоту для body . У этого тега есть своя специфика в заполнении фоном
Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий.
Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов ( A.menu:hover ), а также к контекстным селекторам ( .menu A:hover ). Если псевдокласс указывается без селектора впереди ( :hover ), то он будет применяться ко всем элементам документа.
Условно все псевдоклассы делятся на три группы:
- определяющие состояние элементов;
- имеющие отношение к дереву элементов;
- указывающие язык текста.
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.
:active
Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.
:link
Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход ранее.
Запись A <. >и A:link <. >по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.
:focus
Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 15.1).
Пример 15.1. Применение псевдокласса :focus
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы
Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.
Рис. 15.1. Изменение стиля текста при получении фокуса
В данном примере в текстовом поле содержится предварительный текст, он определяется значением атрибута value тега . При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному чёрному цвету.
Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги , , и .
:hover
Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
:visited
Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно (пример 15.2).
Пример 15.2. Изменение цвета ссылок
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Ссылка 1 | Ссылка 2 | Ссылка 3
Результат примера показан на рис. 15.2.
Рис. 15.2. Вид ссылки при наведении на неё курсора мыши
В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited , а затем идёт :hover , в противном случае посещённые ссылки не будут изменять свой цвет при наведении на них курсора.
Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.
Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.
Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR .
Пример 15.3. Выделение строк таблицы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Пики Трефы Бубны Червы Чебурашка 5 2 4 2 Крокодил Гена 2 7 1 3 Шапокляк 5 4 3 1 Крыса Лариса 1 0 5 7
Результат примера показан ниже (рис. 15.3).
Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши
Псевдоклассы, имеющие отношение к дереву документа
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса.
:first-child
Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код (пример 15.4).
Пример 15.4. Использование псевдокласса :first-child
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат примера показан ниже (рис. 15.4).
Рис. 15.4. Использование псевдокласса :first-child
В данном примере псевдокласс :first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.
Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, в некоторых случаях красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).
Пример 15.5. Отступы для абзаца
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Историю эту уже начали забывать, хотя находились горожане, которые время от времени рассказывали ее вновь прибывшим в город посетителям.
Легенда обрастала подробностями и уже совсем не напоминала произошедшее в действительности событие. И, тем не менее, ни один человек не решался заикнуться о ней с наступлением темноты.
Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.
Результат примера показан ниже (рис. 15.5).
Рис. 15.5. Изменение стиля первого абзаца
В данном примере первый абзац текста не содержит отступа первой строки, а для остальных он установлен.
Псевдоклассы, задающие язык текста
Для документов, одновременно содержащих тексты на нескольких языках имеет значение соблюдение правил синтаксиса, характерные для того или иного языка. С помощью псевдоклассов можно изменять стиль оформления иностранных текстов, а также некоторые настройки.
:lang
Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang , он обычно добавляется к тегу . С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.
В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.
Пример 15.6. Вид кавычек в зависимости от языка
HTML5 CSS 2.1 IE Cr Op Sa Fx
lang Цитата на французском языке: Ce que femme veut, Dieu le veut
.
Цитата на немецком: Der Mensch, versuche die Gotter nicht
.
Цитата на английском: То be or not to be
.
Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes , а само переключение языка и соответствующего вида кавычек происходит через атрибут lang , добавляемый к тегу .
Рис. 15.6. Разные кавычки для разных языков
Вопросы для проверки
1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.
Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?
- Код CSS не валидный.
- К селектору A не добавлен псевдокласс :link.
- Псевдокласс :visited стоит после :hover.
- Псевдокласс :active стоит после :visited.
- Неверное значение свойства color у A:hover.
2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?
3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?
- К непосещённым ссылкам.
- К посещённым ссылкам.
- К любым ссылкам при наведении на них курсора мыши.
- К посещённым ссылкам при наведении на них курсора мыши.
- Ни к одному элементу.
Ответы
1. Псевдокласс :visited стоит после :hover.
3. Ни к одному элементу.
Как задать фон блоков?
Как разделить страницу на блоки (css) и задать фон каждого из блоков? Нужно разделить страницу на блоки и задать фон каждого из них. Как это сделать?
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 2 окт 2012 в 16:24
425 1 1 золотой знак 4 4 серебряных знака 12 12 бронзовых знаков
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Как разделить страницу на блоки, это вы уже сами смотрите. Чтобы определить бэкграунд для каждого отдельного блока, воспользуйтесь одним из CSS-правил:
background-color:#fff; background-image:url("pic.jpg"); background: url("pic.jpg") #fff; /* если вдруг картинка будет недоступной */ Отслеживать
ответ дан 2 окт 2012 в 16:41
2,539 3 3 золотых знака 22 22 серебряных знака 33 33 бронзовых знака
Вообще, как создавать и работать с «блоками» (чаще это называют слои, если я правильно понял, о чём вы) — это целая отдельная тема. Если вкратце — чтобы сделать слой, создайте блочный элемент —
У него вы можете задать любые свойства, необходимые вам (ширину/высоту, цвет, положение на экране и т.п.). Делается это через свойства CSS Например
А задать фон можно, как уже написали выше, одним из свойтв:
background-color: yellow;
background-image: url(ссылка на изображение)
ещё можно на всякий случай написать свойство background: no-repeat; чтобы фон не повторялся
Более подробно о любых свойствах CSS и HTML можно узнать тут