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

02:53 

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

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

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

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

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


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

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

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

@темы: как это сделано, возможности 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., Пожалуйста)

2018-01-28 в 03:51 

Нэко
🌠взгляд кошხки грация картошხки🌠
Спасибо вам огромное за урок!!! изображение изображение изображение
Очень жалею, что раньше не верила, что смогу сама установить ЦСС, и поэтому не пользовалась этим сокровищем — знаниями *__* Правда круто, когда наглядно видно, сколько всего можно придумать в дневнике интересного. И да, согласна с Bacca.: огромная польза именно оттого, что вы не просто даёте куски кода, а разъясняете, что значит каждый шаг и что даст дописывание тех или иных слов либо цифр. Сразу становится гораздо понятнее, особенно для меня, новичка в этом.

Однако у меня к вам вопрос по поводу «развешанных» в дневнике Ваших фонариков.

Итак, я поставила себе в дневник красивые фонарики из поста. Они мне идеально подходят к дизайну, они мне очень понравились, они и впрямь добавляют живости внешнему виду дневника — всё так, всё так, однако же возникла проблема.
Вот скриншот того, как фонарики перекрывают первые строчки (а именно дату/время и заголовок) у постов:

Существует ли хоть какая-то возможность кодом как бы «сдвинуть» посты чуть ниже? Чтобы фонарики ничего не перекрывали.

Заранее спасибо в любом случае!

2018-01-28 в 13:55 

Изумрудный Демон
Угрюм - и - Пиздат
Да, CSS это очень интересно) Возможность есть конечно. Нужно задать отступ сверху для ленты записей.
#page-t {margin-top: 80px;}

2018-01-28 в 16:16 

Bacca.
Рано или поздно, так или иначе
Надо же, мои фонарики мне тоже закрывают немного, но я даже не спросила))) просто мотаю чуть ниже, выходя из зоны покрытия.
Спасибо большое! А в какое место кода лучше вставлять эту строчку?

2018-01-28 в 18:53 

Нэко
🌠взгляд кошხки грация картошხки🌠
Кареглазый Демон, ОГРОМНОЕ СПАСИБО!
Сейчас попробую! лайк

Bacca., мне не позволяло отмотать ниже, то есть даже на пределе «отматывания» всё равно перекрывало((

2018-01-28 в 19:07 

Нэко
🌠взгляд кошხки грация картошხки🌠
Спасибо большое! А в какое место кода лучше вставлять эту строчку?Bacca., вам нужно вставить её туда, где уже есть надпись #page-t и идёт речь про участок кода с таким названием) подмигиваю

2018-01-28 в 19:13 

Нэко
🌠взгляд кошხки грация картошხки🌠
Кареглазый Демон, итак. Докладываю)) Я попробовала вставить предложенный вами кусочек кода — никакого результата! НО!!!! Потом я подумала, что это оттого, что я, «подцепляя» один кусочек кода, не «подцепляю» при этом другой — и сделала то же самое, только про page-c , и вот тогда текстовые блоки и впрямь сдвинулись! но… участок меню остался на месте, и самое странное: дописывание такого же кусочка кода в блок #side не дало никаких результатов (я интуитивно предположила, что именно блок #side отвечает за меню. Возможно, была неправа).

скрин моего дневника сейчас:

В принципе мне это не особо уже мешает, но нельзя ли как-то «занизить» и блок меню? Чисто из эстетических соображений)

На всякий случай:
Сейчас мой код дневника выглядит так:

2018-01-28 в 19:33 

Нэко
🌠взгляд кошხки грация картошხки🌠
:ps: Уважаемый Кареглазый Демон, всё, я отменяю свой вопрос, сама поковырялась в коде, поэкспериментировала и разобралась: чтобы блок меню тоже «уехал» вниз, нужно было написать слово !important рядом с тем кусочком кода, который отвечает за «понижение расположения» блока меню!
Слушайте, это невероятно круто, я себя ощущаю немного волшебницей! *___*

На всякий случай: теперь мой код для этого дизайна выглядит так

2018-01-28 в 19:40 

Bacca.
Рано или поздно, так или иначе
нужно вставить её туда, где уже есть надпись #page-t и идёт речь про участок кода с таким названием)
у меня код не профессиональный, а слепленый самостоятельно, и такого участка нет. Я лучше подожду ответа Демона :)

2018-01-28 в 21:43 

Изумрудный Демон
Угрюм - и - Пиздат
вам нужно вставить её туда, где уже есть надпись #page-t и идёт речь про участок кода с таким названием) можно но необязательно. Браузеру все равно как читать правила:
селектор {свойство;}
селектор {свойство;}
селектор {свойство;}
селектор {свойство;}
или селектор {свойство; свойство; свойство; свойство;}

2018-01-28 в 21:47 

Изумрудный Демон
Угрюм - и - Пиздат
Слушайте, это невероятно круто, я себя ощущаю немного волшебницей! *___* да, бывает такое) Я часто говорю что процесс написания кодов это как зельеварение с заклинаниями)
написать слово !important ну это вообще первое что нужно делать когда код не слушается. Особенно если что либо по разному видят браузеры и сам дневник и окошко предпросмотра.
сделала то же самое, только про page-c не лучшее решение. Лучше двигать wrapper или #page-t.

2018-01-28 в 22:12 

Bacca.
Рано или поздно, так или иначе
Кареглазый Демон, ясно, спасибо :dlike:

2018-01-29 в 05:23 

Нэко
🌠взгляд кошხки грация картошხки🌠
не лучшее решение. Лучше двигать wrapper или #page-t.Кареглазый Демон, ну я же ещё дилетантка в этом, поэтому докумекала как могла))
Кстати, мне почему-то не помогло поставить именно #page-t, когда я лишь его прописала, не произошло ничего.

Я часто говорю что процесс написания кодов это как зельеварение с заклинаниями)
Ох, кстати да. Не помню дословно, как там Севушка говорил, что-то вроде «это очень умная и точная наука» — так и здесь. Каждая кавычка, каждая запятая имеет значение))

Bacca., Кареглазый Демон, кстати, у меня вопрос к вам. А где вы берёте вот такие пнг-шные «подвески» для дневников? Гиф-линеечек и разделителей — очень богатый ассортимент, а вот такую пнг-«подвеску» я пока, кроме фонариков из этого поста, нашла лишь одну. Вот эту.
static.diary.ru/userdir/6/5/2/3/652376/83022174...
Есть ли какие-то хренилища и фотобанки, наверное? И какой поисковый запрос лучше задать (на запрос «бордюр пнг фонарики» вылезает всё что угодно, кроме нужного(( )?

2018-01-29 в 17:14 

Bacca.
Рано или поздно, так или иначе
А где вы берёте
Я все делаю сама в фотошопе. Китайские фонарики нашла в инете, вырезала и покрасила под цвет дневника.

2018-01-29 в 18:04 

Изумрудный Демон
Угрюм - и - Пиздат
у меня вопрос к вам. А где вы берёте вот такие пнг-шные «подвески» для дневников? я все собираю сам в фотошопе. Беру из открытых источников.
Ищите клипарты, скрап наборы и бордюры на прозрачном фоне. Но крайне редко что то находится в готовом виде. Потому мои работы и недешевы) Нужно найти исходники, перекрасить, собрать макет, написать код. И часто этот процесс повторяется пока результат меня не удовлетворит)

2018-01-29 в 20:47 

Bacca.
Рано или поздно, так или иначе
Потому мои работы и недешевы)
Конечно, я сейчас учусь делать коллажи, так поиск подходящих исходников - адова работа, не говоря уж о том, что это все надо резать, клеить, красить, вытягивать. Очень много работы, даже без всякого кода. Но людям сложно понять, многие еще верят, что в фш есть кнопка «сделать зашибись» :gigi:

2018-01-30 в 05:07 

Нэко
🌠взгляд кошხки грация картошხки🌠
Кареглазый Демон, Bacca., ОГО *____* Слушайте, вы круты. Оба. Даже смайлов не могу найти подходящих, чтобы выразить своё восхищение.
Мне пока до вас как ползком до Луны))
Кстати, я вчера, после дооолгих поисков, всё-таки нашла для дневника кое-какие мало-мальски приемлемые бордюры и «подвесочки»))
Ищите клипарты, скрап наборы и бордюры на прозрачном фоне.Хорошо, попробую пробить первые два запроса (потому что бордюры уже искала), спасибо вам!

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