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% (в правом нижнем углу)
Наглядно:


ЧИТАТЬ ДАЛЬШЕ

Вопрос: Полезно?
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 и уроки по созданию оформлений.

главная