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

Записи с темой: возможности css (список заголовков)
17:21 

Памятка для тех у кого едет платник и/или есть желание привести его в порядок.

Просто Демон
I try my best
Многие оформления создавались до введения новых пунктов в меню дайров, поэтому их наличие в кодах не предусмотрено. Касается это почти всех относительно старых дизайнов в этом и других сообществах, а также оформлений из каталога.
Чтобы убрать вставьте в конец своего кода:
платные сервисы
упоминания
краткое избранное

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

Убрать все вышеизложенное сразу можно кодом:

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

Также можно запретить вас цитировать, подписываться на пост и забирать посты перепостом:

Кнопка "пожаловаться" отключается в настройках www.diary.ru/options/site/, но тогда вы ее не видите в чужих дневниках. Чтобы ее не было под вашими постами добавьте:
Многие не знают, но надпись "Я знаю, что на сайте имеются материалы, не рекомендуемые для просмотра лицам моложе 18 лет" исчезает если на нее нажать. Поэтому ее не обязательно оформлять в своем дневнике. Можете ее просто убрать:

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

Вопрос: Полезно?
1. Да. 
54  (100%)
Всего: 54

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

01:12 

Еще несколько советов.

Просто Демон
I try my best
Что делать если у вас картинки выходят за край ленты? Подгонять...
Для основной ленты дневника и цитат берите значение побольше.

Для избранного, комментариев, цитатника и черновиков поменьше.

Если к картинкам в дизайне применено какое либо визуальное извращение будь то тень или рамка та же участь постигнет смайлики, кнопки редактирования и возможно что то еще... Лечится это так:

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

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

Вопрос: Полезно?
1. Да. 
43  (100%)
Всего: 43

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

01:15 

Про меню.

Просто Демон
I try my best
Чтобы сократить меню до минимума воспользуйтесь кодом:

или же такой вариант:

Чтобы при нажатии на темы записей выпадала только надпись "все темы"


Заменить уведомления картинками (размер и местоположение нужно подогнать индивидуально):
Умылы:

Дискуссии:

Новые комментарии:

Упоминания:

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

Вопрос: Полезно?
1. Да. 
54  (100%)
Всего: 54

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

16:29 

Просто Демон
I try my best
Возможно кому то будет полезно. Коды кнопок соцсетей которые открываются по клику на "поделиться" под постом.
span.b-share-icon.b-share-icon_vkontakte
span.b-share-icon.b-share-icon_facebook
span.b-share-icon.b-share-icon_twitter
span.b-share-icon.b-share-icon_odnoklassniki
span.b-share-icon.b-share-icon_lj

Вопрос: Полезно?
1. Да 
46  (100%)
Всего: 46

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

03:05 

Подробная инструкция по сборке платника часть IV

Ко мне на "вы", шепотом и с придыханием...


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

Вопрос: Полезно?
1. Да. 
67  (100%)
Всего: 67

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

03:07 

Подробная инструкция по сборке платника часть III

Ко мне на "вы", шепотом и с придыханием...

Вопрос: Полезно?
1. Да. 
53  (100%)
Всего: 53

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

03:09 

Подробная инструкция по сборке платника часть II

Ко мне на "вы", шепотом и с придыханием...

Вопрос: Полезно?
1. Да. 
60  (100%)
Всего: 60

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

03:11 

Подробная инструкция по сборке платника часть I

Ко мне на "вы", шепотом и с придыханием...
Сразу оговорюсь что способов создания оформления бесчисленное множество как и их вариантов. И то что Я пишу мой личный опыт и тотальное ИМХО самоучки, а также отправная точка для ваших собственных экспериментов. Просто прочитав эти посты вы мало что поймете. Найдите время, сядьте и сделайте все по пунктам, а дальше творите сами.

Вопрос: Полезно?
1. Да. 
79  (100%)
Всего: 79

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

13:12 

Просто Демон
I try my best
Интересует подробный разбор создания платника такого вида?

Вопрос: Интересно?
1. Да. 
60  (84.51%)
2. Нет. 
11  (15.49%)
Всего: 71

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

02:12 

Подробная инструкция по сборке платника.

Просто Демон
I try my best


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

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

21:02 

Просто Демон
I try my best
Аттракцион невиданной щедрости продолжается и в этом посте вы сможете найти множество способов для оформления ссылок в своих дизайнах. Обратите внимание на то что гифки ухудшают качество эффектов. И пожалуйста используйте этот материал как отправную точку для собственных экспериментов, а не простого копирования.
И мне будет приятно если вы скажете спасибо.



Эффект срабатывает самостоятельно без наведения мышки

Вопрос: Полезно?
1. Да. 
87  (93.55%)
2. Нет. 
6  (6.45%)
Всего: 93

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

17:44 

Способы оформления аватарок.

Просто Демон
I try my best
Размер.


Форма.

Обводка.



Тень. Интуитивно понятный и очень удобный инструмент для создания тени. www.layerstyles.org/builder.html

Для скругления углов изображений средствами CSS есть отдельная штука:
border-radius.com/

Вопрос: Полезно?
1. Да. 
76  (98.7%)
2. Нет. 
1  (1.3%)
Всего: 77

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

01:03 

Просто Демон
I try my best
В предыдущих постах Я рассказал о простых эффектах на примере аватарок. Все они применимы и к изображениях в вашей ленте. Равно как и все эффекты приводимые ниже можно использовать и для аватарок.
Задаем картинкам в ленте фиксированную ширину 300 пикселей. Можно и больше, мне так удобнее для примера.
.paragraph img{max-width: 300px;max-height: auto;}

Делаем так чтобы она становилась полупрозрачной при наведении мышки.
.paragraph img{opacity : 1.0 !important;}
.paragraph img:hover {opacity : 0.5 !important;}

Или же наоборот, картинки изначально полупрозрачные, что красиво в темных оформлениях, а при наведении мышки они становятся ярче за счет полной прозрачности.
.paragraph img{opacity : 0.5 !important;}
.paragraph img:hover {opacity : 1.0 !important;}

Эффект есть, но хочется чтобы он был более плавным. Для этого мы задаем время в течение которого одно свойство заменится на другое.
.paragraph img{ -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; } одна секунда. А чтобы прозрачность также плавно возвращалась в прежнее состояние то же свойство прописываем и для положения мышки над картинкой.
.paragraph img:hover { -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; }

Качество изображения при этом хуже не становится. Это глюк записывающей проги.
Изображению можно задать еще одно интересное свойство, которое к сожалению не видит моя мозила, зато понимают опера и хром. Картинки становятся черно белыми, благодаря наложению фильтра.
.paragraph img{ -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-o-filter: grayscale(100%);-ms-filter: grayscale(100%); -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; }
.paragraph img:hover{ -webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-o-filter: grayscale(0%);-ms-filter: grayscale(0%); -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; }

Обратите внимание что наложение задается в процентах. Поэтому данный эффект можно использовать и для при глушения насыщенности, аватарок например.
.avatar img { -webkit-filter: grayscale(20%);-moz-filter: grayscale(20%);-o-filter: grayscale(20%);-ms-filter: grayscale(20%); }
Или смайликов. В темных оформлениях они особенно режут глаз.
#shsmile { -webkit-filter: grayscale(50%);-moz-filter: grayscale(50%);-o-filter: grayscale(50%);-ms-filter: grayscale(50%); }
Еще один интересный эффект изменение размера картинок. Главное чтобы он был плавным.
Дописываем в код .paragraph img:hover{max-width: 600px;max-height: auto;} и изображения ленты увеличатся вдвое при наведении мышки.


Вопрос: Полезно?
1. Да. 
59  (96.72%)
2. Нет. 
2  (3.28%)
Всего: 61

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

16:55 

Немного о перемещении и полупрозрачности.

Просто Демон
I try my best
Возьмем для примера аватарку.
Она обведена полоской шириной в 4 пикселя и ей заданы два положения: обычное и с мышкой сверху.
.avatar img { border:4px solid #81735C !important;}
.avatar img { margin-left:20px;width:100px; margin-top:20px; }
.avatar img:hover { margin-left:0px;width:100px; margin-top:20px; }

Добавим эффекту полу прозрачности и плавности.
.avatar img { opacity : 0.5 !important;-moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; }
.avatar img:hover { opacity : 1.0 !important;-moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s;}

Поменяем ширину картинки при наведении мышки:
.avatar img:hover { margin-left:0px;width:80px; margin-top:20px; }

Зададим другую обводку:
.avatar img:hover { border:2px dotted #000 !important;}

Варианты ограничены только вашей фантазией. Эффекты можно привинтить к любым селекторам оформления.

Вопрос: Полезно?
1. Да. 
63  (95.45%)
2. Нет. 
3  (4.55%)
Всего: 66

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

16:18 

Про темы записей.

Просто Демон
I try my best
Темы записей эта такая вещь про которую вспоминаешь в последний момент, по крайней мере по началу. И делать с ними ничего не хочется, лишь бы выпадали при нажатии на ссылку. Но часто и этого не происходит. Менюшки летают, выскакивает надпись "все темы" и т.д. Сразу оговорюсь что все подсмотрено, украдено и ничего нового Я не изобрел. Собрал и принес.

Итак, первое что можно сделать с темами записей это раскрыть список при боковом расположении меню и чтобы смотрелось аккуратнее уменьшить шрифт.



Список можно убрать совсем.



Если задать число меньше 20 останется несколько тем записей. Однако не с большим количеством постов.



Темы записей можно расположить в два столбика. Даже при боковом меню.



А если добавить это будут еще и выплывать.


С помощью этого кода можно вынести выпадающий список тем за пределы меню и зафиксировать на странице.



Передвигать вверх-вниз через padding и margin из последних двух строк. Значения должны совпадать чтобы меню не плясало.

Лично мне темы записей милее в верхнем выпадающем меню.
Оставим белый фон и обводку из предыдущего примера. Зададим два столбика и отступ строчкам, уменьшим шрифт.



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



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


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

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

00:03 

Просто Демон
I try my best
Меня так впечатлила реакция на простую кнопку «наверх» в сообществе За родной диван!, что я решил запилить полноценный туториал с основными возможными положениями этой самой кнопки. Мало ли, вдруг еще кого порадую) Опять же если вы подключили CSS спасая дайри, а зачем он вам не знаете, вот вам ответ.
Даже не вдаваясь в визуальные дебри сократите меню удалив лишнее и приведите дневник в порядок, как это описано здесь и здесь. И повесьте кнопку наверх, как вариант.
Возьмем для наглядости такой макет:

Картинка может быть абсолютно любой. Стрелка, указатель наверх или что то что подойдет по смыслу. Главное чтобы фон этой кнопки был прозрачным. Загружаете в свою БИ. И дальше в кодах строго между кавычек используете url своей картинки начиная с /usedir и до конца.
width это ширина картинки
height высота. Эти параметры прописываются индивидуально.
position: fixed !important; фиксирует кнопку на странице, чтобы она не уехала с лентой
display:block!important;line-height: 500px !important; overflow:hidden !important; помогает заменить изначальную текстовую ссылку на картинку. Кому интересны детали добро пожаловать на htmlbook.ru/
z-index: 3; это что то вроде слоев фотошопа. Чем больше цифра тем выше элемент. Лучше прописывать, чтобы кнопка точно была над лентой и записями и не перекрылась допустим меню.
#bottomNav {display: block;} просто смиритесь с тем что без этой строчки кнопка не видна)

Теперь по позициям. Если вам нужна кнопка в углу задаете ей нулевые отступы

1.

2.

3.

4.

Если же кнопка нужна вам прикрученной к краю ленты подход немного меняется. Отступы сверху и снизу прописываются также, а справа-слева в два этапа.
Сначала мы паркуем кнопку в центр благодаря left:50%;
Затем двигаем ее уже от середины. На 450 пикселей в нашем случае, то есть на половину ширины ленты.
margin-left: -450px; передвинет кнопку влево,
margin-left: 450px; соответственно вправо.

5.

6.

7.

8.

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

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

17:16 

Разделители.

Просто Демон
I try my best
Возможность прописать кодом разделители это еще один повод подключить CSS)
Отдельного селектора, отвечающего за пространство между постами и комментариями не существует. Зато можно задавать фон самого поста.
Если бэкграунд повторяющийся получится заливка. Текстурой, полупрозрачной подложкой или просто цветом по вашему желанию.
А если прописать картинку без повторения и задать ей положение по краю поста она прилепится справа, слева, сверху или внизу. Последние два случая как раз используются для имитации разделителей.
Конечно можно и в бесплатнике исхитриться. Допустим прописав нужный код с картинкой через сервис настраиваемых кнопок. Но в этом случае вам придется жать на кнопку вручную в конце каждого поста. А если страниц в вашем дневнике много пере сохранять ранние посты вы просто замучаетесь.

Сам код очень простой. Даже не нужно прописывать ширину и высоты картинки.

Обратите внимание что вставлять нужно не весь адрес изображения из БИ, а начиная с /userdir и до конца.
Расшифровка:
каждый пост {(картинка) не повторять; позиция внизу; отступ снизу; отступ сверху}
Отступы нужны чтобы ваш разделитель вышел за сам пост и не перекрывал ссылки под постом.
Когда вы прописываете код таким образом возникает небольшой глюк, а именно двоится разделитель под эпиграфом.
Убирается это вот так:


Конечный код:


Ну и чтобы вам было на чем тренироваться.
РАЗДЕЛИТЕЛИ

Авторство не мое, я только подогнал под размер. Найдено в открытых источниках.

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

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

13:11 

Просто Демон
I try my best
Я тут прикинул масштабы мануала по возможностям применения CSS для дайров с примерами и понял что лучше уж в формате видео. Прошелся по своим работам, потыкал, записал. Здесь конечно не все, я старался не выкладывать те что в свободном доступе и на виду. Если вам хватит терпения досмотреть до конца вы возможно откроете для себя что то новое)
Обращаю ваше внимание на то что я специально уменьшил область записи и свернул браузер. В живую эти оформления смотрятся лучше в основной массе, особенно на широких мониторах. Градиенты не рябят, менюшки друг на друга не наезжают.
И к сожалению в большинстве этих дизайнов часть красоты не видна, а именно в тех где эпиграф перекрывает верх. В таких работах он прописывался картинкой со ссылками и гармонично вписывался в оформление. К сожалению восстановить их у меня нет возможности. И раньше я часто использовал прием уведомлений картинками. Они тоже отображаются не везде, но я запишу с ними отдельное видео.
В некоторых старых работах видны огрехи. Простите их мне пожалуйста. Я был молод и неопытен. Зато много экспериментировал) И поверьте на слово, сейчас я могу и делаю лучше.

Вопрос: Интересно?
1. Да 
34  (97.14%)
2. Нет 
1  (2.86%)
Всего: 35

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

21:28 

Пост для желающих учиться.

Ко мне на "вы", шепотом и с придыханием...
Здесь вы можете задать мастерам вопрос технического характера или попросить продемонстрировать тот или иной прием визуально.
Все посты по теме здесь.
запись создана: 09.01.2015 в 04:16

@темы: как это сделано, возможности CSS, Полезное, урок

02:53 

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

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

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

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

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


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

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

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

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

главная