Ознакомьтесь с нашей политикой обработки персональных данных

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

  • ↓
  • ↑
  • ⇑
 
Записи с темой: как это сделано (список заголовков)
21:19 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#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:

Результат:

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

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

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

19:48 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Сейчас будет признание века) Я не умею делать бесшовники... в смысле сам с нуля руками в фотошопе. Зато знаю другой отличный способ. По просьбе [Рыжая_Бестия] делюсь.
Берем любую картинку.
Создаем в фотошопе файл с шириной 245 пикселей и произвольной высотой.
Подгоняем исходник. Если на картинке есть четкий заметный объект, у нас это кот, он должен занять чуть меньше половины изображения.

Далее нам понадобится программа gimp. Скачать ее можно здесь.
Скопируем совмещенные данные нашего фона из фотошопа.
Вставим в гимп

Нажимаем

Бесшовное изображение готово. Правка - копировать видимое. Возвращаемся в фотошоп. Редактирование - вставить.

Если есть желание его можно доработать. Например создать маску и проявить кота.

Работать обязательно на самой маске а не на слое, дорисовывать и убирать ластиком и кистью. И следите чтобы на верхней и нижней границе ничего не стерлось.
Сохраняем в jpg. Вес выставляем меньше 70кб.
Готово)

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

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

16:18 

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

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

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



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



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



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



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


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



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

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



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



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


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

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

16:24 

Урок для Лисёнка Чу

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


Как это сделано?
Берем код таблицы:

tr тег строчки. td ячейки. Когда переходим к следующей ячейке или строке тег закрываем при помощи /.
Выглядит это так:
Ячейка 1Ячейка 2Ячейка 3
Ячейка 4Ячейка 5Ячейка 6


Дальше используем тег MORE

Выглядит это так:


Ячейки можно заполнять чем угодно.

Однако стоит учитывать что они растягиваются под содержимое.

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

16:01 

Для Izanami.

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

Дальше нужно создать еще два слоя: с белым фоном и надписью в нашем случае.

Макет разрезаем по синим линиям и сохраняем в jpg.
В итоге получаем три картинки:
1.

2.

3.

Теперь используем теги MORE.


перваявторая

Первая нажимается и открывает третью. (кликабельно)


Для второй и третьей картинок прописываем карту ссылок. Опишу подробно, мало ли вдруг кто не умеет, а ему интересно. Через XnView смотрим координаты всего что должно нажиматься.
Общий вид:


Вторая картинка:






и ее код:


Третья картинка:



и ее код:
Мне удобнее сначала подписать названия и только потом добавлять ссылки:




Важный момент: там где img usemap нужно задавать новое имя для каждой картинки в посте, иначе ссылки отобразятся некорректно.

Теперь осталось только вставить готовые коды в шаблон MORE.



Итог:





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

16:55 

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

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Возьмем для примера аватарку.
Она обведена полоской шириной в 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. Да.  58  (95.08%)
2. Нет.  3  (4.92%)
Всего: 61

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

01:03 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
В предыдущих постах Я рассказал о простых эффектах на примере аватарок. Все они применимы и к изображениях в вашей ленте. Равно как и все эффекты приводимые ниже можно использовать и для аватарок.
Задаем картинкам в ленте фиксированную ширину 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. Да.  56  (96.55%)
2. Нет.  2  (3.45%)
Всего: 58

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

10:46 

О цветах.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Каждый кто пытался сам собрать оформление подтвердит что дело это нелегкое и на каждом этапе встречается куча подводных камней. Но с некоторыми можно справиться и довольно просто. Иногда выбирая цвет текста вручную можно столкнуться с некрасивым эффектом битых пикселей, искажениями и прочей пакостью. Чтобы цвета отображались красиво и одинаково во всех браузерах существует таблица именованных цветов css.yoksel.ru/pages/tablitsa-imenovanny-h-tsvet...

Пользоваться ей очень просто. Вместо шестизначного кода вставляем в код слово и наслаждаемся видом. А если нужно перевести название в привычный или rgb вид есть удобный сервис: leaverou.github.io/css-colors/#ivory

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

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

17:44 

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

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


Форма.

Обводка.



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

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

Вопрос: Полезно?
1. Да.  72  (98.63%)
2. Нет.  1  (1.37%)
Всего: 73

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

21:02 

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



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

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

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

02:12 

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

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


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

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

13:12 

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

Вопрос: Интересно?
1. Да.  57  (83.82%)
2. Нет.  11  (16.18%)
Всего: 68

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

03:11 

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

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

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

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

03:09 

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

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

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

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

03:07 

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

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

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

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

03:05 

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

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


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

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

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

16:29 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Возможно кому то будет полезно. Коды кнопок соцсетей которые открываются по клику на "поделиться" под постом.
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. Да  44  (100%)
Всего: 44

@темы: как это сделано

01:15 

Про меню.

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

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

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


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

Дискуссии:

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

Упоминания:

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

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

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

01:12 

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

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

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

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

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

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

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

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

17:21 

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

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

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

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

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

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

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

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

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

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

главная