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

Записи с темой: как это сделано (список заголовков)
19:06 

В бесплатном дневнике бывают кнопки?

Ко мне на "вы", шепотом и с придыханием...
Если в своем эпике вы храните ссылки, для них целесообразно сделать кнопки, подходящие к новому оформлению.
Например они могут выглядеть так:
originaldesign.diary.ru/p148788791.htm
originaldesign.diary.ru/p147889610.htm
originaldesign.diary.ru/p146712302.htm
Кнопка- это картинка, работающая по принципу баннера. Чтобы при нажатии на нее вы попадали на нужную страницу в закладке HTML прописывается код, по принципу адрес страницы=адрес картинки. Форма кода для баннера и кнопки одинакова:

Мы можем дать вам готовый код для вставки в эпиграф, но тогда картинка, указанная в коде будет храниться в БИ автора.
Если же вы хотите точно знать, что с ней ничего не произойдет, вставьте свою ссылку на картинку.
Для этого скопируйте кнопки в комп и загрузите в свою БИ.
Если вы загружаете картинку сразу в пост, уберите из формы кода для кнопок эту часть: , а на ее место выберите и вставьте нужную кнопку.
Если же вы грузите картинку из БИ:
Рядом с каждой картинкой есть надпись url Нажмите на нее. В строке браузера появится примерно это: Вам нужен не весь код, а только эта часть:
Этот код нужно вставить вместо адреса картинки, строго между кавычек.
Адрес страницы берется оттуда куда ведет ссылка, его надо скопировать целиком.
P.S. Чтобы кнопки располагались под эпиграфом в ряд не отделяйте коды кнопок друг от друга пробелами.

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

13:06 

Как задать ссылки координатами?

Просто Демон
I try my best
Покажу на примере эпика Tantalia.
Нам понадобятся:
1. Сама картинка эпиграфа тык
2. Код:
3. Программа которая видит координаты изображений, например XnView Скачать


В конце получаем код:

Текстовая инструкция:
Откройте через XnView картинку эпиграфа. Обратите внимание на значения X и Y слева внизу. Они меняются в зависимости от положения мышки. Это координаты. Откройте блокнотом код. Откройте в браузере все страницы на которые ведут ваши ссылки.
Далее скопируйте код (мне лично так проще, создавать копии на полпути чтобы можно было переправить) в том же документе в блокноте. Загрузите картинку на файлообменник и скопируйте прямую ссылку на нее в код, туда где "адрес изображения". На месте "ссылка1", "ссылка2" и т.д. напишите названия ваших ссылок. За каждую из них отвечает кусок: Таких кусков должно быть столько сколько вам нужно. Поэтому удалите лишние или добавьте в код недостающие. Назовите все ссылки.
Откройте изображение. Поставьте окна XnView и блокнота рядом, так удобнее. Наведите курсор в левый верхний угол первой надписи. Значения X и Y первые два числа через запятую. Теперь в нижний правый угол той же надписи. Это третье и четвертое числа. Повторите для остальных ссылок.
Скопируйте получившийся код еще раз (но можете все делать и в одном). Теперь замените названия соответствующими адресами страниц из браузеров. Сохраните текстовый файл. Скопируйте и вставьте в эпиграф.

Если остались вопросы задать их можно в комментариях к записи.

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

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

15:04 

Ответ на вопрос Silina Black про анимацию.

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

Сайт с заготовками здесь
Первый способ наложения анимации самый простой. Подойдет для баннеров и открыток.

С первого раза у меня не получилось потому что выбрал последний кадр, а нужно было первый.
Если анимация дергается нужно удалить некоторые кадры, естественно внимательно все просмотрев. Также удалять их придется если вес гифки слишком большой. Большинство файлообменников разрешают заливать до 5мб, ucoz до15мб.
Результат:
Второй способ посложнее, однако с его помощью можно делать вылупляшки и что угодно на прозрачной подложке.
Для начала создаем не анимированный файл со слоями. Потом копируем их в правильном порядке в анимацию. Дальше для каждого кадра выставляем обтравочную маску и параметры наложения. Кроме прозрачности это могут быть режимы наложения.

Эпиграф создается по тому же принципу, только нижний слой будет залит цветом.
Результат:

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

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

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, Кареглазый Демон

10:46 

О цветах.

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

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

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

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

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:01 

Для Izanami.

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

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

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

2.

3.

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


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

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


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


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






и ее код:


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



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




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

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



Итог:





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

16:24 

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

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


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

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


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

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


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

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

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

главная