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

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

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

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

17:16 

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

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

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

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


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


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

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

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

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

00:03 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Меня так впечатлила реакция на простую кнопку «наверх» в сообществе За родной диван!, что я решил запилить полноценный туториал с основными возможными положениями этой самой кнопки. Мало ли, вдруг еще кого порадую) Опять же если вы подключили 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. Да 
24  (100%)
2. Нет 
0  (0%)
Всего: 24
Всего проголосовало: 24

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

04:45 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
А давайте я с вами чем нибудь полезным поделюсь... для разнообразия) Все скрины кликабельны.
Мне лично этот лайфхак пригодился при оформлении постов для ФБ. Но при сборке CSS это также полезная штука.
Иногда бывает что верх и низ вашего дизайна на полупрозрачной подложке, то есть экстратоп и экстработтом в png. А середина в jpg. Фотошопный макет красив и монолитен, а при заливании в БИ оттенки разнятся. Причем бывает так что в фотошопе у вас одно, а на дайрах другое. Вне зависимости от формата сохранения. (Дайри магия не иначе:-D)
Все нижеизложенное выстрадано проверено на себе долгим и упоротым упорным трудом)
1. Не ленитесь. Сборка макета кропотливый и нудный процесс, но результат того стоит.
2. Всегда используйте направляющие для разграничения деталей оформления. И соответственно разрезайте на части только по ним.
3. Не делайте вот так:

То есть не кадрируйте ваш макет и не сохраняйте его куски в png.
4. Как надо.
Выделяем нужную нам область. И жмем Скопировать совмещенные данные
Далее создаем новый документ. Файл - Создать И в выпавшем окошке обязательно выбираем этот цветовой профиль.
Нажимаем Ctrl+V. И дальше работаем с этим изображением. Удаляем слой с белым фоном.
В отступление от темы скажу что раньше многие жаловались на тяжесть моих оформлений из за большого количества и размера изображений. Я естественно искал выход из положения. И нашел.

Изображение - Коррекция - Постеризация В открывшемся окошке сдвигаем ползунок где то до значения 150. Визуально ничего не меняется, зато картинка весит значительно меньше.
Дальше сохраняем файл особым образом.

Обязательно выбираем прозрачность и png 24 для полупрозрачных частей и jpg для непрозрачных. Внизу слева можно увидеть итоговый вес изображения.

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

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

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

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. Да. 
27  (100%)
2. Нет. 
0  (0%)
Всего: 27

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

19:48 

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

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

Нажимаем

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

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

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

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

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

16:18 

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

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

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



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



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



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



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


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



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

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



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



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


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

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

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. Да. 
60  (95.24%)
2. Нет. 
3  (4.76%)
Всего: 63

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

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. Да. 
57  (96.61%)
2. Нет. 
2  (3.39%)
Всего: 59

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

10:46 

О цветах.

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

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

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

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

17:44 

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

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


Форма.

Обводка.



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

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

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

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

21:02 

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























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

Вопрос: Полезно?
1. Да. 
83  (93.26%)
2. Нет. 
6  (6.74%)
Всего: 89

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

02:12 

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

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


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

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

13:12 

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

Вопрос: Интересно?
1. Да. 
58  (84.06%)
2. Нет. 
11  (15.94%)
Всего: 69

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

03:11 

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

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

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

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

03:09 

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

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

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

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

03:07 

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

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

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

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

03:05 

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

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


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

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

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

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

главная