21:26 

Бэкграунд или фон дневника.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Я лично пользуюсь в основном двумя вариантами фона: большая картинка растянутая по экрану без искажения пропорций, либо повторяющееся бесшовное изображение, которое паркуется в левый верхний угол. Часто даже в платниках использую фоны стандартного размера/веса/способа загрузки.
Но раз уж меня попросили поделиться вариантами оформления фонов я нашел не скажу что все, но большую часть)
Информация взята с сайта WebReference.ru. Там удобный интерфейс и много полезного.
Фон на дайриках прописывается через body .Селектор пишется прям вот так, без решеток и точек.

У боди может быть несколько свойств:

background-color заливка цветом, но ее можно выставить и в стандартных настройках для фона дневника. А вот использование для скажем постов интересно. Задается так:
селектор {background-color: #000000!important;} после решетки код цвета.

background-image заливка фоновым изображением
body {background-image: url(<адрес>)}

background-position позиционирование изображения.
Например body { background-position: left top;} помещает в левый верхний угол. Дальше разные значения и их эквиваленты.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
Наглядно:


background-size масштабирование
Например body { background-size: auto;}оставляет размеры фонового изображения исходными.
Дальше разные значения и их эквиваленты.
<размер>
body {background-size: 500px 500px;}
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
body {background-size: 50% 50%;}
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
body {background-size:auto;}
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
body {background-size:cover;} Это мое любимое)
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
body {background-size:contain;}
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Наглядно:


background-repeat повторение
Например body {background-repeat: no-repeat;} говорит браузеру что картинку не нужно повторять.
Дальше сами значения.
no-repeat
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat
Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.
repeat-x
Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.
repeat-y
Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.
space
Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round
Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.
Наглядно:


background-attachment на дайрах по сути применяется только в двух значениях:
background-attachment: fixed !important;, если хочется чтобы фон был неподвижным.
и background-attachment: scroll !important; чтобы он прокручивался. Кстати сейчас для этого фокуса нужно разрешать дневнику растягиваться по ширине, в настройках тут: www.diary.ru/options/site/?common

Пока искал материал по теме наткнулся на еще одно любопытное свойство. Сам не пользовался, но может кто то найдет применение.
background-clip
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
padding-box
Фон отображается внутри границ.
border-box
Фон выводится под границами.
content-box
Фон отображается только внутри контента.
Наглядно:



Все эти свойства можно и нужно комбинировать.
Допустим фиксированная картинка масштабируемая по одной из сторон задается так:
body {background-image: url(<адрес>); background-size:cover; background-repeat: no-repeat; background-attachment: fixed !important;}

Вопрос: Полезно?
1. Да 
23  (100%)
2. Нет 
0  (0%)
Всего: 23

@темы: CSS, Кареглазый Демон, возможности CSS, как это сделано

Комментарии
2018-01-08 в 00:21 

Bacca.
Рано или поздно, так или иначе
Как я и думала, очень полный и интересный урок, большое спасибо! А наглядное воплощение исчерпывающе.
Все в блокнотик утащила, буду пробовать.

заливка фоновым изображениемтут у вас совсем коротенький код, а я в конце концов использовала из вашего же ответа в дайриЦСС от 2016 года. Там разбивка по браузерам была.
Еще нашла, как сделать полупрозрачным меню и фоны заголовков.
А вот как сделать opacity в постах и комментах, чтоб картинки и текст в них, да и в эпиграфе оставались непрозрачными, пока не нашла. Это когда задаешь прозрачность всей #page-c

2018-01-08 в 01:26 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Пожалуйста)
использовала из вашего же ответа
А вы можете принести сюда и дополнить... Лишним не будет.
И у меня к вам просьба. Оставляйте заявки на уроки тут originaldesign.diary.ru/p202013319.htm
Отдельным комментарием на отдельную тему. А то я забываю что у меня спрашивали спустя время.

2018-01-08 в 01:28 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
как сделать opacity в постах и комментах, чтоб картинки и текст в них, да и в эпиграфе оставались непрозрачными залить фоном полупрозрачную саму по себе картинку созданную в фотошопе.

2018-01-08 в 01:46 

Bacca.
Рано или поздно, так или иначе
Это ж тоже про фон, я потому здесь и спросила. Но наверное вы правы, отдельным уроком про это свойство наверное лучше.
залить фоном полупрозрачную саму по себе картинку созданную в фотошопе
Это такой код нужен?
#postsArea, #commentsArea, #addCommentArea {background: url('картинка');}
Я надеялась, что можно сделать средствами ЦСС, полупрозрачные фоны я в фш еще не умею делать. Вот как в меню, там такой код
#side{width:200px !important;margin:0 !important; opacity: 0.7;}тут мне даже нравится полупрозрачность текста.

Вот ваш ответ по поводу фона
читать дальше

2018-01-08 в 02:32 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Это такой код нужен? зависит от того какие именно подложки вы хотите залить. Тут что на чем лежит info.diary.ru/index.php?title=CSS
Я надеялась, что можно сделать средствами ЦСС к сожалению нельзя) Я сам пытался... но нет.

2018-01-08 в 09:52 

Bacca.
Рано или поздно, так или иначе
Спасибо, надо и эту справку себе на ссылки)) вечно забываю, где искать. Теперь понятны кое-какие ошибки. Я задала прозрачность основному контейтеру, а надо записи и комментариям (.singlePost, .singleComment). Но им не задается))
А вот этим ребятам - h1, .postDate, .countSecond .postDate, .singlePost.countSecond .header, .countSecond .postLinksBackg - нашла, как задать полупрозрачность с помощью background: rgba. А вот с записями этого не получается почему-то.
:ps: у нас тут аватарки порезались.

2018-01-08 в 12:21 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Bacca., аватарки вижу... И это не только в сообществе, везде... Видимо добавили широкое поле под большие ааатарки а кто то возмутился что они ему ленту рвут. Подождем... Может сделают чтобы эта полоса обтекала картинки. Иначе не понятно зачем большие аватарки если их не видно.

2018-01-08 в 19:50 

Bacca.
Рано или поздно, так или иначе
Я вчера не заметила дополнение под катом или его не было? Если не заметила, сама себе лопух, а если вы уже потом добавили, то громаднейшее спасибо! Тут есть все, что мне было нужно.
Испробовала background-clip:border-box и cover - это помогло мне залить фон записи картинкой полностью без замащивания. Я с этим уже второй час вожусь, решила заглянуть освежить память - а тут такая красота! :dinlove:
Под блок меню такими же способами фон можно подложить?

2018-01-08 в 20:05 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Я вчера не заметила дополнение под катом или его не было? а это все та же ебаная дайри магия. Вчера глючили каты.
Но меня очень радует ваша настойчивость в изучении материала) Значит не зря...
Под блок меню такими же способами фон можно подложить? Конечно.

2018-01-08 в 20:22 

Bacca.
Рано или поздно, так или иначе
Так интересно же!
Спасибо!

2018-01-09 в 23:06 

Bacca.
Рано или поздно, так или иначе
Хочу похвастаться)) узнала, как делать в фш прозрачные картинки и сделала себе полупрозрачные подложки, оставив фон чисто картинкой без цвета. Чтоб сделать фон форме добавления комментария, спросила название нужного селектора, пользуясь случаем, у Харуки, ибо в справке его не нашла. Потом смотрю - страница тем записей тоже совсем прозрачная, вспомнила, что слышала про программный код страницы, полезла туда искать и нашла! теперь у меня везде, где текст - лежит подложка.

2018-01-09 в 23:15 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Хочу похвастаться)) прелесть какая:lol: Поздравляю) у меня для вас небольшой презент по случаю.
Очень вдохновляющий дневник. Думаю вы там найдете чем поживиться) 39546284.diary.ru/

2018-01-09 в 23:49 

Bacca.
Рано или поздно, так или иначе
О, спасибо, интересно! я сейчас ЦСС-стилизацию почитываю, но там очень много неотвеченных вопросов. Хотя как сделать полупрозрачность в заголовках, дате поста и ссылок я там нашла, по этой же методике сделала топНав и боттомНав. Жаль, что в теле постов и комментов РГБА не работает.
А с подложками везде я ошиблась( в форме нового поста у меня все прозрачное, ищу, какой селектор за нее отвечает и пока не найду. Вот этот: #newPostForm - не работает. #section тоже, а остальное там по идее то, что внутри - заголовок, сообщение ...
Не подскажете? или как правильно искать.

АПД: уже не надо, нашла. Это #msg_form

2018-01-09 в 23:57 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Лучше обращаться к этим селекторам:
.singlePost, #msg_form, .singleComment реже #content
Если хочется оформить посты с чередованием, немного по разному, то к
.countFirst и .countSecond
#msg_form форма новой записи.

2018-01-10 в 00:07 

Bacca.
Рано или поздно, так или иначе
О, я как раз исправила тот коммент, что уже нашла))
Но вы еще добавили, .singlePost, .singleComment у меня как раз были первые в коде, а вот .countFirst и .countSecond не использовала. Но мне как раз сейчас не надо чередовать, запомню на будущее.
А чего вы смеялись? слишком у меня наворочено? :) ну это как у каждого неофита)

2018-01-10 в 00:14 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Bacca., А чего вы смеялись? просто умилился что пришли делиться достижениями) слишком у меня наворочено? :) ну это как у каждого неофита) я до сих пор с этим борюсь)

2018-01-10 в 00:35 

Bacca.
Рано или поздно, так или иначе
ну а к кому мне еще приходить? Это ж вы и ваши уроки меня всем этим заразили :dwink:
Кстати я уже воспользовалась классами .countFirst и .countSecond - сказала им нафиг none!important, а то часть заголовков и дат попадала просто на фон.

2018-01-10 в 01:08 

Bacca.
Рано или поздно, так или иначе
Вернее попыталась)) в просмотре в настройках все получается, а при сохранении - нет.
Как можно избавиться от чередования? оно судя по справке - по умолчанию.
Я написала .countFirst, .countSecond { transition: none!important; }
В просмотре работает, в дневнике - нет :(

2018-01-10 в 01:11 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Bacca., Как можно избавиться от чередования? написать через запятую .countFirst и .countSecond и задать одинаковые параметры. А вообще если у вас сейчас табличный дизайн выбран я бы сменил на блочный.

2018-01-10 в 01:27 

Bacca.
Рано или поздно, так или иначе
Спасибо! :dlike: получилось.
Блочный я как-нить попозже, мне пока табличный нравится. Чтоб меню слева и не выпадало)

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Original Designs бесплатники, CSS и уроки по созданию оформлений.

главная