18:51 

Скоро весна, а не вот это вот все

Kai Noir
Ранимый эстет
Светлый дизайн с анимированым эпиграфом.
Давайте ждать весну вместе



Смотреть

Вопрос: Нравится?
1. Да 
37  (75.51%)
2. Нет - это как "да" только почти 
2  (4.08%)
3. Себе возьму 
10  (20.41%)
Всего: 49

@темы: цветы, серое, розовые, нежное, дизайн, Япония, Весна, SoraNoir

22:49 

Dead Flesh and Bones, Jodeee

Magnus Kervalen
23:34 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#epigraph .paragraph img {max-width: 750px;max-height: auto;}
На эпиграф также распространяются правила обводки, полу прозрачности, тени и прочих изысков из общей ленты. Убираются они отдельной строкой.
#epigraph .paragraph img { border: none!important; opacity : 1.0 !important; box-shadow:none!important;}
Кстати подобные манипуляции лучше проводить и со смайликами. (Здесь прозрачность уменьшена)
#shsmile, #atTagBox, .smile { border: none!important; opacity : 0.4 !important; box-shadow:none!important;}
Может показаться что с эпиграфом одни проблемы, но это не так. Первая закрепленная запись дает уникальную возможность прописывать ссылки, которые в структуре дайров не предусмотрены, визуализировать их картинками и закреплять в любом месте. Единственный минус в том, что все это отображается только на главной странице дневника (как и сам эпиграф). Однако это благодатная почва для смелых экспериментов.
Реализуется при помощи двух несложных строчек кода, одна из которых прописывается в настройках, там где "Эпиграф, фото, список ПЧ", а вторая добавляется в CSS код оформления.
Допустим вам хочется растащить по углам оформления кнопки соцсетей. Если использовать для этих целей картинку с полупрозрачной подложкой и прописывать ссылки координатами она перекроет меню и ленту записей, к тому же не подстроится под экран. Как быть?
1. Вставляем в эпиграф новый id

Присмотритесь к подчеркнутому

2. Теперь новому id прописываем свойства так, как если бы он был стандартным пунктом дайровского меню:

Например:
Эпиграф, фото, список ПЧ:

Настройки CSS:

В результате получаем:

Можно пойти дальше и совместить эти знания с еще одной идеей. Она не моя, подробно описана здесь, как и множество других, за что авторице процветания, счастья и всяческих благ.
Опишу создание подобия твиттера в дневнике, для чего процитирую пост из вышеупомянутого дневника:
читать дальше
Думаю суть понятна. В моем случае пост с твиттер статусами выглядит так:


Симпатично, но хочется эффектный бэкграунд. И тут встает вопрос как его прописывать? Если через дополнительные блоки картинка останется висеть на всех остальных страницах, что не есть хорошо. И выйти из положения мне как раз помогли дополнительный id и манипуляции с эпиграфом:
Эпиграф, фото, список ПЧ:

Настройки CSS:

Результат:

Картинка исчезает вместе с постом твиттера со всех страниц кроме главной.
Помимо всего прочего все эти манипуляции с дополнительными ссылками никак не влияют на текстовое содержимое эпиграфа, то есть он у вас останется где ему и положено, в начале ленты записей.
запись создана: 04.11.2016 в 21:19

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

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

12:34 

Per aspera ad astra

Kai Noir
Ранимый эстет
Темный дизайн с двумя эпиграфами: статичным и анимированым.

Вопрос: Нравится?
1. Да 
32  (84.21%)
2. Нет 
4  (10.53%)
3. С чайком потянет 
2  (5.26%)
Всего: 38

@темы: дизайн, голубое-сине-фиолетовое, аниме/арты, абстрактные, SoraNoir

18:09 

стайлза не испорчу даже я

Kai Noir
Ранимый эстет
Дизайн с двумя эпиграфами: статичным и анимированым


Смотреть

Вопрос: Нравится?
1. Да 
19  (70.37%)
2. Нет 
3  (11.11%)
3. С чайком потянет 
5  (18.52%)
Всего: 27

@темы: SoraNoir, дизайн, мрачное, по группам/фильмам/сериалам/играм

19:53 

Малахитовая шкатулка

Kai Noir
Ранимый эстет

Вопрос: Нравится?
1. Да 
27  (72.97%)
2. Нет 
5  (13.51%)
3. С чайком потянет 
5  (13.51%)
Всего: 37

@темы: фэнтези, зеленое, дизайн, бабочки, SoraNoir

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, как это сделано

17:35 

Еще о дополнительных блоках. Анимация.

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

В любом графическом редакторе пере сохраняем ее как jpg.

Грузим оба изображения в БИ. Располагаем в правом нижнем (или левом) углу под меню.
Это статичное изображение. Оно у нас по умолчанию.
#add_block1 {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444931.jpg') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Это анимированное. Оно подгружается когда над ним мышка.
#add_block1:hover {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444932.gif') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Котейка обосновалась под меню.

Можно задать картинкам отступ сверху равный высоте меню, чтобы при маленьком разрешении экрана котя его не перекрывала. Но в этом случае учитывайте и пункты видимые гостям.

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

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

02:53 

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

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

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

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

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


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

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

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

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

23:31 

Asteinny
Это свойственно человеку. После острого тянет на кисленькое. После смерти — на смех.©

Вопрос: Нравится?
1. Да 
40  (90.91%)
2. Нет 
4  (9.09%)
Всего: 44

@темы: дизайн, Зима, Asteinny, серое

01:38 

Новогодние открытки

Огненный Бес
Скромник с чертиками в глазах
Порадуйте себя и своих ПЧ новогодними открытками)
С наступающим новым годом и рождеством!





+7

Вопрос: Взял?
1. Да 
21  (100%)
Всего: 21

@темы: Огненный Бес, Новый год

19:41 

Дизайн для Рокэ Алва.

Харука.
Бороться и искать, найти и перепрятать. (с)
Забирая этот дизайн себе, ставьте баннер сообщества!

и

настройки

Вопрос: Нравится оформление?
1. Да! 
49  (100%)
Всего: 49

@темы: по группам/фильмам/сериалам/играм, заказ, дизайн, голубое-сине-фиолетовое, Izanami.

23:40 

Asteinny
Это свойственно человеку. После острого тянет на кисленькое. После смерти — на смех.©

Вопрос: Нравится?
1. Да. 
82  (100%)
Всего: 82

@темы: Asteinny, абстрактные, дизайн, по группам/фильмам/сериалам/играм, серое

21:40 

Нам семь лет. У нас новое оформление. И медальки)

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


Как я уже говорил несмотря на дайровские потрясения Original Design остается в строю, на страже вашего уюта и неповторимой атмосферы. Ну а само сообщество переоделось в максимально ламповое оформление. Ради чего пришлось повоевать с парой-тройкой новшевств админов) И надеюсь стало удобнее и приятнее для вас. Свои пожелания и возможно какие то недочеты укажите пожалуйста в комментариях. Хвалить тоже можно и нужно) На всякий случай сначала почистите кэш.
И самое главное хочу поблагодарить чудесных ПоЧитателей, которые несмотря на падение файлообменника, редкие обновления и творческие кризисы (и даже то что я однажды отписал 2000 человек) остаются с нами. Ваши слова благодарности все также греют душу и дают нам понять что то что мы делаем кому то нужно, а это очень очень важно для нас. Спасибо что вы есть.
К празднику мне хочется подарить вам ачивок. Думаю за долгий путь в семь лет каждый отыщет здесь свою, а то и не одну)


заказал диз и сижу в нем


нашел свое оформление среди готовых


за комментирование +10 постов


"тихоня" для тех кто любит сохранять посты в цитатник


один из нынешних трех ста ПЧ


для тех кто создал под нашим влиянием свой диз


подключил CSS ради оформления


вернулся после отписки


юбилейная ачивка для всех кто с нами, можно использовать в качестве баннера


ну вы поняли:evil:


ну вы поняли:evil:

Вопрос: Поздравить!
1. Пожелал процветания. 
46  (40.35%)
2. Похвалил оформление. 
30  (26.32%)
3. Забрал медаль. 
16  (14.04%)
4. Все сразу. 
22  (19.3%)
Всего: 114
Всего проголосовало: 59

@темы: Административное

14:59 

Место, где свет

Kai Noir
Ранимый эстет
В свободное пользование


Вопрос: Нравится?
1. Да 
34  (80.95%)
2. Нет 
3  (7.14%)
3. С чайком потянет 
5  (11.9%)
Всего: 42

@темы: зеленое, дизайн, SoraNoir

18:06 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Как и обещал доработанный и собранный диз.


еще скрины


НАСТРОЙКИ

Вопрос: Понравилось?
1. Да 
60  (96.77%)
2. Нет 
2  (3.23%)
Всего: 62
Всего проголосовало: 62

@темы: природа, мрачное, морское, дизайн, голубое-сине-фиолетовое, Кареглазый Демон, CSS

01:07 

CSS Минимализм

Огненный Бес
Скромник с чертиками в глазах
Несколько однотипных CSS дизайнов в разных цветовых вариантах в общее пользование
В работающем виде можно посмотреть здесь



Страница комментариев

Установить автоматически вариант 1

НАСТРОЙКИ

Другие варианты
Все скрины кликабельны
Настройки для установки в ручную по запросу







Вопрос: Нравится?
1. Вариант 1 
3  (3.3%)
2. Вариант 2 
13  (14.29%)
3. Вариант 3 
8  (8.79%)
4. Вариант 4 
10  (10.99%)
5. Вариант 5 
8  (8.79%)
6. Вариант 6 
10  (10.99%)
7. Вариант 7 
5  (5.49%)
8. Все! 
34  (37.36%)
Всего: 91
Всего проголосовало: 62

@темы: природа, морское, Огненный Бес, CSS

20:17 

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

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


КОД:


КАРТИНКИ:
У ССЫЛОК s015.radikal.ru/i332/1708/4f/b23e8b0fb941.png
НАВЕРХ s013.radikal.ru/i324/1708/e6/bde0ee0484e3.png
КУРСОР s018.radikal.ru/i514/1708/a9/75cf5d74fe22.png
НИЗ s010.radikal.ru/i311/1708/3b/b7bb16dd8696.png
СЕРЕДИНА s019.radikal.ru/i642/1708/53/7b82aa2dbfc0.png
ВЕРХ s019.radikal.ru/i636/1708/27/8e052c15200f.png
КРЫША s11.radikal.ru/i183/1708/cb/a3c2464e237d.png
ФОН s019.radikal.ru/i635/1708/91/cb6ecdb92b14.jpg
МЕНЮ s015.radikal.ru/i332/1708/06/73a3cad9b00e.png

НАСТРОЙКИ:
дизайн блочный
панель слева
гарнитура Georgia заголовок 13, текст 16
цвет текста заголовок, записи, ссылки #241405



Вопрос: Понравилось?
1. Да 
19  (90.48%)
2. Нет 
2  (9.52%)
Всего: 21
Всего проголосовало: 20

@темы: CSS, Кареглазый Демон, Лето, голубое-сине-фиолетовое, дизайн, желто-оранжевое, зеленое, нежное, песочно-бежевое, цветы

18:49 

недавно добавленная строка про обработку персональных данных - как убрать?

Nefer-Ra
R.I.P. your mind
можно ли как-то убрать эту строку или хоть загнать ее на самый верх в платном дизайне?
Используется дизайн Devil Left a Message (светлый), но каждый день эта строка вылезает и торчит как здрасьте между верхним меню и названием. И при этом не нажимается, а ходить каждый раз на служебную страницу и нажимать эту надпись надоедает.

@темы: меню, diaryCSS

15:07 

Доступ к записи ограничен

Лимбо
неправый кто-то в интернете капслоком брызжет из ушей сожми кулак вдохни поглубже забей (с)
Закрытая запись, не предназначенная для публичного просмотра

Пристанище охотника на нечисть

главная