02:53 

Как поставить в дневнике елку?

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Помимо стандартных селекторов на дайриках можно прописывать свойства для дополнительных блоков. Отображаться такой блок будет на всех страницах дневника. Всего их может быть не более десяти в одном оформлении.
Задаются они селекторами
#add_block1
#add_block2
...
#add_block10

Зачем это нужно?
Допустим чтобы поставить елку в угол)
Берем елку на прозрачном фоне, грузим в свою БИ. Дальше прописываем свойства как любому другому селектору. (в примере елка нашего сообщества)

дополнительный блок1 {ширина; высота; бэкграунд: (адрес картинки из вашей БИ строго между кавычек) не повторять; позиция фиксированная; отступ снизу; отступ слева; положение на странице как слоя;}
Отступ снизу отрицательный, чтобы елка выглядывала из за края экрана, а не висела в воздухе, z индекс отрицательный чтобы не перекрывала информацию при узкой ленте записей. Соответственно если вы зададите position: absolute !important; блок промотается вместе с лентой. А позиционирование можно задавать от любого края, в процентах и пикселях.

Это один из вариантов использования дополнительных блоков. Еще с их помощью можно декорировать верх оформления, имитируя шапку сайта, пуская полосы, украшения или подложки между враппером и фоном дневника. Или над враппером, в зависимости от задумки. Такой прием хорош чтобы диз не выглядел голым и пустым на широком мониторе, но при этом не утяжелялся при просмотре со смартфона.
Возьму для примера фонарики из этого оформления:


Здесь задается ширина в 100%, а для картинки прописывается повторение по оси х, то есть по горизонтали. В результате фонарики заполняют весь экран, хотя сама картинка выглядит вот так:

Если эта тема интересна оставляйте комментарии. Я расскажу как еще можно использовать дополнительные блоки.

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

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

Комментарии
2017-12-25 в 21:26 

Найотри
Самым главным доказательством существования разумной жизни во Вселенной является то, что ещё никто не пытался с нами связаться. (с) Неизвестный автор
Полезная вещь. Возможно, получится вставить дополнительные элементы в некоторые дизайны, которыми неудобно пользоваться на широком экране из-за чересчур яркого фона. А так можно будет чем-то его частично загородить. Но об этом я буду думать потом.

2017-12-26 в 03:31 

Bacca.
Рано или поздно, так или иначе
О, это просто замечательно, спасибо! как раз хотелось чем-то украсить дневник.
Но у меня уже два ночи, так что я завтра вернусь разбираться подробнее.
И большое вам спасибо, что переводите термины на более понятный язык, чем гугл :dlike:
Ваша елочка чудесна!
Фонарики ж тоже на прозрачном фоне?

2017-12-26 в 08:05 

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

2017-12-29 в 20:15 

Bacca.
Рано или поздно, так или иначе
Пришла еще раз сказать вам огромное спасибо! :dinlove:
Украсила себе наконец елочку. А позже фонарики повешу))
А вот эта коробочка с конфетти у вас справа в углу - это блок №2, фиксированный по правому краю внизу? То есть чтоб его поставить, надо заменить отступ слева на отступ справа? а остальные свойства тоже надо изменить? Отступ снизу, я так понимаю, тут не отрицательный, но близкий к 0, а z-индекс какой? и какая у этого индекса шкала? отступы в пикселях или процентах, а число «положения слоя» задается количеством возможных дополнительных блоков, т.е. от 1 до 10, я правильно понимаю?

2017-12-29 в 21:04 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Bacca., шикарная елка) И мне очень приятно что я косвенно сопричастен этой красоте)
А вот эта коробочка с конфетти у вас справа в углу - это блок №2, фиксированный по правому краю внизу? нет, это кнопка наверх.
Но если вы просто хотите подобную коробочку то нужно заменить отступ, все правильно. Пишите нули у bottom и right. z-индекс методом перебора, чтобы оказался под лентой записи, или над ней, по вашей задумке.
а число «положения слоя» задается количеством возможных дополнительных блоков насколько мне известно нет. Но один и тот же индекс может быть у нескольких элементов. А оформления редко бывают больше чем в четыре наслоения плоскостей.

2017-12-29 в 21:15 

Bacca.
Рано или поздно, так или иначе
Спасибо, очень рада, что вам понравилось.

Не додумалась по коробочке ткнуть)) помню, у вас была другая кнопка. Но как любой неофит, хочу обвешать весь дневник финтифлюшками, потом попустит))
z-индекс методом перебора
то есть какой-то шкалы со значениями каждой цифры нет? ну перебором даже интереснее.
И "наслоение плоскостей" очень соблазнительно звучит)) Надо сделать себе однотонный фон и поиграться))

2017-12-29 в 21:17 

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

2017-12-29 в 22:28 

Bacca.
Рано или поздно, так или иначе
В общем при положительном значении z-индекса картинка лежит сверху всего, независимо от цифры. Я ставила и 1 и 4 и 10 - фонарики все время сверху ленты.
Когда ставишь -1, -2 — фонарики уходят под ленту, но висят сверху елки. Поставила -10 - ушли за елку.

2017-12-29 в 22:38 

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

2017-12-29 в 22:42 

Bacca.
Рано или поздно, так или иначе
Ну да. А что такое враппер? так называется лента записей с эпиграфом?

2017-12-29 в 23:00 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
info.diary.ru/index.php?title=CSS это общий контейнер в который помещается все кроме фона дневника и допблоков.

2017-12-29 в 23:06 

Bacca.
Рано или поздно, так или иначе
Надо таки сесть и почитать))
Спасибо :red:

2017-12-29 в 23:11 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Bacca., Пожалуйста)

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

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

главная